Adding a data tree

The data tree allows you to display hierarchical data, such as an organization chart. In an organization chart, each department would be a node. The user can expand and collapse the nodes to view different parts of the organization.
Note: Data Tree <odc:tree> and Chart <odc:graphDraw> have been enabled to use Server Data.

Use the following steps to put a data tree on a JSP page.

  1. In the Web perspective, open your JSP page and the Enhanced Faces Components drawer from the palette.
  2. Drag the Data Tree control onto the JSP page.
  3. From the Page Data view, select and drag the property that will be the root of the tree onto the Data Tree component. This step binds the page data to the Data Tree.
  4. Select the Data Tree component on the JSP page.
  5. Go to the Properties view to set the attributes.
  6. On the Tree Node List tab, select the nodes to display from the client data and which attributes to display on each node. For example, the department name or the manager of the department.
  7. Save and run the JSP page on a test server when you have finished
Example of a tree bound to page data code:
<odc:tree enableSelect="false" rootVisibleFlag="true" id="tree1" styleClass="tree" value="#{pc_Tf.root}">
     <odc:treeNodeAttr attributeName="name" className="com.ibm.odcb.tutorial.businessobjects.Root"
        id="treenodeattr1" referenceName="users">
     </odc:treeNodeAttr>
     <odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.User"
        id="treenodeattr2" attributeName="lastName" referenceName="portfolios">
     </odc:treeNodeAttr>
     <odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.Portfolio"
        id="treenodeattr3" attributeName="portfolioName" referenceName="positions">
     </odc:treeNodeAttr>
     <odc:treeNodeAttr className="com.ibm.odcb.tutorial.businessobjects.Position"
        id="treenodeattr4" attributeName="quantity">
     </odc:treeNodeAttr>
</odc:tree>
Related tasks
Adding a data grid
Adding a chart
Adding a Web service
Updating Faces Client components
Deleting Faces Client components

Feedback