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 Portal CE 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"
           <portlet:param name="redirect" value="<%= currentURL %>" />

           displayViews='<%= new String[] {"descriptive", "icon",
           "list"} %>'
           portletURL="<%= changeDisplayStyleURL %>"
           selectedDisplayStyle="<%= trashDisplayContext.getDisplayStyle()

           navigationKeys='<%= new String[] {"all"} %>'
           portletURL="<%= trashDisplayContext.getPortletURL() %>"

           orderByCol="<%= trashDisplayContext.getOrderByCol() %>"
           orderByType="<%= trashDisplayContext.getOrderByType() %>"
           orderColumns='<%= new String[] {"removed-date"} %>'
           portletURL="<%= trashDisplayContext.getPortletURL() %>"

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

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


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

Implementing the Management Bar Display Styles

The Management Bar offers a few display styles for your app’s search container contents: descriptive, icon, and list. These views are standard in Liferay Portal’s control panel apps. While you are...

Read More

Implementing a Management Bar Navigation Filter

Navigation filters are used to create navigation menus in the Management Bar. You can add as many navigation filters to the Management Bar as your app requires. You can learn how to configure the...

Read More

Implementing a Management Bar Sort Filter

The Management Bar Sort Filters let you compare entries for a search container field, and sort them by ascending or descending. To do this, you must create a comparator class for each field that...

Read More

Disabling the Management Bar

When there’s no content in the app, you should disable all the Management Bar’s buttons, except the info button. You can disable the Management Bar by adding the disabled attribute to the...

Read More
0 (0 Votes)
Using Lexicon Icons in Your App Previous