Good looking, user friendly and easy to implement. These are the three most attractive characteristics of the hierarchy viewer component.

In the following demo you can see step by step instructions and screen shots demonstrating how to create and link the model objects, as well as how to create the jsf components and bindings.

In this use case I used the Departments and Employees tables from HR schema to create a 3-level hierarchy. In the first level nodes we have “departments”. Expanding the “departments” we see the second level nodes “managers” that correspond to the managers of each department. On the third level, expanding a “Manager” node we get the “Employees” nodes of each manager.

The Model:

We need to create three view objects. One for “Departments”, one for “Managers” and one for “Employees”. “Managers” and “Employees” are based on the same Entity object (or query if you prefare). Additionally two view links need to be created. “FromDepartmentsToManagersLink” and “FromManagersToEmployeesLink”. The links created as shown bellow:

In the applicationModule we create the following structure:

Now we are ready to create the JSF and add the component:

After creating the page we drag and drop the “departments” data control from the data controls panel.

On the menu that appears select hierarchyViewer. The wizard window opens and at first we choose some initial style settings (they can be changed later) and click ok.

After clicking OK, the second page of the wizard opens were we select the bindings to be used and the attributes to be displayed in each node. We select the three view objects we created and select the attributes we want to be visible in the node attributes table.

After finishing the wizard, all necessary code and bindings are created automatically. The <dvt:hierarchyViewer /> tag is added in the jsf and a tree binding for departments with three node definitions is added in the page definition (you can check the generated code with the sample application you can download at the end of the post).

In this sample application I also added a popup functionality were the user can select a “departments” node and view/edit more details of the specific department. This code can also be found in the sample application code in the jsf page.

Here you can see a short demo video i created:

You can also download the sample application here.

I found this component to be very useful especially now that the trend in software development is to provide high quality look and feel in all applications.

There are still a few tweaks that need to be made on this component to give it more flexibility in development. For example at this point there are several components that you cannot add inside the hierarchyviewer tag, like toolbarButtons and some types of listeners. I hope that this component will evolve and improve in future releases and that more ajax components will be added in jdeveloper.

More documentation from oracle can be found here

More details about the hierarchy viewer component can be found in these very good blogs:

Shay Shmeltzer’s WeblogAMIS Technology Blog


This entry was posted on Sunday, October 17th, 2010 at 11:03 am and is filed under ADF. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
4 Comments so far

  1. Latarsha Bolder on October 4, 2010 1:58 am

    Wonderful article, it thought me alot, thank you!

  2. admin on October 4, 2010 6:45 am

    Thank you for your comment.
    I wil be following up soon with a new post on the Carousel component

  3. siva on October 12, 2011 8:06 am

    I try to execute the application but i am able to view until managers level and from manager to employee its not showing.

    I’ve deployed the project into weblogic 10.3 and jedeveloper

    Can you please let me know where could be wrong.


  4. Gabriel on October 12, 2011 12:59 pm

    Hi Siva,

    If you used the code that I uploaded in the post then the only reason I can think of is that there is a problem with the data in your database.
    If you re-created the demo yourself then maybe there is something wrong with the viewlink between managers and employees.
    I would suggest running the application module to make sure that the data is retrieved correctly.
    If the data appear correctly in the application module then the problem must be in your bindings.

Name (required)

Email (required)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Share your wisdom