Home > Blogs > Showing data in hierarchical way using adf treeTable

Showing data in hierarchical way using adf treeTable

Let us start with a simple application that shows the employees under a manager in a hierarchical way using the af:treeTable component.

The page shows the employees under a manager

Schema Used: HR schema that has Employees, Departments table.

Steps to create the application:

1) Launch Jdev and select Default Role while launching.

2) Goto Application Navigator and create a new application. Select ‘Fusion Web Application (ADF)’ as the Application Template and          give any name.

3) Click on ‘Next’ button and give a name for your model project as ‘EmployeeModel’ and click on ‘Next’ button.

4) Keep the Default values in the ‘Configure Java Settings’ dialog and click on ‘Next’ button.

5) Name your ui project as ‘EmployeeViewController’ and click on ‘Next’  button and then click on ‘Finish’ button.

6) Create a Database connection in the Application Resources.

7) Create an EmployeeEO by right-clicking the model project and by selecting the BusinessTier –> ADF Business Objects –>                      ‘EntityObject’

Creating an Entity Object

8) Create the view object ‘EmployeeVO’ and the application module ‘EmployeeAM’ in the ‘Generate’ dialog and then finish. Now, the EmployeeEO , EmployeeVO and EmployeeAM will get created in the respective packages.

Creating a View Object

9) Creating the EmployeeEO will also create a SELF association viz., EmpManagerFkAssoc  for the EmployeeEO. The association    ‘EmpManagerFkAssoc’ shows the relation between two Employee entities (Every employee  will be reported to his Manager (except CEO of the company).


10) Creating the EmployeeEO will also create a view link viz., EmpManagerFkLink between instances of EmployeeVOs. The viewlink EmpManagerFkLink shows the relation between two employeeVOs.

View Link

11) Now, we will create a viewcriteria that returns only the CEO (here, the empNo 100). To create viewCriteria, open EmployeeVO and goto ‘Query’ tab. Click on the ‘ + ‘ icon in the viewCriteria secion.  Click on ‘AddItem’ button of the viewcriteria dialog and select EmployeeId in the Attribute list and put ‘100’ as the literal value.

Creating View Criteria

12) Open EmployeeAM.xml and goto ‘DataModel’ tab. Add the above viewcriteria to the ‘EmployeeVO1’ by ‘Edit’ing the ‘EmployeeVO1’.

Selecting a View Criteria

13) Run the EmployeeAM and you will see the employees data as shown below.

Running an Application Module

13) Now, we will create show the employees data in a Jspx page. Forthat, goto EmployeeViewContoller project , right click on it.

14) Select WebTier –> JSF –> JSF Page –> and give the jspx name as ‘Employee.jspx’ and click on ‘Ok’.

Creating an Jspx page

15) It creates an empty jspx page. To create the treeTable, drag the ‘EmployeeVO2’, from the DataControl ‘EmployeeAMDataControl’ that is present in ‘DataControls’ .

Drag and Drop Data Control

16) Drag the EmployeeVO2 on to the Form section of Employee.jspx as Tree –> Tree table.

Creating Tree table

17) If you want to show extra information like ‘First Name, Last Name, Manager Id, Department Id’, paste the below code in the Employee.jspx after the ‘pathStamp’ facet.

<af:column id=”c2″ headerText=”EmployeeDetails”>
<af:column id=”c3″ headerText=”First Name”>
<af:outputText value=”#{node.FirstName}” id=”ot3″/>
<af:column id=”c4″ headerText=”Last Name”>
<af:outputText value=”#{node.LastName}” id=”ot4″/>
<af:column id=”c5″ headerText=”Manager Id”>
<af:outputText value=”#{node.ManagerId}” id=”ot5″/>
<af:column id=”c6″ headerText=”Department Id”>
<af:outputText value=”#{node.DepartmentId}” id=”ot6″/>
18) Now run the Employee.jspx by right clicking on it and selecting Run. Initially, when the page renders it shows only the Employee information of 100. When you click on drag icon, it shows the employees information who are reporting to him/her.
Tree Table Rendered
Download Sample application  : AdfTreeTableSampleApplication
Categories: Blogs
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: