Hierarchy Viewer and Tree Table Sample

A hierarchy viewer component can be used to visually display hierarchical data. Hierarchical data contains master-detail relationships within the data. For example, you could create a hierarchy viewer component that renders an organization chart from a data collection that contains information about the relationships between employees in an organization.

Created a simple Data Model for Employee and Manager relationship.

Create a view link between Manager and Employee with cardinality 0..1 to * (one to many).

To display the Hierarchy viewer we need to identify the root node. if you miss this step hierarchy viewer will display the multiple root nodes.

To avoid multiple root nodes, i am creating the view criteria with the condition managerid is NULL.

Then we need add this view criteria only for the root node (Otherwise hierarchy view will only render with one node).

(Select on the EmployeeVO under Data Model section -> Edit)

Move the findEmployeeRoot view criteria.

Now we are ready with out model project. go to the Data Controls section and refresh it.

Hierarchy Viewer:

Drag the EmployeeVO data control to the page and select Hierarchy viewer from the list.

Then create you Hierarchy viewer node. We can select what all data to be displayed in the selected zoom level.

It will create a list binding in the bindings file. (Both the Hierarchy view and Tree table will use the same  list bindings).

we are done with UI. Sample screen shots.

Tree Table:

To create the tree table we need the same Data model. when we drag and drop the data model to page we need to select the Tree Table.

Jdeveloper by default will display only one column in the Table. so we need to add the columns.

(Sample Code)

UI screen shots.

You can download the sample app.