Real-World Example 3: Dynamic Tables

Real World Example 3 Dynamic Tables

Since the early releases of Domino, developers have long asked for a way to develop tables on the fly. With HTML and JavaScript came a solution for dynamic tables. The technique is easy and commanding all at once ”what's more, it is reusable repeatedly.

To get started, we will need to build the lists of data that will make up the contents in each column ( ) in the table. The table in this example consists of four columns and header labels: Produce Category, Produce Item, Produce Details, and Item Price. It also uses five fields to generate the lists for each column's set of data, as shown in Table 17.2. Each field uses the HTML attribute setting of "Type="Hidden"" , which makes it hidden to the user in the browser but not to JavaScript on the back end. One @DbColumn lookup is performed while the column fields extract their data sets from the main lookup result.

Table 17.2. The Various Hidden JavaScript Fields and Their Formulas

Field Name	Its Purpose
ProduceCatList	The only field that performs a single @DbColumn lookup to gather all the data for all the columns in the table. This generates a list of values that looks like this: Fruits~Apples~2.49It's time for Grandma's apple pie! This week's special price make them irresistible.; Fruits~Avocados ~1.29Fresh sun ripened Avocados can warm up any meal, side dish, or salad! Get our avocado salsa recipe that is great with warm tortillas and pepper-jack cheese! This week's special price make them irresistible.; Fruits~Bananas~1. 69Jamaican Bananas...
ProduceCategories	Extracts from the ProduceCatList lookup and stores the list of all the item's produce categories, such as Fruits or Vegetables for Column 1. This generates a list of values that looks like this: Fruits;Fruits;Vegetables;Vegetables...
ProduceCategoryItems	Extracts from the ProduceCatList lookup and stores the list of all the item names for Column 2. This generates a list of values that looks like this: Apples; Avocados; Bananas; Mangos; Garlic Braid; Green Beans; Onions
ProduceItemPrices	Extracts from the ProduceCatList lookup and stores the list of all the item prices for Column 4. This generates a list of values that looks like this: 2.49; 1.29; 1.69; 2.99; 4.39; 1.39; 0.99
ProduceItemDetails	Extracts from the ProduceCatList lookup and stores the list of all the item details for Column 3. This generates a list of values that looks like this: It's time for Grandma's apple pie! This week's special price make them irresistible.; Fresh sun ripened Avocados can warm up any meal, side dish, or salad! Get our avocado salsa recipe that is great with warm tortillas and pepper-jack cheese! This week's special price make them irresistible.; Jamaican bananas can warm up any meal, side dish, or salad! Try our Banana's Foster recipe that is a great ending to any meal! This week's special price make them irresistible.;...

Each field's text properties are set to Editable, Allow Multiple Values, and both multivalue options are set to allow only a semicolon as the separator. Figure 17.19 shows the JSExample3 form in Designer 6 and all the fields shown in Table 17.2.

Figure 17.19. The JSExample3 form in Designer 6 showing the ProduceCategories field's text properties.

This is another example of using only one @DbColumn lookup to get all the values and extracting the various data sets to make up the list contents of the other fields. Most developers might choose to perform lookups for each data segment, which can be done, but this dramatically increases the form's load time on the Web. It also brings a certain amount of error into the fold. If many lookups are being performed in various fields, the number of items in the column might not match exactly, which will possibly result in a disproportionate, malformed table.

When the fields are in place for each column of the table, the makeTable() JavaScript function can be called to make the table. Listing 17.15 shows the makeTable() function in the JSHeader event of the JSExample3 form.

Listing 17.15 The makeTable() Function, as Called from the JSExample3 Form

