Create ADF Tree Table

In ADF, Table Tree is a visual representation of hierarchical data. It displays the hierarchical data in a tree shaped format. The following are some examples of hierarchical data, Manager & Employee, Region & Country, Parent & children. In this section, I have created a tree using Region and Country tables in HR schema. The final layout is like below



>>>The USA





IDE Used: JDeveloper 12.2.1

Database Schema Used: HR (Bundles with Oracle database)

Tables Used: Region and Country


1. Create an ADF Application: Open JDeveloper >> Click File >> New >> Application >> Select ADF Fusion Web Application >> Click Ok >> Input Name >> Click Finish

062316_0409_CreateADFTr1 Create ADF Tree Table

2. Create entity and view object for Region and Country table. JDeveloper creates association and link for those tables. If you have any doubt on creating entity and view objects, click on the link and follow the steps from 8 to 20 for the instruction.

3. Create a JSF page under WEBCONTENT, Name it as index.jsf

4. Open the index.jsf file >> Drag the RegionView into the page >> In the pop-up, Navigate to Tree and select ADF Tree Table

062316_0409_CreateADFTr2 Create ADF Tree Table

5. In the Edit Binding Window,Select the rrot node, that is Region view, move the column RegionName from Available Attributes to the display attribute


062316_0409_CreateADFTr3 Create ADF Tree Table

6. Now add the child to the root node by Clicking on the plus icon and select the COUNTRY. The country view gets added  under Region view

062316_0409_CreateADFTr4 Create ADF Tree Table

7. Select the child node, Move the CountryName to the display area and click Ok

062316_0409_CreateADFTr5 Create ADF Tree Table

8. If you want to add more columns for the Tree-table, Go the structure tab, Right click on the Tree-table and Select Column

062316_0409_CreateADFTr6 Create ADF Tree Table

9. A column gets added into the TableTree, Insert an output text and change the value to #{node.CountryName} and change the nosestamp output-text value to #{node.RegionName} The final table tree code is similar as below

Points to remember:

A) af:treetable element has a NodeStamp element . The ‘Region’ table columns are available in this element (See Step5)

B) Var attribute should be mentioned in the af:treetable element. This case, it is node 

C) af:Column element can access the Country table columns, ( see Step7)


Deploy and Run the Application

Right click on the index.jsf and click Run.( If it is the first time you are running, JDeveloper prompts for the WebLogic configuration, input the details and click run )

The application gets deployed and opens on the browser

062316_0409_CreateADFTr7 Create ADF Tree Table

govindan Create ADF Tree Table
Connect me


Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply šŸ™‚
govindan Create ADF Tree Table
Connect me
By | 2016-12-28T17:19:17+00:00 June 22nd, 2016|Categories: ADF|Tags: , , , |Comments Off on Create ADF Tree Table
Like us on Facebook.