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 :) !