1. function makeTable(objectName1,objectName2,objectName3,objectName4,
colHead1,colHead2,colHead3,colHead4) {
2. var tempString1 = document.forms[0][objectName1].value;
3. var tempString2 = document.forms[0][objectName2].value;
4. var tempString3 = document.forms[0][objectName3].value;
5. var tempString4 = document.forms[0][objectName4].value;

6. var stringArray1=explodeArray(tempString1,";");
7. var stringArray2=explodeArray(tempString2,";");
8. var stringArray3=explodeArray(tempString3,";");
9. var stringArray4=explodeArray(tempString4,";");

10. var n = stringArray1.length;
11. //Let's write to the document the initial commands to build the table and write the

column labels.
12. document.write("");
13. for (var i = 0; i < n; i++) {
 i. if ( i % 2 == 0 ) {
 ii. document.write( "" );
 vii. } else {
 viii. document.write( "");
}
 }
 }
 document.write("

"middle" WIDTH="75" BGCOLOR="FFFFFF"> " + colHead1 + i. "	"> " + colHead2 + ii. "	"> " + colHead3 + iii. "	"> " + colHead4 + iv. "
SIZE=1 FACE="Arial">" + stringArray1[i] + iii. "	FACE="Arial">" + stringArray2[i] + iv. "	"Arial">" + stringArray3[i] + v. "	SIZE=1 FACE="Arial">" + stringArray4[i] + vi. "
SIZE=1 FACE="Arial">" + stringArray1[i] + ix. "	"Arial">" + stringArray2[i] + x. "	"Arial">" + stringArray3[i] + xi. "	" + stringArray4[i] + xii. "

"); }

This looks like a lot of code, but it's really just a lot of HTML formatting that could be put into style sheets. For the sake of demonstration, explicit code is being used in this example so that you can easily see what's going on and how you might be able to customize this function to suit your needs.

Line 1 defines the function's parameters. Each objectName parameter is the name of the field, which stores the column data. Enter each field name in the order you want the columns to appear. In this example, the order as shown in Listing 17.16 is used.

Listing 17.16 The Order of the Field Name Parameters for the makeTable() Function

'ProduceCategories','ProduceCategoryItems','ProduceItemDetails','ProduceItemPrices'

The remaining other four parameters as shown in line 1 of Listing 17.16 refer to the text for the column labels in the dynamic table. The order of these parameters must match the sequence listing of the field name parameters. This example uses the order as shown in Listing 17.17.

Listing 17.17 The Order of the Column Label Parameters for the makeTable() Function

'Category','Item','Item Details','Price'

Putting all the parameters together, the function when called looks like Listing 17.18.

Listing 17.18 Calling the makeTable() Function Defining Each of Its Parameters

makeTable('ProduceCategories','ProduceCategoryItems','ProduceItemDetails',

'ProduceItemPrices','Category','Item','Item Details','Price')

With each parameter defined, lines 2 “9 in Listing 17.16 set temporary variables so that the list of contents in each field can be parsed and exploded to make up each column's data set. When the each column's data set is prepared, the script has everything it needs to begin building the dynamic table. Line 10 in Listing 17.16 tells the script how many rows the table will have by how many items are in the first column's variable array. Lines 12.i “iv build the table and its first row of column labels, as defined by each colHeadx function parameter.

Alternating Row Colors

Line 13 in Listing 17.16 begins a for loop that loops through each item as found in var n or, again, the number of items in the ProduceCategories temporary variable stringArray1() . With each pass through the for loop, a row dynamically is built inside the table. The code in Line 13.i, if ( i % 2 == 0 ) { , gives the table a twist. The %2 provides a means for setting the row's background color to a different color for the row based on the result of its modulus dividend. This means that if there are six rows of data in the table, rows 0, 2, 4, and 6 will have a different background color. Arrays begin their count at zero, so the array(0) items make up the row1 table data effectively. This is also know as alternating row colors.

The % operator symbol is known as the modulus operator, which is like the division operator except that it evaluates to the remainder of division of two values. This means that if the result of the operation is divided by %2 (modulus 2), the quotient is always equal to either 0 or 1.

Lines 13.ii “vi build rows 0, 2, 4, and 6, as well as their columns in the table, using the function parameters as passed. Each of these rows displays a light-yellow row background for each column. Lines 13.viii “xii build rows 1, 3, and 5 and give columns a white background. The stringArray[I] method passes the data for each column by being placed inside two HTML Table Data begin and end tags: . Therefore, for every item in the list, a row and column are created for it.

Line 13.d closes the table with the ending HTML command and completes the run of the function. To call the function on the JSExample3 form, the function is placed between two pass-thru HTML tags at the exact place where the table will be built on the form (see Figure 17.20).

Figure 17.20. Calling the makeTable() function with