IBM Support

How to add the Details Section to a table

Technical Blog Post


Abstract

How to add the Details Section to a table

Body

Steps to add the Details Section to a table.

 

1. In order to properly set up the details section in a table you need to add both events in the table: toggleselectrow and toggledetailstate.

The events are added in the table by tablecol tags.

2. Add a tabledetails tag after the tablebody.

3. Make sure that the "linkedcontrolid" property from the columns of the tablebody are the same of the "id" from the fields of the tabledetails.

The following is an example of the table with table details set up.

########################################################################################################

<table id="tablegrid1" label="My Table" selectmode="multiple">
<tablebody>
<tablecol filterable="false" hidden="false" id="XYZ1" mxevent="toggleselectrow" sortable="false" type="event"/>
<tablecol filterable="false" id="XYZ2" mxevent="toggledetailstate" mxevent_desc="Show Detail" sortable="false" type="event"/>
<tablecol dataattribute="field1" id="col_field1" linkedcontrolid="link_grid_1"/>
<tablecol dataattribute="field2" id="col_field2" linkedcontrolid="link_grid_2"/>
<tablecol dataattribute="field3" id="col_field3" linkedcontrolid="link_grid_3"/>
<tablecol...>
</tablebody>

<tabledetails id="showknownerror_tabtable_details">
<section id="showknownerror_tabtable_details_1" label="Details">
<sectionrow id="showknownerror_grid2_r1">
<sectioncol id="showknownerror_grid2_c1">
<section id="showknownerror_grid2a">
<textbox dataattribute="field1" id="link_grid_1" sizeintable="5"/>
<textbox dataattribute="field2" id="link_grid_2" sizeintable="5"/>
<textbox dataattribute="field3" id="link_grid_3" sizeintable="5"/>
<textbox...>
</section>
</sectioncol>
</sectionrow>
</section>
</tabledetails>
</table>

########################################################################################################

[{"Business Unit":{"code":"BU005","label":"IoT"}, "Product":{"code":"SSLKT6","label":"Maximo Asset Management"},"Component":"","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"","Edition":""}]

UID

ibm11112205