UI Elements Messaging Message Page

Updated: March 17, 2021
SAPUI5 Version 1.74

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 for showing a message page. 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 a tile that is not longer available
  • Error

Responsiveness

The size of the message page adjusts to fit the available space.

Size S (Smartphone)

Search with no results on a smartphone
Search with no results on a smartphone

Size M (Tablet)

Search with no results on a tablet
Search with no results on a tablet

Size L (Desktop)

Search with no results on a desktop device
Search with no results on a desktop device

Types

The layout of the message page is always the same. Only the texts and the icon 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: No matching [entities] found. Check the filter settings. For example: “No matching items found. Check the filter settings.”
  • Show the filter icon.
No matching items found
No matching items found
The user has searched for something but there are no results:
  • Display the following text: No matching [entities] found. For example: “No matching items found.”
  • Show the search icon.
Search with no results
Search with no results

No Items

The app contains no items:
  • Display the following text: 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

If there are too many items, the user has to perform a search to see results:
  • Display the following text: Search for [entities]. For example: “Search for opportunities.”
  • Show the search icon.

Loading

 The app is loading:
  • Display the busy state without any explanatory text, such as “Loading”.

Save as Tile

The item saved by the user is no longer available:
  • Display the following text on the page 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: “Sorry, we can’t find this page.”
  • Provide a link to the app start screen if you can.
  • Show the document icon.
Error case – With link
Error case – With link
  • Otherwise, display the following text: “Sorry, we can’t find this page. Please check the URL you are using to call the app.”
  • Show the document icon.
Error case
Error case

Formatted Text and Buttons

You can apply formatting to the text on the message page (such as bold, italic, underline, and bullet points), and add buttons. Do not place more than 2 buttons on a page.

Message page with formatted text and buttons
Message page with formatted text and buttons

Components

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

  • Icon
  • Text
  • Formatted text
  • Link
  • Button

Guidelines

  • The icon in the message page is mandatory.
    Exception: If you can’t find a suitable icon for your message, leave out the icon.
  • Always include a message short text, and add a description with further details if needed. Do not show only the state of the message (like error or warning), but rather try to describe the problem. Help the user to recognize, diagnose, and resolve the issue.
  • Keep your message as concise as possible.
Different texts are displayed for different use cases. In general, follow these guidelines:
  • Use the plural forms of the business objects. Ensure that the business objects are in sentence case.
  • Sometimes, your app will simply be loading. In this case, use the busy state without an explanatory text. Do not show the “No data”  message, which could mislead users.

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