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 DXP’s control panel apps. While you are not required to implement all these display styles in your app’s management bar, they provide some additional control over how your app’s information is displayed.
Figure 1: The `management-bar-display-buttons` tag contains the content's display options.
To provide these views in your app, you must make some updates to your search result columns. Follow the patterns covered in this tutorial to configure your app.
Note: You are not required to implement all the display views in your app.
You must just at least have one display style implemented (list
is the default).
Views that are disabled in your app will render as greyed out buttons.
Start by configuring the Management Bar Display Buttons tag next.
Configuring the Management Bar Display Buttons Tag
Follow these steps to configure the management bar display button tags:
-
Add the
<liferay-frontend:management-bar>
taglib to your app’s main view (view.jsp
for example). If the management bar has a checkbox that needs to stay selected while the navigation is used, you can optionally provide a search container ID with thesearchContainerId
attribute and set theincludeCheckBox
attribute totrue
. -
Add the management bar buttons using the
<liferay-frontend:management-bar-buttons>
and<liferay-frontend:management-bar-display-buttons>
tags. The<liferay-frontend:management-bar-display-buttons>
tag requires three attributes:displayViews
, the display style views that are available;portletURL
, the URL to redirect to after an option is chosen; andselectedDisplayStyle
, the view to display. Below is an example configuration that implements all three display views:<liferay-frontend:management-bar> <liferay-frontend:management-bar-buttons> <liferay-frontend:management-bar-display-buttons displayViews='<%= new String[] {"icon", "descriptive", "list"} %>' portletURL="<%= myViewURL %>" selectedDisplayStyle="<%= displayStyle %>" /> </liferay-frontend:management-bar-buttons> </liferay-frontend:management-bar>
Your taglibs are configured for your display styles, but at the moment they don’t do anything. You’ll configure the views next.
Configuring the Display Views
Note that your management bar may not contain all three views. You only need to
implement the views that you defined in your
<liferay-frontend:management-bar-display-buttons>
tag’s displayViews
attribute. Follow these steps to set the display views for the management bar:
-
Define a default display style. For example, the configuration below sets the default display style to list:
<% String displayStyle = ParamUtil.getString(request, "displayStyle", "list"); %>
-
Wrap each display style configuration with the proper check:
<c:choose> <c:when test='<%= Objects.equals(displayStyle, "icon") %>'> <%-- icon display style configuration goes here --%> </c:when> ... <c:when test='<%= Objects.equals(displayStyle, "descriptive") %>'> <%-- descriptive display style configuration goes here --%> </c:when> ... <c:when test='<%= Objects.equals(displayStyle, "list") %>'> <%-- list display style configuration goes here --%> </c:when> </c:choose>
Use cards to display the information. Use a vertical card to display assets like files or web content. Use horizontal cards to display folders or directories. You can add the display style configurations for each view next.
Implementing the Icon View
The icon view prominently displays an icon for the content, along with its name, status, and a condensed description.
Figure 2: The Management Bar's icon display view gives a quick summary of the content's description and status.
Follow the steps below to create your icon view:
-
First, make your icon view responsive to different devices.
For vertical cards use the following pattern:
<% row.setCssClass("col-md-2 col-sm-4 col-xs-6"); %>
For horizontal cards use the following pattern:
<% row.setCssClass("col-md-3 col-sm-4 col-xs-12"); %>
-
Once your cards are responsive, you must add search container column text using the pattern below:
<liferay-ui:search-container-column-text> <%-- include your vertical card or horizontal card here --%> </liferay-ui:search-container-column-text>
-
Add the card to the
<liferay-ui:search-container-column-text>
:Use one of the following tags for your vertical card:
<liferay-frontend:vertical-card/> <liferay-frontend:user-vertical-card/> <liferay-frontend:icon-vertical-card/>
Below is an example from the
com.liferay.journal.web
module’sview_comments.jsp
:<liferay-ui:search-container-column-text> <liferay-frontend:vertical-card cssClass="entry-display-style" imageUrl="<%= (userDisplay != null) ? userDisplay.getPortraitURL(themeDisplay) : UserConstants.getPortraitURL(themeDisplay.getPathImage(), true, 0, null) %>" resultRow="<%= row %>" > <liferay-frontend:vertical-card-header> <liferay-ui:message arguments="<%= new String[] {LanguageUtil.getTimeDescription(locale, System.currentTimeMillis() - mbMessage.getModifiedDate().getTime(), true), HtmlUtil.escape(mbMessage.getUserName())} %>" key="x-ago-by-x" translateArguments="<%= false %>" /> </liferay-frontend:vertical-card-header> <liferay-frontend:vertical-card-footer> <%= HtmlUtil.extractText(content) %> </liferay-frontend:vertical-card-footer> </liferay-frontend:vertical-card> </liferay-ui:search-container-column-text>
For horizontal cards you can use the tag below:
<liferay-frontend:horizontal-card/>
Now that your icon view is configured, you can move onto your descriptive view next.
Implementing the Descriptive View
The descriptive view displays the complete description, along with a small icon for the content, and its name.
Figure 3: The Management Bar's descriptive display view gives the content's full description.
Your descriptive view should have three columns.
-
The first column usually contains an icon, image, or user portrait:
For an icon use the following tag:
<liferay-ui:search-container-column-icon/>
For an image use the following tag:
<liferay-ui:search-container-column-image/>
For a user portrait use the following pattern:
<liferay-ui:search-container-column-text> <liferay-ui:user-portrait/> </liferay-ui:search-container-column-text>
-
The second column should contain the descriptions. For example, the site teams application is configured with the settings below:
<liferay-ui:search-container-column-text colspan="<%=2%>" > <h5><%= userGroup.getName() %></h5> <h6 class="text-default"> <span><%= userGroup.getDescription() %></span> </h6> <h6 class="text-default"> <span><liferay-ui:message arguments="<%= usersCount%>" key="x-users" /></span> </h6> </liferay-ui:search-container-column-text>
-
Finally, the third column contains the actions. For example, the site teams application uses the configuration below:
<liferay-ui:search-container-column-jsp path="/edit_team_assignments_user_groups_action.jsp" />
Now that your descriptive view is configured you can implement your list view next.
Implementing the List View
The list view is the default view that is shown for most applications. This view lists the content’s information in individual columns.
Figure 4: The Management Bar's list display view list the content's information in individual columns.
For example, the mobile device rules application configures its list view using the pattern below:
<liferay-ui:search-container-column-text
cssClass="content-column name-column title-column"
name="name"
truncate="<%= true %>"
value="<%= rule.getName(locale) %>"
/>
<liferay-ui:search-container-column-text
cssClass="content-column description-column"
name="description"
truncate="<%= true %>"
value="<%= rule.getDescription(locale) %>"
/>
<liferay-ui:search-container-column-date
cssClass="create-date-column text-column"
name="create-date"
property="createDate"
/>
<liferay-ui:search-container-column-text
cssClass="text-column type-column"
name="type"
translate="<%= true %>"
value="<%= rule.getType() %>"
/>
<liferay-ui:search-container-column-jsp
cssClass="entry-action-column"
path="/rule_actions.jsp"
/>
Finally, set the display style in your liferay-ui:search-iterator
tag with the
displayStyle
attribute:
<liferay-ui:search-iterator
displayStyle="<%= displayStyle %>"
markupView="lexicon"
searchContainer="<%= searchContainer %>"
/>
The displayStyle
attribute is set to the displayStyle
var which is set by
the management bar display style buttons.
Your display views are configured!