UI Elements Messaging Message Page

Updated: March 17, 2021
SAPUI5 Version 1.42

Message Page

sap.m.MessagePage

Intro

Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases in which a message page can be shown. The layout is the same, but the text and icon can change depending on the use case. You can use the message page in the following situations:

  • Filtering with no results
  • Searching with no results
  • Empty app
  • Too many items
  • Item saved as tile that is not longer available
  • Error

Responsiveness

The size of the message page is adjusted to the amount of space available.

Size S (Smartphone)

Filtered with no results on smartphone
Filtered with no results on smartphone

Size M (Tablet)

Message page with contextual filter on tablet
Message page with contextual filter on tablet

Size L (Desktop)

Message page with contextual filter on desktop
Message page with contextual filter on desktop

Types

The layout of the message page always behaves the same. The only differences are the texts and the icon, which change depending on the use case and the user’s location in the app. The different types are described below.

Filter

The user has set a filter and there are no results:
  • Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
  • The details page or full screen shows the item selected last.
A contextual filter is set by starting the app and there are no results:
  • Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
  • Display the following text on the details page or full screen: No matching <entity> found. Check the filter settings. For example: “No matching items found. Check the filter settings.”
  • Show the filter icon.
No matching items found with set contextual filter
No matching items found with set contextual filter
No matching items found, but still showing the item selected last in the detail area
No matching items found, but still showing the item selected last in the detail area

Search

The user has searched for something but there are no results (also for search and filter at the same time):
  • Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
  • The details page or full screen shows the item selected last.
There are no items but the user performed a search anyway:
  • Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
  • The details page or full screen shows the last empty page use case.
Searching in an empty list
Searching in an empty list
Showing the item selected last in the details area after an unsuccessful search
Showing the item selected last in the details area after an unsuccessful search

No Items

The app contains no items:
  • Display the following text in the master list or on the details page or full screen: No <entities> are currently available. For example: “No items are currently available.” Show the product icon or an icon that matches your use case.
No products can be shown
No products can be shown

Too Many Items

In this case, there are too many items in the master list. The user has to perform a search to see results:
  • Display the following text in the master list or on the details page or full screen: Search for <business object (plural)>. For example: “Search for opportunities.” Show the search icon.

Loading

 The app is loading (open, filter, sort…):
  • Display the busy state in the master list. Use the busy state without any explanatory text, such as “Loading”.
  • The details page or full screen show the item that was selected last.

Save as Tile

The item saved by the user is no longer available:
  • No item is selected in the master list.
  • Display the following text on the details page or full screen and specify the entity. Where relevant, you can also include the ID: This <entity> is no longer available. or <Entity> <ID> is no longer available. Examples: “This product is no longer available.” or “Purchase order 123456 is no longer available.” Show the product icon or an icon that matches your use case.

Error

The app cannot show any content due to an error:
  • Display the following text in the master list: Sorry, we can’t find this page.
  • If you can provide a link to the app start screen, display the following text on the details page or full screen: Sorry, we can’t find this page. <Link to app start page>. Show the document icon.
No products can be shown – With link
No products can be shown – With link
  • Otherwise, display the following text on the details page or full screen: Sorry, we can’t find this page. Please check the URL you are using to call the app. Show the document icon.
No products can be shown
No products can be shown

Components

The following UI elements can be placed on the message page:

  • Icon
  • Text or link

Guidelines

Different texts are displayed in different use cases. In general, follow these guidelines:
  • Replace <business object (plural)> with the business object in the plural form and in lowercase.
  • Sometimes your app will simply be loading. In that case, use the busy state without any explanatory text. Do not show the message No Data because this could be misleading.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation