Dynamic Table Builder

Dynamic Table Builder

In this topic ...

Quick Tips
Specifying Inputs
Using the Dynamic Table Builder
How to Create a Custom Dynamic Table HTML Page
Related Topics ...

Overview: Working with Data
Creating a Custom Dynamic Table HTML Page
How to Use the Data Page Builder

The Dynamic Table builder adds a table to a named tag or other location on a page or pages. Only use this builder when we need the table to change at run time. For most tables the Data Page Builder is recommended.
When you embed a Dynamic Table builder within a model and provide a content source, the Dynamic Table builder automatically creates an HTML table of appropriate size to display the specified content. A table can include columns. Columns in a table are identified by the column names. A column in a table can be used as a placeholder for other control builders, such as a button or check box. When this is the case, the builder operates on each cell of that column.
For information about creating calls to a database, see "Overview: Working with Data."

Quick Tips

To display the contents of the Loop variable use a Tree builder to display the contents. For more information, see "How to Use the Tree Builder."
Once you have created a table, use the Dynamic Table Column builder to modify the look and content of an existing column in the table. For more information, see "How to Use the Dynamic Table Column Builder." If you do not use the Dynamic Table Column builder, the headers are picked up by the values in the Source Data field.

Specifying Inputs

The Dynamic Table builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor."

Input Name Description
Name Enter a name for this builder call. The Designer displays this name in the Builder Call List.
Page Location Use the Page Location input to specify the page or pages on which this builder call will act.
See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
Source Data Enter the source of the data for the Dynamic Table builder.
Possible sources include variables, service call outputs, and XML data returned by methods:

For an executeReadSQL database service call: ${Variables/executeReadSQL_reply}
For a variable containing XML: ${Variables/Products}
For a method returning XML: ${MethodCall/methodName}

You do not have to specify these paths by hand; we can use the Reference Tree to navigate down to the appropriate element.
If the source is a variable, it must be of type XML. Each child element of the row element is a column.
<data> <row> <id>1234</id> <name>John Smith</name> <age>52</age> <occupation>Web Designer</occupation> </row> <row> <id>1235</id> <name>Rodger Jones</name> <age>27</age> <occupation>Network Administrator</occupation> </row> <row> <id>1236</id> <name>Julie James</name> <age>38</age> <occupation>Software Engineer</occupation> </row> </data>
Column Elements Enter the XML element names for which you want a column displayed in the table. If you want all the elements in the data to be displayed as columns, leave this value blank.
Make sure the column names you enter match the XML element names exactly, including case. Separate each header with a comma, as shown below:
name,age,occupation
Row Index Enter the number of rows to skip in the source data before displaying it. This value specifies the index within the repeat source list to use as the first item in the table. You can leave this blank to begin at the first item in the source list. You can also provide an indirect reference (for example, to a variable) so that we can control the first item in the table at runtime by changing the value in the variable. We can provide a crude implementation of scrolling by changing the repeat from and repeat to values at runtime to move up or down through a long source list of data.
(Optional) Row Count Enter the number of rows to include in the partial display of table data. This can be a direct value or an indirect one, for example ${Variables/rowcount}.
If you are using the Dynamic Table in conjunction with a Paging Assistant builder call, be sure that the Paging Assistant's Page Size value and the Dynamic Table's Row Count value are the same. Otherwise, your the Paging Buttons or Paging Links will not correctly indicate the rows numbers being displayed.
Data Grouping
(Optional) Group by First Column Use this option if you want the value of the first column to appear as a heading.
For example, assume you created a spreadsheet that lists the amounts the engineering and marketing departments spent from January to March, as shown below:

Department Name January February March
Engineering Department $125,000 $130,000 $160,000
Engineering Department $125,000 $130,000 $160,000
Marketing Department $134,000 $167,000 $154,000
Marketing Department $134,000 $167,000 $154,000

Assume you want the department names to be listed as headings. The values for the department would be listed twice, as shown in the table above. When the Group by First Column option is enabled, the values in the first row are removed and used for the heading since the values are repeated anyway in the second row, as shown in the table below.

January February March
Engineering Department
$125,000 $130,000 $160,000
Marketing Department
$134,000 $167,000 $154,000

