DB driven vertical menu structure in tree format

Using Jdeveloper 11.1.1.2Many times the requirement is to create the vertical menu in tree structure, which should be dynamic. Something similar to what its there at http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx?gallery=true. In this example I am explaining how we can achieve the three level menu structure which will be DB driven. You can easily modify the code to achieve the four or five level menu structure. But I feel more level will just confuse the user .

Sample application is here

Created the following table to achieve the same:-

Step 1)I have created a read only View object based on above table and then created the view criteria based on the above view object for column parent menu id not null. This view criteria will help to select the root node of the tree.

Step 2)And also create a view link based on the above view object

Step 3) Add the above created view object in the application module.

Step 4) Now create your JSPx page based on the out of box provided page template “Oracle three Column layout”.

And shift “menu name” from available list and shift it to the display attributes. And click on the add sign to add the new tree level rule. This action will help to display the child nodes of the menu tree.

Step 5) Go to your jspx page source and comment out the created af:tree.

Step 6) Add following code below the above commented code:-

<af:panelAccordion id="acc" discloseMany="false" discloseNone="false"> <af:forEach items="#{bindings.HorizontalMenuVO1.children}" var="MenuLevel1"> <af:showDetailItem text="#{MenuLevel1.MenuName}" id="sdi1"> <af:forEach items="#{MenuLevel1.children}" var="MenuLevel2"> <af:showDetailHeader text="#{MenuLevel2.MenuName}" id="sdi2" size="4" type="stretch">

<af:panelList id="pl1" > <af:forEach items="#{MenuLevel2.children}" var="MenuLevel3"> <af:commandLink id="cl1" text="#{MenuLevel3.MenuName}"> </af:commandLink> </af:forEach> </af:panelList> </af:showDetailHeader > </af:forEach> </af:showDetailItem> </af:forEach> </af:panelAccordion>

Volla, you are done with your custom menu.