Updated: January 18, 2022

SAPUI5 Version 1.104

Message Page

sap.m.MessagePage

Intro

The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message page explains what information would normally appear on the page and how the user can proceed.

When To Use

Use the message page if:

You need to give feedback on an empty state at page level. You can use the message page in the following situations:

Searching and/or filtering with no results
Empty app
Too many items (search or filtering required)
Item saved as a tile that is no longer available
Error

Do not use the message page if:

You want to give feedback on empty states within UI elements, such as dialogs or tables. Use an illustrated message instead.
The app is simply loading. In this case, use the busy state without an explanatory text.

Components

The message page follows the general message pattern for empty states. It contains an icon, a message headline, a message description, and an optional call to action.

(1) Icon

The icon in the message page is mandatory.
Exception: If you can’t find a suitable icon for your message, leave out the icon.

(2) Message Headline

The headline explains the reason for the empty state, preferably in a single line. Use the headline to convey the essence of your message in simple, engaging language.

Write the headline in sentence case without an ending period (.)

(3) Message Description

The description adds details and tells the user what to do next, in three sentences or less. Write the description in sentence case with proper punctuation. You can also set links in the description and use formatted text (such as bold, italic, underline, and bullet points).

(4) Call to Action (Optional)

If there is a clear next step, include a button or buttons with appropriate actions. Do not place more than 2 buttons on a page.

Responsiveness

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

Size S (Smartphone)

Search with no results on a smartphone

Size M (Tablet)

Search with no results on a tablet

Size L (Desktop)

Search with no results on a desktop device

Examples

The following examples show some typical message page use cases and how messages can be formatted.

Search

The user has searched for something but there are no results:

Icon: Search
Message headline: No matching items found
Message description: Try changing your search criteria.

Search with no results

No Items

The app contains no items (here: suppliers).

Icon: Product icon, or an icon that matches your use case.
Message headline: There are no suppliers yet
Message description: When there are, you’ll see them here.

No products can be shown

Error

The app cannot show any content due to an error:

Icon: Document
Message headline: Sorry, we can’t find this page
Message description: Please check the URL you are using to call the app.

Error case – With link

Formatted Text and Buttons

Message page with buttons

Message page with formatted text

Top Tips

Always include an icon, a message headline and a description with further details.
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.
Do not show the No data message, which could mislead users.