Tutorial: Declaratively render UTF menu model using various ADF Faces components.

Screen shots

Trailer video of end product

Deployed example


The idea for this tutorial started with a UI requirement for our system to provide navigation flexibility at runtime to various modules. Also our clinical business analysts wanted a “Site map” option to offer a global view for all our UTF pages. The solution is to simply use the XML menu model generated by JDeveloper to provide runtime rendering of the menu and the site map without repeating the underlying model code.

Below is the tutorial video:

Also check out this nice tutorial on building dynamic menus using Navigation Panes

Beyond this demo, you should be able to incorporate this component into a UI template or even a declarative component to fully leverage reuse within your application. Note that after generating and modifying the xml menu model, JDev does not know how to sync additional changes to your UTFs and you will need to update the menu model separately. Happy coding!

Update 4/10/2014
There were some questions regarding the PanelAccordion implementation and how to keep the tabs disclosed after a link is clicked. A simple way to do this using EL is to define an setActionListener component to the commandlink and set the ID of the parent node. Then perform a comparison within the parent node’s “disclosed” property. See the below code for reference.

<af:panelAccordion id="pa1">
<af:forEach items="#{root_menu.wrappedData.wrappedData}" var="root">
<af:showDetailItem text="#{root.label}" id="sdi1"
disclosed="#{root.id == processScope.currentTabId}">
<af:forEach items="#{root.children}" var="children">
<af:commandLink text="#{children.focusViewId}" id="cl1" action="#{children.doAction}"
partialSubmit="true" immediate="true">
<af:setActionListener from="#{root.id}" to="#{processScope.currentTabId}"/>

Update 11/6/2014

Some of you mentioned to me that the 12.1.3 accordion and menu components were not working as they did in 11.1.2.x. After replicating this issue and posting it to OTN, a nice user responded with the solution:


As stated in the post, the fix for the new versions of ADF is to bind the ID attribute to the menu model node IDs.


About wesfang

www.linkedin.com/in/wesfang/ https://twitter.com/wesleyfang
This entry was posted in Uncategorized. Bookmark the permalink.

7 Responses to Tutorial: Declaratively render UTF menu model using various ADF Faces components.

  1. mouaz alkanber says:

    Sorry but it does not work with me when using af:panelAccordion

    can you send the example for me please

    Email : mo3az_oracle@hotmail.com


  2. mouaz alkanber says:

    thanks for you

  3. Joseph says:

    What is #{processScope.currentTabId} ?

  4. wesfang says:

    it is a varaible which holds the id of the click source (commandLink).

    The below code is executed when the commandlink is clicked. the id of the component is stored in the processscope.
    ...af:setActionListener from="#{root.id}" to="#{processScope.currentTabId}..."

    This value is then evaluated to determine disclose state.
    disclosed="#{root.id == processScope.currentTabId}"

  5. Joseph says:

    I did the same technique, but in my PanelAccordion menu with 3 ShowDetailItems, the disclosed states still did not display correctly. It jumps to another showDetailItem that I did not click in the link in.

    What else could be the problem?


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