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 portlets empty results animation.

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:

    AttributeDescription
    actionDropdownItemsSpecifies 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.
    animationTypeThe 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.
    componentIdSpecifies the ID for the actionDropdownItems component (dropdown menu, link, or button)
    descriptionThe descriptive text to display beneath the main message.
    elementTypeThe 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") %>'
    />
    

empty_state.gif:

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

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.

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.

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

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

« Configuring Your Admin App's Actions MenuIntroduction to Search »
Was this article helpful?
0 out of 0 found this helpful