Setting Empty Results Messages

If you’ve toured the UI, you’ve probably noticed messages or possibly even animations in the search containers when no results are found.

Figure 1: This is a still frame from the Web Content portlet's empty results animation.

You can configure your apps to use empty results messages and animations too, thanks to the liferay-frontend:empty-results-message tag.

Follow these steps:

1. Add the liferay-frontend taglib declaration into your portlet’s init.jsp:

   <%@ taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %>
   

2. Add an empty-result-message tag to your portlet’s view:

   <liferay-frontend:empty-result-message />
   

3. Configure the tag’s attributes to define your search container’s empty results message, with or without an animation or image. The attributes are described in the table below:

   Attribute	Description
   actionDropdownItems	Specifies the action or actions to display for the empty results in either a dropdown menu, a link, or a button, depending on the number of available actions.
   animationType	The CSS class for the animation. Four values are available by default with these CSS classes: EmptyResultMessageKeys.AnimationType.EMPTY (taglib-empty-state), EmptyResultMessageKeys.AnimationType.SEARCH (taglib-search-state), EmptyResultMessageKeys.AnimationType.SUCCESS (taglib-success-state), and EmptyResultMessageKeys.AnimationType.NONE. You can also specify a custom CSS class if you prefer.
   componentId	Specifies the ID for the actionDropdownItems component (dropdown menu, link, or button)
   description	The descriptive text to display beneath the main message.
   elementType	The type of element to replace the x parameter in the main message’s language key no-x-yet.

   An example configuration is shown below:

   <liferay-frontend:empty-result-message
       actionDropdownItems="<%= (availableSegmentsEntries.size() > 0) ? 
       editAssetListDisplayContext.getAssetListEntryVariationActionDropdownItems() : null %>"
       animationType="<%= EmptyResultMessageKeys.AnimationType.NONE %>"
       componentId='<%= renderResponse.getNamespace() + "emptyResultMessageComponent" %>'
       description='<%= LanguageUtil.get(request, "no-personalized-variations-were-found") %>'
       elementType='<%= LanguageUtil.get(request, "personalized-variations") %>'
   />
   

   Note: You can replace the available default animations with your own by overriding the taglib-empty-state, taglib-search-state, and taglib-success-state CSS classes provided by _empty_result_message.scss, or by replacing the existing animations in the @theme_image_path@/states/ folder. Alternatively, you can also provide a new CSS class that defines the animation and use it for the animationType attribute’s value.

empty_state.gif:

Figure 2: If you can use the add button to add entities to the app, use the empty state animation.

search_state.gif:

Figure 3: If you can use the add button to add entities to the app, use the search state animation.

success_state.gif:

Figure 4: If you can use the add button to add entities to the app, use the success state animation.

Note: Empty results messages can also contain static images if you prefer. Just use a valid image type instead. All animations must be of type GIF though.

Great! Now you know how to configure your app to display an empty results message.

Related Topics

• Using the Liferay Front-End Taglib
• Applying the Add Button Pattern