Adding the Management Bar

The Management Bar controls display options for search container results. You can use it to display content in a list or a grid, or to display a specific type of content. You can also customize your app’s Management Bar.

Figure 1: The Management Bar lets the user customize how the app displays content.

The Management Bar is divided into a few key sections. Each section is grouped and configured using different taglibs:

The <liferay-frontend:management-bar-buttons> tag wraps the Management Bar’s button elements:

Figure 2: The `management-bar-buttons` tag contains the Management Bar's main buttons.

The <liferay-frontend:management-bar-sidenav-toggler-button> tag implements slide-out navigation for the info button.

The <liferay-frontend:management-bar-display-buttons> tag renders the app’s display style options:

Figure 3: The `management-bar-display-buttons` tag contains the content's display options.

The <liferay-frontend:management-bar-filters> tag wraps the app’s filtering options. This filter should be included in all control panel applications. Filtering options can include sort criteria, sort ordering, and more:

Figure 4: The `management-bar-filters` tag contains the content filtering options.

Finally, the <liferay-frontend:management-bar-action-buttons> tag wraps the actions that you can execute over selected items. In Liferay DXP 7.0, you can select multiple items between pages. The management bar keeps track of the number of selected items for you:

Figure 5: The management bar keeps track of the items selected and displays the actions to execute on them.

For example, here’s the Management Bar configuration in Liferay’s Trash app:

<liferay-frontend:management-bar includeCheckBox=“<%= true %>” searchContainerId=“trash”

   <liferay-frontend:management-bar-buttons>
       <liferay-frontend:management-bar-sidenav-toggler-button />

       <liferay-portlet:actionURL name="changeDisplayStyle"
       varImpl="changeDisplayStyleURL">
           <portlet:param name="redirect" value="<%= currentURL %>" />
       </liferay-portlet:actionURL>

       <liferay-frontend:management-bar-display-buttons
           displayViews='<%= new String[] {"descriptive", "icon",
           "list"} %>'
           portletURL="<%= changeDisplayStyleURL %>"
           selectedDisplayStyle="<%= trashDisplayContext.getDisplayStyle()
           %>"
       />
   </liferay-frontend:management-bar-buttons>

   <liferay-frontend:management-bar-filters>
       <liferay-frontend:management-bar-navigation
           navigationKeys='<%= new String[] {"all"} %>'
           portletURL="<%= trashDisplayContext.getPortletURL() %>"
       />

       <liferay-frontend:management-bar-sort
           orderByCol="<%= trashDisplayContext.getOrderByCol() %>"
           orderByType="<%= trashDisplayContext.getOrderByType() %>"
           orderColumns='<%= new String[] {"removed-date"} %>'
           portletURL="<%= trashDisplayContext.getPortletURL() %>"
       />
   </liferay-frontend:management-bar-filters>

   <liferay-frontend:management-bar-action-buttons>
       <liferay-frontend:management-bar-sidenav-toggler-button />

       <liferay-frontend:management-bar-button href="javascript:;"
       icon="trash" id="deleteSelectedEntries" label="delete" />
   </liferay-frontend:management-bar-action-buttons>

</liferay-frontend:management-bar>

In this section of tutorials, you’ll learn how to add a management bar to your application.