Since the values in the first column are used as headings, the first column is removed. Also, if you do not select the Draw Borders option, the heading expands the length of the row.
(Optional) Data Row Indent (appears when the Group by First Column option is selected) If you selected the Group by First Column option and you want the values in the first column to appear indented, select the Data Row Indent option.
Look and Feel
(Optional) Table Width (pixels or %) Specify how wide you want the table to be in pixels or a percentage of the browser window.
(Optional) Border Width (pixels) Specify the width of the table border in pixels.
(Optional) Table CSS Class Name Enter a coma delimited list. Each item in the list should be the name of a style sheet class that defines the display characteristics for an alternating table row.
For example, assume you entered the following style sheet class in the page containing the table.
<html>
<head>
 <style type="text/css">
 .boldText {font:16 pt bold Arial;}
 </style>
</head>
You would enter boldText in the Table CSS Class field. This would make the elements in the table appear in bold Arial text at 16 pt.
(Optional) Title Bar CSS Class Name Enter the name of the style sheet class that defines the display characteristics for the table bar.
For example, assume you entered the following style sheet class in the page containing the table.
<html>
<head>
 <style type="text/css">
 .boldText {font:16 pt bold Arial;}
 </style>
</head>
You would enter boldText in the Title Bar CSS Class Name field. This would make the elements in the table appear in bold Arial text at 16 pt.
(Optional) Title Bar Color Enter a color for the title bar, such as blue. This value can also be a hexadecimal value with the hash symbol in front of it, for example, #FFF777. You can also enter an indirect value for example ${Variables/titlebarcolor} with the color value stored in a variable.
(Optional) Alt. Row CSS Class Enter a coma delimited list. Each item in the list should be the name of a style sheet class that defines the display characteristics for an alternating table row.
For example, assume you entered the following style sheet class in the page containing the table.
<html>
<head>
 <style type="text/css">
 .boldText {font:16 pt bold Arial;}
 .smallBoldText {font:10 pt bold Arial;}
 </style>
</head>
You would enter boldText,smallBoldText in the Alt. Row CSS Class field. This would make the rows in table alternate between bold Arial text at 16 pt and bold Arial text at 10 pt.
(Optional) Alternating Row Colors We can set the background colors of alternating rows of the table by providing a direct reference as a comma-separated list of colors (for example, ffffff,d3d3d3) or by providing an indirect reference (for example, to a variable) if you want to be able to control the row colors at run time. We can provide more than two colors: the builder will cycle through the list of colors that you supply.
Advanced
(Optional) Row Identifier Specify the tag name in the source data that will provide a unique row identifier.
The builder adds a hidden field to each row that is accessible to actions called from within a table row (for example, a Link or an Image Button action). This called method can retrieve the value of this hidden field to determine which row in the table to act on. Methods can retrieve the value by looking for hiddenRowIdentifier in the inputs.
For example, assume you created a table that provides a listing of classes, and you want the user to be able to obtain more information about a class by clicking the corresponding "Send Information" button in the table, as shown below.

Class ID Class Time More Information?
1234 How to Design Web Sites 7 to 9 p.m. Mondays "Send Information" button
1235 Java Programming I 7 to 9 p.m. Tuesdays and Thursdays "Send Information" button
1236 Network Administration 4 to 7 p.m. Wednesdays and Fridays "Send Information" button

To take advantage of this feature, you would enter Class ID as a value in the Row Identifier field. This would make the Class ID column hidden from the user. When the user clicked the "Send Information" button, the corresponding Class ID value would be sent to the server.
(Optional) HTML Page By default the Dynamic Table builder uses factory/pages/table_page.htm, which supports the display of 10 columns.
If you want more than 10 columns displayed, create a custom table HTML page. Then, enter its path from the <servable_content_root> directory in the HTML Page field, and enter its maximum number of columns in the Maximum Column Count field. For example, factory/pages/custom_table_page.htm
For more information, see "How to Create a Custom Dynamic Table HTML Page."
(Optional) Maximum Column Count If you are using a table HTML page other than factory/pages/table_page.htm enter the number of columns supported, for example, 12.
For more information, see "How to Create a Custom Dynamic Table HTML Page."

Using the Dynamic Table Builder

Use the Dynamic Table builder to give a set of tabular data a visual representation in an HTML page. Typically, the result of a database query yields a set of tabular data. To show the query result in a human-readable form, a Dynamic Table builder can be used.
A Dynamic Table builder accepts two types of source data:

A two-dimensional array data structure
A ResultSet from a database query

In the case of ResultSet data, the MetaData in the result set defines table schema information (column name, data type, and display label). In the case of simple tabular data, the schema information is calculated using the first row of data. If the table data is sparse (the first row of data does not include all the defined column cells), the table may not display correctly.

Display Part of a Table

Table data does not have to be presented in its entirety. When creating a Dynamic Table builder, we can specify a row index and a row count for displaying a table. This allows you to use a single source of table data and display that data in different ways using multiple tables. This is useful when we need to display table data within a size constraint.

Table Headers

We can control the display of table headers. The default header display is bold-faced column labels or, if labels are not specified, the column name. We can omit a table header by choosing the "Hidden" type of header. This is useful when one set of table data is broken into more than one table. We can also use a Button or a Link control as a table header. For each of these controls we can use an HTML event to define an active function.

Table Look and Feel

The HTML attribute settings of the table and the table rows and columns may be defined in two places:

The HTML component as placeholder of the table (Name field in the Dynamic Table builder) - All the attributes of the placeholder component are copied to the table.
The Attribute Setter builder- After you create a table with the Dynamic Table builder, we can set additional attributes or override the existing attribute settings with an Attribute Setter builder.

When that table is processed, the table placeholder's children are parsed to look for all its TR elements. The first TR element found is used for the formatting of the header row. The rest of the TR elements are used to present the table rows and repeated as a group. The TD elements found inside the first TR element are used for displaying the header cells. They are also repeated as a group. The TD elements in the second TR element are used for the data cells. TD elements found anywhere else are ignored.

Setting Cell Display Attributes with Style Sheets

We can use style sheets to control formatting in a table. All TD elements in a table displayed on a page are assigned by class names (the "class" attribute). The name assignment looks as follows: TableNameColumnName. There is no space between the table name and column name.
An HTML CSS style can be assigned to the cells following HTML CSS rules.
For example, if your table has a name attribute where name=table1 and a column in the table that will have the name columnData, then the TD with a class would read TD.table1columnData. We can apply style in a block in the HTML page to which the Dynamic Table builder is associated such as:
<HTML>
<HEAD>
<STYLE TYPE=text/css>
<!-
TD.table1columnData{background-color:red}
|
</STYLE>
</HEAD>
...
or alternately,
<HTML>
<HEAD>
<STYLE TYPE=text/css>
<!-
.table1columnData{background-color:red}
|
</STYLE>
</HEAD>
...
We can then assign the TD tag as follows:
<TD class=.table1columnData></TD>

Accessing Table Data

You can access table data when a user performs an action on the page by getting the values from a set of variables that the Dynamic Table builder adds to the WebApp. We can see these variables by examining the Variables objects in the WebAppView in the Designer. The following table lists and describes these variables:

Variable Description
TableNameLoopCounter As the rows of the table get rendered, the Factory increments the LoopCounter for the table.
TableNameLoopVar As the rows of the table get rendered, the Factory extracts the row data from the data source and stores it in this variable.
TableMetadata Contains information about all the tables in the model, including column names, titles, etc.

The data in the TableMetadata variable is static and we can always access it using an indirect reference or with a call to the webAppAcccess.getVariables().getXml("TableMetadata") method.

Upon submission of a form, any table data is accessed as input data, similar to other input controls. The syntax of accessing table input is "Inputs/TableName/...".
Table data content can include:

TableName/TableData - This is the table data that appears on the displayed page. If the table is sorted, the rows are sorted by the same sorting column in this table data, which is different from the order they are in the original data source. If the table's column has an input type of cell object, the value change made by a user on the page is placed in this table. As a result, the table is accurate as to what is displayed on the page before it is posted to the server. But it does hold a complete set of data including those columns and rows not displayed on the page.
TableName/CurrentRow - If an action is triggered by a column cell, this is the row data of the active row.
TableName/CurrentColumnName - If an action is triggered by a column cell or header cell, such as a button in a column, this identifies the column the cell was in.
TableName/CurrentRowIndex - If an action is triggered by a column cell or header cell, this is the row index that the cell's data is in the original table. This index can be used to access data from the original table data. If the action is triggered by a header cell, the index value is -1.
TableName/CurrentDisplayRowIndex - If an action is triggered by a column cell or header cell, this is the row index that the cell's data is in the displayed table. This index can be used to access data from this table's TableData. If the action is triggered by a header cell, the index value is -1.

