Tuesday, November 2, 2010

ADF UI - Placing separator (vertical line '|') between toolbar buttons (in other words grouping toolbar buttons)

This post is to show how to include separator (vertical line '|') between group of toolbar buttons. You might think that we need to place a vertical line image or something between the toolbar buttons, but that's not true. We just need to group the buttons and ADF will render the separator between each group of buttons automatically. It's very simple.

For example we have buttons 'Create', 'View', 'Edit', 'Delete' and 'Export to Excel' without grouping, the buttons will like as shown below in the UI.


To get the separator between the groups of buttons, just select the toolbar buttons which you want to group and surround the button group with af:group. That's it! Here, I want separators between between buttons as shown below:


To achieve that, I've reordered the buttons in <af:group>s as shown below:


Here is the code:
<af:toolbar id="t2"> <af:group id="g1"> <af:commandToolbarButton text="Create" id="ctb1" partialTriggers="t1"/> </af:group> <af:group id="g2"> <af:commandToolbarButton text="View" id="ctb2" action="viewRecord" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1"/> <af:commandToolbarButton text="Edit" id="ctb3" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1"/> </af:group> <af:group id="g3"> <af:commandToolbarButton text="Delete" id="commandToolbarButton1" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1"/> </af:group> <af:group id="g4"> <af:commandToolbarButton text="Export to Excel" id="commandToolbarButton2" disabled="#{bindings.EmpDeptVO.currentRow==null}" partialTriggers="t1"> <af:exportCollectionActionListener type="excelHTML" exportedId="t1" filename="SearchResults.xls" title="Search Results"/> </af:commandToolbarButton> </af:group> </af:toolbar>

Enjoy :) !

8 comments:

  1. Very Nice Post... Looking for the same ... Thanks a lot!

    ReplyDelete
  2. Thanks for pointing me in the right direction to get rid of the damnable separator:-)

    ReplyDelete
    Replies
    1. @^ How do we get rid of the separator?

      I had several features to remove from the table, and i removed them using featuresOff property. Now, stale-purposeless separator appears. Any ideas on how to remove it?

      Delete
  3. Proved to be time saving for me.
    Thanks a lot!

    ReplyDelete
  4. How do we get rid of the separator?

    I had several features to remove from the table, and i removed them using featuresOff property. Now, stale-purposeless separator appears. Any ideas on how to remove it?

    ReplyDelete
  5. I need to customize the rendering of separator in af:group.
    Any ideas on how to customize the rendering of separator in af:group component in ADF 11.1.2.4?

    ReplyDelete

Related Posts with Thumbnails