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

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.;
~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.
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:
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

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

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( "");
"middle" WIDTH="75" BGCOLOR="FFFFFF">

" + colHead1 graphics/ccc.gif + 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


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

'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

Part I. Introduction to Release 6

Whats New in Release 6?

The Release 6 Object Store

The Integrated Development Environment

Part II. Foundations of Application Design

Forms Design

Advanced Form Design

Designing Views

Using Shared Resources in Domino Applications

Using the Page Designer

Creating Outlines

Adding Framesets to Domino Applications

Automating Your Application with Agents

Part III. Programming Domino Applications

Using the Formula Language

Real-World Examples Using the Formula Language

Writing LotusScript for Domino Applications

Real-World LotusScript Examples

Writing JavaScript for Domino Applications

Real-World JavaScript Examples

Writing Java for Domino Applications

Real-World Java Examples

Enhancing Domino Applications for the Web

Part IV. Advanced Design Topics

Accessing Data with XML

Accessing Data with DECS and DCRs

Security and Domino Applications

Creating Workflow Applications

Analyzing Domino Applications

Part V. Appendices

Appendix A. HTML Reference

Appendix B. Domino URL Reference

Lotus Notes and Domino 6 Development
Lotus Notes and Domino 6 Development (2nd Edition)
ISBN: 0672325020
EAN: 2147483647
Year: 2005
Pages: 288 © 2008-2020.
If you may any questions please contact us: