Dynamic Table builder inputs - Portlet Factory v6.1.2

Portlet Factory, Version 6.1.2

Dynamic Table builder inputs

This topic describes the Dynamic Table builder inputs.

Data Grouping
Look and Feel
Advanced

Table 1. Dynamic Table builder inputs
Input Name Description
Name Name for this builder call. The WebSphere Portlet Factory 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.
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}

Note: You do not have to specify these paths by hand; you 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 you can control the first item in the table at runtime by changing the value in the variable. You 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}.
Note: 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

Table 2. Dynamic Table builder Data Grouping inputs
Input Name Description
(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

Table 3. Dynamic Table builder Look and Feel inputs
Input Name Description
(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 You 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. You can provide more than two colors: the builder will cycle through the list of colors that you supply.

Advanced

Table 4. Dynamic Table builder Advanced inputs
Input Name Description
(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
(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.

Parent topic: Dynamic Table builder

Library | Support |

Input Name	Description
Name	Name for this builder call. The WebSphere Portlet Factory 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.
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} Note: You do not have to specify these paths by hand; you 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 you can control the first item in the table at runtime by changing the value in the variable. You 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}. Note: 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.

Input Name	Description
(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	You 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. You can provide more than two colors: the builder will cycle through the list of colors that you supply.