1 <?xml version="1.0" encoding="utf-8"?> 2 <!--THIS IS AN XML EXAMPLE WHICH CONTAINS TABLE DATA 3 It shows the procedure for specifying table configuration and how to 4 enter table row/cell HTML 5 VIEW THIS EXAMPLE. 6 http://pgsoftwaretools.com/powerpac/assessments/sethtmltable-xml 7 DOWNLOAD THE SOURCE FILES: 8 http://pgsoftwaretools.com/powerpac/assessments/sethtmltable-xml/SOURCE.zip--> 9 <page> 10 <config> 11 <!--Config sections allowed just like standard XML documents. 12 If not used, just leave the <config></config> tags with 13 no data or sub-tags.--> 14 </config> 15 16 <my_csv_data> 17 <function name="populateTable" event="user" params="evt,value" useTB="true"> 18 <![CDATA[ 19 /* Pass the CSV raw data to this user event 20 Trigger the user event with button click, etc. 21 ***/ 22 if (!!value == false) return; //Stop if no data exists 23 24 var data, i, p, vals, cellID; 25 data = tbfunction_pgSplitToArray(value, "\n"); //data = array of rows 26 data = tbfunction_pgSort_Shuffle(data, false, true, 0, false, 'array'); //Remove empty rows 27 28 //Traverse the rows of data and put them in the table 29 for (i = 0; i < data.length; i++) { 30 vals = tbfunction_pgSplitToArray(data[i], ",", true); //vals = array of values for cell data 31 for (p = 1; p < vals.length; p++) { 32 if (i == 0) { 33 //First row is column data 34 cellID = 'c' + p + '_myTableHdr'; 35 tbfunction_pgSetTableDataCell(cellID, vals[p]); 36 } else { 37 //Table data processing 38 cellID = 'r' + i + 'c' + p + '_myTableData'; 39 tbfunction_pgSetTableDataCell(cellID, vals[p]); 40 } 41 } 42 } 43 ]]> 44 </function> 45 </my_csv_data> 46 47 <!--Table tags are sub-sections of XML configurations with HTML cell data 48 You can have multiple table tags in your XML document, however it is 49 much easier to manage and troubleshoot tables if they are in 50 separate XML documents. 51 NOTE: An XML document include only the <table> ... </table> section 52 and none of the previous sections described above.--> 53 <table> 54 <!--Tables MUST begin with a config section--> 55 <config> 56 <!--GLOBAL TABLE CONFIG SETTINGS: 57 hdr_name = name of ToolBook object or container to use for column headings 58 (Recommendation: use an empty field; avoid spaces in names) 59 dat_name = name of ToolBook object or container to use for table data 60 (Recommendation: use an empty field; avoid spaces in names) 61 id = unique id of table or leave empty (avoid spaces in id) 62 Defaults to [dat_name] and is the name of ToolBook object 63 that should receive user events when a row/cell is clicked 64 columns = comma-separated list of column sizes as pixels or as 65 percentages (totalling 100%); 66 NOTE: to float the last column enter * (asterisk) 67 RECOMMENDATIONS: Use pixels for all but the last column: 68 Example: 60px,144px,60px,* 69 Percentages work fine if data rows will not span columns 70 using the attribute colspan="#" 71 stylesheet = [path]/[filename].css for table stylesheet (required) 72 Please see our css table template file for help in building 73 your css table stylesheet. 74 class_hd = string as class name referenced in stylesheet to use when 75 styling the header part of table. See [hdr_name]. 76 class_data = string as class name referenced in stylesheet to use when 77 styling the data portion of table. See [dat_name]. 78 scroll = true | false 79 Indicates whether data portion of table is scrollable; 80 NOTE: Header portion is always fixed. 81 row_highlight = true | false 82 Determines whether rows will highlight when clicked. 83 If true, then following class definitions will be applied 84 to table rows if defined in the [stylesheet]. 85 row_shade = string as class name referenced in stylesheet to use 86 for shaded row styling 87 NOTE: Requires setting [row_shade_apply] to "odd" or "even" 88 row_hover = string as class name referenced in stylesheet to use 89 for row hover styling (mouseover row) 90 row_select = string as class name referenced in stylesheet to use 91 for selected (clicked) row styling 92 row_shade_apply= none | odd | even 93 Indicates how to start applying shading to alternating rows 94 in table; defaults to "none" or no shading 95 cell_highlight = true | false 96 Indicates whether cells will highlight when clicked; 97 If true then the following classes will be applied to cells 98 NOTE: <td id="myCellx"> ... </td> attribute id must also be 99 defined for each cell that requires cell highlighting. 100 Value of id determines the [value] property sent with 101 user even to object whose name is [dat_name]. 102 cell_hover = string as class name referenced in table stylesheet for 103 when mouse hovers over table cell; 104 Defaults to no class or no change on hover. 105 If cell_highlight = true, then the default value for [cell_hover] 106 equals the class name "tdListHover" (make sure it is defined in stylesheet). 107 cell_click = string as class name referenced in table stylesheet for 108 table cell when clicked; 109 Defaults to no class or no change on click; 110 If [cell_highlight] = true, then the default value for [cell_click] 111 equals the class name "tdListSelect" (make it is defined in stylesheet). 112 pgStyleObject = (optional) 113 [ 'tbName', 'theStyle', 'styleValues' ] where: 114 tbName defaults to [dat_name] and represents the styling 115 that should be applied to tbName when table loading has finished. 116 NOTE: Requires comma-separated list of strings in brackets as shown 117 in this example: 118 <pgStyleObject> 119 <![[CDATA[ 120 [ 'myTable', 'border', '2px solid black' ] 121 ]]> 122 </pgStyleObject> 123 This config entry may be used multiple times to style other 124 table-related objects. For example, the [hdr_name] can be 125 styled separately from [dat_name]. 126 NOTE: Most of the time, special styling can/should always be contained 127 in the stylesheet. It is easier to manage styles at that level. 128 END OF GLOBAL CONFIG SETTING COMMENTS 129 EXAMPLE CONFIG FOLLOWS--> 130 <hdr_name>myTableHdr</hdr_name> 131 <dat_name>myTableData</dat_name> 132 <id>myTableData</id> 133 <columns> 134 50%,* 135 </columns> 136 <stylesheet> 137 ../media/myTable.css 138 </stylesheet> 139 <class_hd>dlisthd</class_hd> 140 <class_data>dlist</class_data> 141 <scroll>true</scroll> 142 <row_highlight>true</row_highlight> 143 <row_shade>dlistShade</row_shade> 144 <row_hover>dlistHover</row_hover> 145 <row_select>dlistSel</row_select> 146 <row_shade_apply>even</row_shade_apply> 147 <cell_highlight>false</cell_highlight> 148 <cell_hover> </cell_hover> 149 <cell_click> </cell_click> 150 <pgStyleObject> 151 [ 'myTableData', 'height', 'auto' ] 152 </pgStyleObject> 153 </config> 154 155 <!--The <headings> ... </headings> section defines column headings (top fixed row of 156 table) and data for this part of the table.--> 157 <headings class="hdr"> 158 <!--HEADINGS ROW DETAILS: 159 Atrributes supported: 160 class = class as string referenced in config section stylesheet to use for 161 styling entire header row 162 <col> ... </col> DEFINITIONS: 163 col = string as CDATA if using HTML tags; or simple text 164 col = string 165 col = string 166 ... last col = string 167 168 Attributes supported in <col ...></col> tags: (All optional) 169 align = string as "left", "center", or "right" 170 class = class as string referenced in config section stylesheet to use 171 for styling this column heading 172 rowspan = (optional integer) indicates column heading should span # rows 173 colspan = (optional integer) indicates column heading should span # cols 174 END OF HEADINGS ROW DETAILS 175 EXAMPLE COL TAGS--> 176 <col class="inc" id="c1_myTableHdr"> 177 Column 1 178 </col> 179 <col class="inc" id="c2_myTableHdr"> 180 Column 2 181 </col> 182 </headings> 183 184 <!--The <t_data> ... </t_data> section defines the table data rows.--> 185 <t_data> 186 <!--TABLE ROW DETAILS: 187 No attributes are supported for <t_data></t_data> 188 Each sub-element or ROW of the table must be formatted as: 189 <row [attributes]> 190 <td [attributes]> 191 <![CDATA[ 192 [HTML or text] 193 ]]> 194 </td> 195 <td [attributes]> 196 <![CDATA[ 197 [HTML or text] 198 ]]> 199 </td> 200 ... and so on for each cell in the row ... 201 </row> 202 ... and so on for each row in the table ... 203 204 Supported attribues for <row ... > </row> tags: 205 id = unique id to assign to the table row 206 Defaults to "auto" to have PowerPac auto-assign row ids 207 Automatic row ids take the form 208 "row1_[dataTableContainer]", "row2_[dataTableContainer]", etc. 209 class = string as class referenced in config section stylesheet to 210 use to style this table row 211 212 Supported attributes for <td ... > </td> tags: 213 id = unique id to assign to the table data cell 214 If unset, no td cell events will occur and no special 215 styling will be applied on hover, click, etc. 216 rowspan = (optional integer) indicates whether table data cell 217 should span # rows (default is 1) 218 colspan = (optional integer) indicates whether table data cell 219 should span # columns (default is 1) 220 class = string as class referenced in config section stylesheet to 221 use to style this table data cell 222 END OF TABLE ROW DETAILS 223 EXAMPLE ROWS--> 224 <row> 225 <td class="inc" id="r1c1_myTableData"> 226 <![CDATA[ 227 cell data 228 ]]> 229 </td> 230 <td class="inc" id="r1c2_myTableData"> 231 <![CDATA[ 232 cell data 233 ]]> 234 </td> 235 </row> 236 <row> 237 <td class="inc" id="r2c1_myTableData"> 238 <![CDATA[ 239 cell data 240 ]]> 241 </td> 242 <td class="inc" id="r2c2_myTableData"> 243 <![CDATA[ 244 cell data 245 ]]> 246 </td> 247 </row> 248 </t_data> 249 </table> 250 251 </page> 252 253