Wednesday, November 10, 2010

ADF UI - Creating dropdown or menu buttons

Creating dropdown or menu buttons using ADF is easy. A dropdown menu button is the button with a dropdown icon which will display list of menu items on clicking the button or dropdown icon. Just go through the below steps to create a menu button.

1. Add a af:commandButton or af:toolbarButton where you need to dropdown button. Now, in the 'popup' facet, drag and drop af:menu and add af:menu item(i.e., af:commandMenuItem)s to the af:menu. Sample code below:
<af:commandToolbarButton text="Options" id="commandToolbarButton1" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1" actionDelivery="none"> <f:facet name="popup"> <af:menu id="m1"> <af:commandMenuItem text="View" id="cmi1" action="view"/> <af:commandMenuItem text="Edit" id="cmi2" action="edit"/> <af:commandMenuItem text="Delete" id="cmi3" actionListener="#{bindings.Delete.execute}" partialTriggers="t1"/> </af:menu> </f:facet> </af:commandToolbarButton>

The above code in Structure window will look like this:

2. The above code will render the menu button as shown below:

3. There are two types of menu buttons:
i. Which will display dropdown list or menu items on clicking the 'dropdown' icon. This button will have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. This is actually the default behavior. You can specify action and actionListener for this button and on clicking the button it'll cause navigation or fire actionListener based on the specified action and actionListener respectively.

ii. Which will display drowdown list on clicking the button itself. This button won't have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. To get this behavior, you need to set actionDelivery="none" for the button. If you set this property, you can't specify either action or actionListener for the button as it won't fire either action or actionListener.

That's it. You can specify action and actionListener for the menu items in the dropdown menu and do whatever you want.


  1. Just a quick remark for skinning this button.
    When not hovering the text itself but the button around it, the text doesn't go into 'hover' state. To fix this just use:
    af|commandToolbarButton:hover af|commandToolbarButton::text,
    //Your style info

    1. Where are we supposed to change it? In css file?

  2. Great tutorial on Dropdown menus, thanks! We just finished an updated step by step tutorial on creating dynamic navigation panes using a menu model - you can check it out here -

  3. First time actionlistener of menu item isn't calling

  4. This example is just good for nothing. Why we need this approach when we already have menu bar, menu item and we can easily have action for menu items.


  5. I have read your blog and I gathered some needful information from your blog. Keep update your blog. Awaiting for your next update.
    Ms excel training in chennai


Related Posts with Thumbnails