Using Loop Variables

The Dynamic Table builder provides a set of loop variables for other builders to use to define builders within a table. The table loop variable is significant only during table processing time. It is not used in any other setting. Do not use table loop variables if the builder will not be placed within a table. Note the following:

LoopVariable/TableName/RowData - Holds row data for the row under processing. This provides a way for a builder to use the table's source data. For example, a Link builder can specify its display text and its href value from two different columns of the table.
LoopVariable/TableName/RowIndex - The row index that is under processing in the table. Note that in a sorted table, this index is the original row index of the table data. It can be used to get the right data from the original table data source for the builder in the cell. This variable is useful when table data is located in multiple sources that are broken up into columns.
LoopVariable/TableName/DisplayRowIndex - The display row index that is under processing. In the case of a sorted table, this index will be different from the row index. Use this variable to get data from a source that is unrelated to the table data source.

How to Create a Custom Table HTML Page

By default, the Dynamic Table builder can display at most 10 columns. We can increase the number of columns displayed by modifying the default table HTML page (factory/pages/table_page.htm) or we can create a new one.
This page provides a placeholder for the columns. The number of columns displayed depends on the items listed in the Column Elements field in the Dynamic Table builder.

If you want to create a new page, make a copy of factory/pages/table_page.htm and rename it.
Open the HTML page you want to modify in a text editor, such as Notepad.
Each column must have a header. To create a header for a column, add a child element to <tr name="titleBar">. The child element's name must resemble the previous child element. Notice that the elements for the column headers are named as follows:

<td name="col10Vis"></td>
The next column header would have the same name except for the increments in the name, as shown below:
<td name="col11Vis"></td>

To create a column, add a child element to <tr name="rowColor">. The child element's name must resemble the previous child element. Notice that the elements for the columns are named as follows:

<td name="col10Vis"></td>
The next column element would have the same name except for the increments in the name, as shown below:
<td name="col11Vis"></td>

Repeat Steps 3 and 4 for each additional column.
Save the table HTML page.
If you created a custom table HTML page, modify the path in the HTML Page field in the Dynamic Table builder so that it points to the correct table HTML page.
In the Maximum Column Count field, enter the new number of columns listed in the table HTML page.

An example of a modified table HTML page is shown below.
<table name="dataTable">
 <tr name="titleBar">
 <td name="col1Vis"></td>
 <td name="indent"> </td>
 <td name="col2Vis"></td>
 <td name="col3Vis"></td>
 <td name="col4Vis"></td>
 <td name="col5Vis"></td>
 <td name="col6Vis"></td>
 <td name="col7Vis"></td>
 <td name="col8Vis"></td>
 <td name="col9Vis"></td>
 <td name="col10Vis"></td>
 <td name="col11Vis"></td>
 <td name="col12Vis"></td>
 </tr>
 
 
 <tr name="rowColor">
 <td colspan="13" name="col1GroupBy"></td>
 </tr>
 
 <tr name="rowColor">
 
 <td name="col1Vis"></td>
 <td name="indent"> </td>
 <td name="col2Vis"></td>
 <td name="col3Vis"></td>
 <td name="col4Vis"></td>
 <td name="col5Vis"></td>
 <td name="col6Vis"></td>
 <td name="col7Vis"></td>
 <td name="col8Vis"></td>
 <td name="col9Vis"></td>
 <td name="col10Vis"></td>
 <td name="col11Vis"></td>
 <td name="col12Vis"></td>
 </tr>
 
 </table>

Variable	Description
TableNameLoopCounter	As the rows of the table get rendered, the Factory increments the LoopCounter for the table.
TableNameLoopVar	As the rows of the table get rendered, the Factory extracts the row data from the data source and stores it in this variable.
TableMetadata	Contains information about all the tables in the model, including column names, titles, etc.