Defining a Tree Table in the View

You define a Tree Table panel in the same way as a Tree panel, by nesting tree panels to create multiple levels of the tree:

<!-- Divisions -->
<panel type="tree" controlType="table" id="dvTree" dataSource="dvDS">
     <field name="dv_id"/>
    <!-- Departments -->
     <panel type="tree" controlType="table" id="dpTree" dataSource="dpDS">
          <field name="dp_id"/>
     </panel>
</panel>

The example above displays the data like a regular tree panel. To display additional columns, add fields to a tree level:

<!-- Divisions -->
<panel type="tree" controlType="table" id="dvTree" dataSource="dvDS">
     <field name="dv_id"/>
  <!-- Departments -->
        <panel type="tree" controlType="table" id="dpTree" dataSource="dpDS">
         <field name="dp_id"/>           
         <field name="name"/>
         <field id="edit" controlType="button">
                <title>Edit</title>
         </field>
     </panel>
</panel>

Displaying a Color Legend

You can also display a color legend as another column:

• If you want to define a field that is not bound to the data source (i.e. has the id property, but no table or name properties), set the controlTyp e property to color and specify a default value .

<field id="dp.custom_color" controlType="color" value="0 70">
     <title translatable="true">Legend</title>
</field>

You can use afterGeneratingTreeNode(treeNode) to specify custom colors. (Same as modifying a traditional tree.)

• If you want the legend color to match the drawing highlight color, add the hpattern_acad field.

<!-- Divisions -->
<panel type="tree" controlType="table" id="dvTree" dataSource="dvDS">
     <field name="dv_id"/>
 <!-- Departments -->
      <panel type="tree" controlType="table" id="dpTree" dataSource="dpDS">
          <field name="dp_id"/>
          <field name="name"/>
          <field table="dp" name="hpattern_acad" controlType="color">
               <title translatable="true">Legend</title>
          </field>
          <field id="edit" controlType="button">
                <title>Edit</title>
          </field>
       </panel>
</panel>

Attaching Event Listeners to a Tree Table Panel

To handle tree node selection, attach the onClickNode event listener to the tree:

dpTree_onClickNode: function(panel, node) {
 // node is an instance of the Ab.tree.TreeTableNode class
},

You can also attach the onClickNode event listener as a global function, but this is not recommended because global function may cause conflicts between reusable parts included into the view:

<!-- Departments -->
<panel type="tree" controlType="table" id="dpTree" dataSource="dpDS">
     <field name="dp_id"/>
            <event type="onClickNode">
               <command type="callFunction" functionName="onSelectDp"/>
            </event>
</panel>

To handle specific buttons in tree nodes, attach event listeners to the buttons. Use the id attribute of the button in the event listener name:

dpTree_onEdit: function(buttonEl, panel, node) {
     // node is an instance of the Ab.tree.TreeTableNode class
},

When the user clicks on the tree node, or on any button in the tree node, the panel highlights the complete table row.

Working with Tree Table Data

The Ab.tree.TreeTableNode object provides an API that you can use to obtain data values for the selected node, or to traverse the tree structure.

You can add a custom handler to control the label text. The function name consists of panel id, an underscore (_), and afterGeneratingTreeNode :

dpTree_afterGeneratingTreeNode: function(node) {
     // node is an instance of the Ab.tree.TreeTableNode class
},

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/parts/tree/ab-ex-tree-table.axvw