Illustrated Message

An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set (1)

An illustrated message has a set of four UX illustrations per use case: dot, spot, dialog, and scene. Each illustration has a different size and level of detail. The illustration sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations are generally non-interactive. They do not require a tooltip or an alternative text.

Illustration set with all four illustration sizes: dot, spot, dialog, scene

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

Message Headline (2)

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Message Description (3)

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 (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action (4)

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – Smallest size. Not enough space to display an illustration.
Dot – Size for very small containers, such as tiles, cards, and table cells.
Spot – Size for small containers, such as cards.
Dialog – Size for medium-sized containers, such as dialogs.
Scene – Size for large controls, such as tables and empty states for an entire screen.

Base size in a cell

Dot size in a small card or tile

Spot size in a card

Dialog size

Scene size in an empty page

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - Empty calendar

Empty state - File upload

Empty state - Search

Empty state - Page not found

Empty state - Error page

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and take care to use appropriate illustrations.

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
Recommended: Replace generic terms like “data” and “object” with your specific business object.
Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.

Success

When all items were processed successfully, show a message toast.

Message Toast
Text	<number of items> <item name> were <action>.

Message toast

Failure Cases

No items can be processed

When no items can be processed, disable the action button.

For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

No items were processed

When no items were processed, show a message view in a dialog.

Message View
Header	Summary
First List Item	No <item names> were <action>.
Next List Items	Specific messages for each unprocessed item.
Button	Close

Message view with errors only

Partial Processing

Backend issues

When one or more of the selected items were processed successfully and one or more were not, due to backend issues, show a message view in a dialog.

Message View
Header	Summary
First List Item	Success Message <number of successful items> of <total number of items> <item name> were <action>.
Next List Items	Specific error messages for unprocessed items Specific warning messages for processed items
Button	Close

Message view with a mix of success, error, and warnings messages

One or more items can’t be processed

Before processing, a warning message asks users whether they want to apply the action to remaining items.
After user confirmation the resulting message depends on the processing results:
- A message toast for successful processing
- A message view for when backend errors occurred during the processing

Messaging sequence for items that can't be processed

Before Processing

If the action cannot be applied to one or more items, a warning message asks the users whether they want to apply the action to the other items.

Warning Message Box
Message Text	<number of items ineligible for the action> of <total number of items> <item name> can’t be <action>. Do you still want to <action> the remaining <number of editable items> <item name>?
Message Details	*Possible Causes* Selected <item names> are excluded if: Somebody is working on the <item name> (a draft exists or changes haven’t been saved). <action> is not allowed on the <item name>.
Buttons	<Primary action>, Cancel

After User Confirmation

After the users confirm the primary action for the remaining items the resulting message depends on the processing results:

When all the remaining items were successfully processed, a message toast is displayed.
When one or more backend errors occurred during the processing, a Summary message view in a dialog is displayed. It includes:
1. Successfully processed items
2. The backend error or errors
3. An information message for each item excluded from the processing

Information message text: The <item name> can’t be <action>

Summary with backend errors and information messages for items excluded from processing

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: More than one warning. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One Item

When one item requires manual validation, show a warning message box with actions to:

Validate and process the item
Skip the item: When the users skip the item, in the message view in a dialog, show an information message for the skipped item in the message view.

Warning Message Box
Body Text	<item name> <item ID>: <message description> You can <action> this <item name> anyway, or skip it for now.
Show Details	Optional
Buttons	<Primary action>, Skip

For the skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

Message View
Information Message Text	The <item name> was skipped and not <action>.

Manual validation flow for one item (message box)

Case 2: More than One

When more than one item requires manual validation, show a warning message box with actions to:

Validate and process the items
Skip the items: When the users skip the items, in the message view in a dialog, show an information message for each skipped item.

Warning Message View
Header	*Warning*
Body Text	Warnings exist for some of the selected <item name, plural>. You can choose “<primary action>” to ignore the warnings, or skip these <item name, plural> for now.
Buttons	<Primary action>, Skip

For each skipped item, in the Summary message view, add an information message text below the other (success, error, and warning) items.

Message View
Information Message Text	The <item name> was skipped and not <action>.

Manual validation flow for several items (message view)

Action on multiple items with field issues in edit mode

Triggering a mass action can reveal field issues because the mass action also triggers field validation.

List the field related messages among other messages in the summary message view dialog.

Once the dialog is closed, the message popover appears, with a list of only the field issues.

Action on multiple items with field errors in edit mode

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a desktop

Width

The standard width of the toast is 15 rem, and text that exceeds this width will wrap.

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the application team.

Users can also keep the message toast on screen with the following keyboard shortcuts:

Ctrl + Shift + M (Windows)
Cmd + Shift + M (Mac OS)

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message Handling – Processing Multiple Items

When a user selects multiple items from a table, it might not be possible to process all of the items at once.

Users therefore need clear and user-friendly information on:

The actions available for the selected items
Any issues that prevent items from being processed
Whether or not an action was successful for all items

Scenarios for Processing Results

This guideline outlines the message patterns and recommended message texts for the following scenarios:

Success: All items were processed successfully
Failure: No items can be processed / were processed
Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.

Enabling/Disabling Actions

Guidelines

Enable an action that:

Always works, regardless of whether or not items are selected
Can be applied to at least one of the selected items

Disable an action that:

Can’t be applied to any of the selected items
Doesn’t correspond to the number of selected items. For example, disable Compare if only one item is selected

For more details, see UI Element States.

After the action is applied, keep the items selected.

Success

If all items were processed successfully, show a message toast.

Body text: <number of items> <item name> were <action>.
Example: 20 sales orders were released.

Message toast

Failure Cases

No items can be processed

Disable the action button. For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

No items were processed

Show a message view in a dialog, listing the issues.

As the first entry in the list, show a generic error message indicating that no items were processed.
Below, show the specific messages for the items that weren’t processed.

Dialog header: Summary

Generic error message text (top of list): No <item name> were <action>.
Example: No sales orders were released.

Message view with errors only

Partial Processing

Backend issues

One or more of the selected items were processed successfully and one or more were not, due to backend issues.

Show a message view dialog to list the results.

Start the list with a success message that counts the successfully processed items. Next, list the errors and warnings for the items.

Dialog header: Summary

Generic success message text (top of list):
<number of successful items> of <total number of items> <item name> were <action>.
Example: 8 of 10 sales orders were released.

Message view with a mix of success, error, and warnings messages

One or more items can’t be processed

Before processing, if the action cannot be applied to one or more items, a warning dialog asks the user for a decision.

Message box type: Warning

Message text: <number of items ineligible for the action> of <total number of items> <item name> can’t be <action>.
Do you still want to <action> the remaining <number of editable items> <item name>?
Example: 4 of 10 sales orders can’t be edited.
Do you still want to edit the remaining 6 sales orders?

Message details:
Possible Causes
Selected <item name> are excluded if:
Somebody is working on the <item name> (a draft exists or changes haven’t been saved).
<action> is not allowed on the <item name>.

Buttons: <primary action>, Cancel

Example:

Somebody is working on the sales order (a draft exists or changes haven’t been saved).
Editing isn’t allowed on the sales order.

If the user confirms the action for the remaining items and, after processing:

All these items were successfully processed, a message toast summarizes the operation
At least one backend error caused a remaining item to fail, the message view dialog with a summary appears

Messaging sequence for items that can't be processed

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue.

There are two cases:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One Item

When one item requires manual validation, show a warning message box with actions to either process or skip the item.

Message box type: Warning

Body text:
<item name> <item ID>: <message description>
You can <action> this <item name> anyway, or skip it for now.
Show Details (optional)

Buttons: <primary action>, Skip

If the user skips the item, show a corresponding information message in the summary dialog.

Information message text:
The <item name> was skipped and not <action>.
Example: The sales order was skipped and not released.

Manual validation flow for one item (message box)

Case 2: More than One

When more than one item requires manual validation, show a message view in a message dialog with options to process or skip all the items.

As the first entry in the list, show a generic message indicating that warnings exist. In the message details, explain the two options.
Below the first entry, show the specific warnings for the individual items.

Message dialog type: Warning

Generic warning message text (top of list): Warnings exist for some of the selected <item name, plural>.

Message details: You can choose “<primary action>” to ignore the warnings, or skip these <item name, plural> for now.

Buttons: <primary action>, Skip

The primary action validates all the items at once.

If the user skips the items, show corresponding information messages for each item in the summary dialog.

Information message text (per skipped item):
The <item name> was skipped and not <action>.
Example: The sales order was skipped and not released.

Manual validation flow for several items (message view)

Action on multiple items with field issues in edit mode

Triggering a mass action can reveal field issues because the mass action also triggers field validation.

List the field related messages among other messages in the summary dialog.

Once the dialog is closed, the message popover appears, with a list of only the field issues.

Action on multiple items with field errors in edit mode

Success

If all items were processed successfully, show a message toast.

Body text: <number of items> <item name> were <action>.
Example: 20 sales orders were released.

Message toast

Failure Cases

No items can be processed

Disable the action button. For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

No items were processed

Show a message view in a dialog, listing the issues.

As the first entry in the list, show a generic error message indicating that no items were processed.
Below, show the specific messages for the items that weren’t processed.

Dialog header: Summary

Generic error message text (top of list): No <item name> were <action>.
Example: No sales orders were released.

Message view with errors only

Partial Processing

Backend issues

One or more of the selected items were processed successfully and one or more were not, due to backend issues.

Show a message view dialog to list the results.

Start the list with a success message that counts the successfully processed items. Next, list the errors and warnings for the items.

Dialog header: Summary

Generic success message text (top of list):
<number of successful items> of <total number of items> <item name> were <action>.
Example: 8 of 10 sales orders were released.

Message view with a mix of success, error, and warnings messages

One or more items can’t be processed

Before processing, if the action cannot be applied to one or more items, a warning dialog asks the user for a decision.

Message box type: Warning

Message text: <number of items ineligible for the action> of <total number of items> <item name> can’t be <action>.
Do you still want to <action> the remaining <number of editable items> <item name>?
Example: 4 of 10 sales orders can’t be edited.
Do you still want to edit the remaining 6 sales orders?

Message details:
Possible Causes
Selected <item name> are excluded if:
Somebody is working on the <item name> (a draft exists or changes haven’t been saved).
<action> is not allowed on the <item name>.

Buttons: <primary action>, Cancel

Example:

Somebody is working on the sales order (a draft exists or changes haven’t been saved).
Editing isn’t allowed on the sales order.

If the user confirms the action for the remaining items and, after processing:

All these items were successfully processed, a message toast summarizes the operation
At least one backend error caused a remaining item to fail, the message view dialog with a summary appears

Messaging sequence for items that can't be processed

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue.

There are two cases:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One Item

When one item requires manual validation, show a warning message box with actions to either process or skip the item.

Message box type: Warning

Body text:
<item name> <item ID>: <message description>
You can <action> this <item name> anyway, or skip it for now.
Show Details (optional)

Buttons: <primary action>, Skip

If the user skips the item, show a corresponding information message in the summary dialog.

Information message text:
The <item name> was skipped and not <action>.
Example: The sales order was skipped and not released.

Manual validation flow for one item (message box)

Case 2: More than One

When more than one item requires manual validation, show a message view in a message dialog with options to process or skip all the items.

As the first entry in the list, show a generic message indicating that warnings exist. In the message details, explain the two options.
Below the first entry, show the specific warnings for the individual items.

Message dialog type: Warning

Generic warning message text (top of list): Warnings exist for some of the selected <item name, plural>.

Message details: You can choose “<primary action>” to ignore the warnings, or skip these <item name, plural> for now.

Buttons: <primary action>, Skip

The primary action validates all the items at once.

If the user skips the items, show corresponding information messages for each item in the summary dialog.

Information message text (per skipped item):
The <item name> was skipped and not <action>.
Example: The sales order was skipped and not released.

Manual validation flow for several items (message view)

Action on multiple items with field issues in edit mode

Triggering a mass action can reveal field issues because the mass action also triggers field validation.

List the field related messages among other messages in the summary dialog.

Once the dialog is closed, the message popover appears, with a list of only the field issues.

Action on multiple items with field errors in edit mode

Success

If all items were processed successfully, show a message toast.

Body text: <number of objects> <objects> were <action>.
Example: 20 sales orders were released.

Message toast

Failure Cases

None of the items can be processed

Disable the action button. For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

None of the items were processed

Show a message view in a dialog, listing the issues.

As the first entry in the list, show a generic error message indicating that no items were processed.
Below, show the specific messages for the items that weren’t processed.

Dialog header: Summary

Generic error message text (top of list): No <objects> were <action>.
Example: No sales orders were released.

Message view with errors only

Partial Processing

If one or more of the selected items can’t be processed, show a message view in a dialog as a summary at the end of the process.

As the first entry in the list, show a success message indicating the number of items that were processed successfully.
Below, show the specific messages for the items with issues.

Dialog header: Summary

Generic success message text (top of list): <number of successful objects> of <total number of objects> <objects> were <action>.
Example: 8 of 10 sales orders were released.

Message view with a mix of success, error, and warnings messages

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue.

There are two cases:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One item requires manual validation

Show a warning message box with actions to process or skip the item.

Message box type: Warning

Body text:

<object> <object ID>: <message description>

You can process this item anyway, or skip it for now.

Show Details (optional)

Buttons: <Primary action>, Skip

If the user skips the item, show a corresponding information message in the summary dialog.

Information message text (per skipped item):
The <object> was skipped and not <action>.
<object ID>
Example:
The sales order was skipped and not released.
500009070

Manual validation flow for one item (message box)

Case 2: Several items require manual validation

Show a message view in a message dialog with options to process or skip all the items.

As the first entry in the list, show a generic message indicating that warnings exist. In the message details, explain the two options.
Below the first entry, show the specific warnings for the individual items.

Message dialog type: Warning

Generic warning message text (top of list): Warnings exist for some of the selected items.

Message details: You can choose “<primary action>” to ignore the warnings, or skip these items for now.

Buttons: <primary action>, Skip

The primary action validates all the items at once.

If the user skips the items, show corresponding information messages for each item in the summary dialog.

Information message text (per skipped item):
The <object> was skipped and not <action>.
<object ID>
Example:
The sales order was skipped and not released.
500009070

Manual validation flow for several items (message view)

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a desktop

Width

The standard width of the toast is 15 rem, and text that exceeds this width will wrap.

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the app.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message Handling – Processing Multiple Items

When multiple items are selected, it might not be possible to process all of the items at once.

Users therefore need clear and user-friendly feedback on:

The available actions
Whether or not an action was successful for all items
Any issues that prevent items from being processed

Scenarios

This guideline outlines the message patterns and recommended message texts for the following scenarios:

Success: All items were processed successfully
Failure: No items can be processed / were processed
Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.

Success

If all items were processed successfully, show a message toast.

Body text: <number of objects> <objects> were <action>.
Example: 20 sales orders were released.

Message toast

Failure Cases

None of the items can be processed

Disable the action button. For example, if all the selected items are locked, disable the Edit button.

To help users understand why the action button is disabled, use the item states.

Disabled edit button

None of the items were processed

Show a message view in a dialog, listing the issues.

As the first entry in the list, show a generic error message indicating that no items were processed.
Below, show the specific messages for the items that weren’t processed.

Dialog header: Summary

Generic error message text (top of list): No <objects> were <action>.
Example: No sales orders were released.

Message view with errors only

Partial Processing

If one or more of the selected items can’t be processed, show a message view in a dialog as a summary at the end of the process.

As the first entry in the list, show a success message indicating the number of items that were processed successfully.
Below, show the specific messages for the items with issues.

Dialog header: Summary

Generic success message text (top of list): <number of successful objects> of <total number of objects> <objects> were <action>.
Example: 8 of 10 sales orders were released.

Message view with a mix of success, error, and warnings messages

Processing is blocked by items that require manual validation

Some warnings for individual items may require a user decision before processing can continue.

There are two cases:

Case 1: Just one warning. The user can ignore the warning and process the item, or skip the item.
Case 2: Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Case 1: One item requires manual validation

Show a warning message box with actions to process or skip the item.

Message box type: Warning

Body text:

<object> <object ID>: <message description>

You can process this item anyway, or skip it for now.

Show Details (optional)

Buttons: <Primary action>, Skip

If the user skips the item, show a corresponding information message in the summary dialog.

Information message text (per skipped item):
The <object> was skipped and not <action>.
<object ID>
Example:
The sales order was skipped and not released.
500009070

Manual validation flow for one item (message box)

Case 2: Several items require manual validation

Show a message view in a message dialog with options to process or skip all the items.

As the first entry in the list, show a generic message indicating that warnings exist. In the message details, explain the two options.
Below the first entry, show the specific warnings for the individual items.

Message dialog type: Warning

Generic warning message text (top of list): Warnings exist for some of the selected items.

Message details: You can choose “<primary action>” to ignore the warnings, or skip these items for now.

Buttons: <primary action>, Skip

The primary action validates all the items at once.

If the user skips the items, show corresponding information messages for each item in the summary dialog.

Information message text (per skipped item):
The <object> was skipped and not <action>.
<object ID>
Example:
The sales order was skipped and not released.
500009070

Manual validation flow for several items (message view)

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a desktop

Width

The standard width of the toast is 15 rem, and text that exceeds this width will wrap.

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the app.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Illustrated Message

An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set (1)

An illustrated message has a set of four UX illustrations per use case: dot, spot, dialog, and scene. Each illustration has a different size and level of detail. The illustration sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all four illustration sizes: dot, spot, dialog, scene

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

Message Headline (2)

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Message Description (3)

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 (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action (4)

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – Smallest size. Not enough space to display an illustration.
Dot – Size for very small containers, such as tiles, cards, and table cells.
Spot – Size for small containers, such as cards.
Dialog – Size for medium-sized containers, such as dialogs.
Scene – Size for large controls, such as tables and empty states for an entire screen.

Base size in a cell

Dot size in a small card or tile

Spot size in a card

Dialog size

Scene size in an empty page

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - Empty calendar

Empty state - File upload

Empty state - Search

Empty state - Page not found

Empty state - Error page

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and take care to use appropriate illustrations.

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
Recommended: Replace generic terms like “data” and “object” with your specific business object.
Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
Set alternative texts for the illustrations.

Usage

Use the message strip if:

You want to provide information related to the object as a whole in the object header, such as the object status.
You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within a control, in the list of a list-detail layout, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

The app team can add a link in case more content is useful for the user to understand a situation.
Clicking the Close button on the right-hand side hides the message strip. The app team can determine whether the message strip comes back on page reload, the next visit or never.

Interactive behavior with 'Close' function

Accessibility

When an application adds a message strip dynamically, also notify screen reader users.

Use the following structure for the screen reader notification text:

“New information bar of type <Error / Warning / Success / Information>: <text of message>”

To avoid an endless screen reader announcement, send a short message summary with only the most relevant information.

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

Resources

Elements and Controls

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Illustrated Message

An illustrated message is a recommended combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set

An illustrated message has a set of three UX illustrations per use case: spot, dialog, and scene. Each illustration has a different size and level of detail. The illustrations sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all three illustration sizes

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

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 (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Exemplified illustrated message

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – This is the smallest size. Be aware that this size does not display an illustration due to lack of space.
Spot – This is the normal size for small containers, such as cards.
Dialog – This is the size for medium-sized containers, such as dialogs.
Scene – This is the size for large controls, such as tables and empty states for an entire screen.

Base size

Spot size

Dialog size

Scene size

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - No items

Empty state - No activities

Empty state - No tasks

Empty state - No favorites

Empty state - No results, with search

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and be careful with the illustrations!

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
Recommended: Replace generic terms like “data” and “object” with your specific business object.
Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
Set alternative texts for the illustrations.

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.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set

An illustrated message has a set of three UX illustrations per use case: spot, dialog, and scene. Each illustration has a different size and level of detail. The illustrations sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all three illustration sizes

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

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 (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Exemplified illustrated message

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – This is the smallest size. Be aware that this size does not display an illustration due to lack of space.
Spot – This is the normal size for small containers, such as cards.
Dialog – This is the size for medium-sized containers, such as dialogs.
Scene – This is the size for large controls, such as tables and empty states for an entire screen.

Base size

Spot size

Dialog size

Scene size

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - No items

Empty state - No activities

Empty state - No tasks

Empty state - No favorites

Empty state - No results, with search

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and be careful with the illustrations!

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
Recommended: Replace generic terms like “data” and “object” with your specific business object.
Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
Set alternative texts for the illustrations.

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.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the list of a list-detail layout, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

The app team can add a link in case more content is useful for the user to understand a situation.
Clicking the Close button on the right-hand side hides the message strip. The app team can determine whether the message strip comes back on page reload, the next visit or never.

Interactive behavior with 'Close' function

Accessibility

When an application adds a message strip dynamically, also notify screen reader users.

Use the following structure for the screen reader notification text:

“New information bar of type <Error / Warning / Success / Information>: <text of message>”

To avoid an endless screen reader announcement, send a short message summary with only the most relevant information.

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

Resources

Elements and Controls

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message View

Intro

You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.

Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.

Message view

Usage

Use the message view if:

You want to display multiple messages triggered by an action within a disruptive dialog.

Do not use the message view if:

You want to display messages for form field validation. Instead, use the message popover.
You want to display a single message that interrupts the user. Instead, use the message box.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the dialog container in which it is embedded.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons.

One Message Type Only – Filtering Hidden

The filter bar is hidden if there is only one type of message (for example, only errors).

The filter bar is hidden if all messages are of the same type.

List

Short Description (1)

A simple and helpful short message text.

Subtitle (2)

You can use the subtitle to give your message a description that helps users to identify the object they are looking for.

Navigation to Message Details (3)

If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details.

If the view contains only one message that also has message details, the message details page is displayed by default.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

The message view only provides the counter property. The aggregation itself must be implemented by the app team.

Short Description (1)

A simple and helpful short message text.

Subtitle (2)

You can use the subtitle to give your message a description that helps users to identify the object they are looking for.

Navigation to Message Details (3)

If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details.

If the view contains only one message that also has message details, the message details page is displayed by default.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

The message view only provides the counter property. The aggregation itself must be implemented by the app team.

Message view list items

Message Details

The detail view has the following parts:

1. Back-end short text

2. Back-end long text

3. Optional link

Message view - Details page

Behavior and Interaction

Navigation to Message Details

If the backend contains a long text, the user can click the arrow/chevron on the right-hand side to view the full text in the message details.

Navigation to message details

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Page

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.

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a desktop

Width

The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.

For longer success messages, adjust the width of the toast to make the message easy to read (for example, on a desktop device).

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the app.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Width: The standard width is 15 em. You can extend the width, but do not use more than 35 em.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message Page

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.

Intro

You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.

Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.

Message view

Usage

Use the message view if:

You want to display multiple messages triggered by an action within a disruptive dialog.

Do not use the message view if:

You want to display messages for form field validation. Instead, use the message popover.
You want to display a single message that interrupts the user. Instead, use the message box.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the dialog container in which it is embedded.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons.

One Message Type Only – Filtering Hidden

The filter bar is hidden if there is only one type of message (for example, only errors).

The filter bar is hidden if all messages are of the same type.

List

Short Description (1)

A simple and helpful short message text.

Subtitle (2)

You can use the subtitle to give your message a description that helps users to identify the object they are looking for.

Navigation to Message Details (3)

If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

Information

The message popover only provides the counter property. The aggregation itself must be implemented by the app team.
When 2 or more messages are aggregated, the message short text cannot be a link because there would be multiple targets.

Message view list items

Message Details

The detail view has the following parts:

1. Back-end short text

2. Back-end long text

3. Optional link

Message view detail page

Behavior and Interaction

Navigation to Message Details

If the backend contains a long text, the user can click the arrow/chevron on the right-hand side to view the full text in the message details.

Navigation to message details

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message View (SAPUI5 samples)

Illustrated Message

An illustrated message is a recommended combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set

An illustrated message has a set of three UX illustrations per use case: spot, dialog, and scene. Each illustration has a different size and level of detail. The illustrations sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all three illustration sizes

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

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 (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Exemplified illustrated message

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – This is the smallest size. Be aware that this size does not display an illustration due to lack of space.
Spot – This is the normal size for small containers, such as cards.
Dialog – This is the size for medium-sized containers, such as dialogs.
Scene – This is the size for large controls, such as tables and empty states for an entire screen.

Base size

Spot size

Dialog size

Scene size

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - No items

Empty state - No activities

Empty state - No tasks

Empty state - No favorites

Empty state - No results, with search

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and be careful with the illustrations!

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Tailor your message to your use case

Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
Recommended: Replace generic terms like “data” and “object” with your specific business object.
Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
Set alternative texts for the illustrations.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set

An illustrated message has a set of three UX illustrations per use case: spot, dialog, and scene. Each illustration has a different size and level of detail. The illustrations sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all three illustration sizes

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

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 (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

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 (property: enableFormattedText).

Call to Action

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Exemplified illustrated message

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – This is the smallest size. Be aware that this size does not display an illustration due to lack of space.
Spot – This is the normal size for small containers, such as cards.
Dialog – This is the size for medium-sized containers, such as dialogs.
Scene – This is the size for large controls, such as tables and empty states for an entire screen.

Base size

Spot size

Dialog size

Scene size

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - No items

Empty state - No activities

Empty state - No tasks

Empty state - No favorites

Empty state - No results, with search

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and be careful with the illustrations!

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Do

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.

Don't

Illustration without a message and unrelated to the action

Do

Matching message, illustration, and action

Additional tips

Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
Set alternative texts for the illustrations.

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

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

Search

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

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

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

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

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 buttons

Message page with formatted text

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

Link (guidelines)
Text (guidelines)
Button (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Popover

The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in a form, or messages triggered by a finalizing action, such as Save.

The message popover is used in conjunction with a technical message manager, which populates the message list. If an error occurs at a validation point, the corresponding message is added to message popover automatically, without interrupting the user.

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

(1) Filter bar
(2) Message short text
(3) Message subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Components of the message popover

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description

The short message text (2) provides a simple and helpful short message. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle

You can use the subtitle (3) to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Section/Subsection

Messages in the list are grouped by the section and subsection on the UI (4). This helps the user to find the part of the UI that triggered the message.

Navigation to Message Details

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page (6).

Aggregated Messages

If your app team wants to aggregate messages, they can use the counter property of each list item (7). Note that the message popover only provides the counter property. The aggregation itself must be implemented by the app team.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5).

For example, if the list contains error messages, the message button inherits the error icon and semantic color. If the most critical message in the list is a warning, the message button shows the warning icon and corresponding semantic color, and so on.

In addition, the error button contains a count indicating the number of errors.

Message button types - Error with counter, warning, success, information

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Detail page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

If one or more errors occur when the user fills out a form, the message button appears, indicating the message type of the most critical message. The message popover does not open automatically. For more information on the different validation points, see Form Field Validation.

Form field validation behavior

Finalizing Actions

If the user activates a finalizing action (such as Create, Save, or Submit), the message popover opens automatically to inform the user about the errors on the UI that need to be resolved first.

Message popover triggered by a finalizing 'Save' action

Navigation to the Second Page

If the message provides a long text from the back-end system, the user can navigate to a second page within the message popover. There, the user will typically find more information and help.

Navigation to the detail page of the message popover

Navigation to the Relevant Field

The navigation link takes users directly to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right-hand side hides the message strip.

Interactive behavior with 'Close' function

Accessibility

When an application adds a message strip dynamically, also notify screen reader users.

Use the following structure for the screen reader notification text:

“New information bar of type <Error / Warning / Success / Information>: <text of message>”

To avoid an endless screen reader announcement, send a short message summary with only the most relevant information.

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

Resources

Elements and Controls

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message Toast

A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a desktop

Width

The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.

For longer success messages, adjust the width of the toast to make the message easy to read (for example, on a desktop device).

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the app.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Width: The standard width is 15 em. You can extend the width, but do not use more than 35 em.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message View

Intro

You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user action.

Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.

Message view

Usage

Use the message view if:

You want to display multiple messages triggered by an action within a disruptive dialog.

Do not use the message view if:

You want to display messages for form field validation. Instead, use the message popover.
You want to display a single message that interrupts the user. Instead, use the message box.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the dialog container in which it is embedded.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons.

One Message Type Only – Filtering Hidden

The filter bar is hidden if there is only one type of message (for example, only errors).

The filter bar is hidden if all messages are of the same type.

List

Short Description (1)

The short description comprises a simple and helpful text.

Subtitle (2)

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page (3)

If there is a long text, the message popover automatically provides an arrow on the right for navigating to the message details.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

Developer Hint

The message popover control only provides the counter property. The aggregation must be implemented by the app team.

Message view list items

Detail Page of the Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

The detail view has the following parts:

1. Back-end short text

2. Back-end long text

3. Optional link

Message view detail page

Behavior and Interaction

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message View (SAPUI5 samples)

Message View

Intro

You can use the message view to display multiple transient messages. Unlike state messages, which always relate to a field on the UI, transient messages are related to an action.

Although the message view can be embedded within various controls, we recommend that you use it only within a dialog.

Message view

Usage

Use the message view if:

You want to display multiple transient messages within a disruptive dialog.

Do not use the message view if:

You want to display state messages. Instead, use the message popover.
You want to display a single transient message. Instead, use the message box.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the dialog container in which it is embedded.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons.

One Message Type Only – Filtering Hidden

The filter bar is hidden if there is only one type of message (for example, only errors).

The filter bar is hidden if all messages are of the same type.

List

Short Description (1)

The short description comprises a simple and helpful text.

Subtitle (2)

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page (3)

If there is a long text, the message popover automatically provides an arrow on the right for navigating to the message details.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

Developer Hint

The message popover control only provides the counter property. The aggregation must be implemented by the app team.

Message view list items

Detail Page of the Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

The detail view has the following parts:

1. Back-end short text

2. Back-end long text

3. Optional link

Message view detail page

Behavior and Interaction

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)
Dialog (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Popover

The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in a form, or messages triggered by a finalizing action, such as Save.

The message popover is used in conjunction with a technical message manager, which populates the message list. If an error occurs at a validation point, the corresponding message is added to message popover automatically, without interrupting the user.

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

Components of the message popover

(1) Filter bar
(2) Message short text
(3) Message subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description

The short message text (2) provides a simple and helpful short message. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle

You can use the subtitle (3) to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Section/Subsection

Messages in the list are grouped by the section and subsection on the UI (4). This helps the user to find the part of the UI that triggered the message.

Navigation to Message Details

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page (6).

Aggregated Messages

If your app team wants to aggregate messages, they can use the counter property of each list item (7). Note that the message popover only provides the counter property. The aggregation itself must be implemented by the app team.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5). For example, if the list contains an error message, the message button inherits the error icon and semantic color. If the most critical message in the list is a warning, the message button shows the warning icon and corresponding semantic color, and so on.

Message button types

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Detail page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

If one or more errors occur when the user fills out a form, the message button appears, indicating the message type of the most critical message. The message popover does not open automatically. For more information on the different validation points, see Form Field Validation.

Form field validation behavior

Finalizing Actions

If the user activates a finalizing action (such as Create, Save, or Submit), the message popover opens automatically to inform the user about the errors on the UI that need to be resolved first.

Message popover triggered by a finalizing 'Save' action

Navigation to the Second Page

If the message provides a long text from the back-end system, the user can navigate to a second page within the message popover. There, the user will typically find more information and help.

Navigation to the detail page of the message popover

Navigation to the Relevant Field

The navigation link takes users directly to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

Resources

Elements and Controls

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message View

Warning

We are still working on the image updates for this article. To see examples of the message view grouped by section/subsection, see the Message Popover article.

Intro

Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.

While message view can be embedded within multiple controls, we recommend that you use it only within a responsive popover or a dialog.

Message view

Usage

Use the message view if:

You want to display messages without using the message popover.
You want to display multiple messages.
You want to display multiple transient messages within a disruptive dialog.

Do not use the message view if:

You want to display state messages. Instead, use message popover.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the container in which it is embedded.

To display messages as popovers on desktop devices, or in full-screen mode on smartphones, we recommend that you use sap.m.ResponsivePopover as a container.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons

Grouping by section and subsections

Messages in the list are grouped by the section and (if relevant) subsection. This helps the user to find the field that triggered the message on the UI.

One Message Type Only – Filtering Hidden

If there is only one type of message (for example, only errors), the filter bar is hidden.

The filter bar is hidden if all messages are of the same type.

List

Short Description

The short description comprises a simple and helpful text.

Subtitle

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page

If there is a long text, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message view, where he or she can read the long text of the message.

Message view list items

Aggregating Messages

If desired, the app development team can aggregate messages by filling out the counter property of each list item. Note that the app team must implement this aggregation on their own as the message popover only provides the counter property.

Message view list aggregation

Detail Page of Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

Message view detail page

Behavior and Interaction

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Message View Within a Dialog

Handling of Transient Messages

The message view also handles transient messages and is available within a dialog. Possessing the same interaction patterns as the message popover, this control helps the app development team to display messages more easily and consistently.

Transient message handling with the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

Message View within a Responsive Popover

Handling Application-Specific Messages

The message view can be embedded in a responsive popover (sap.m.ResponsivePopover), for example, if you want to display multiple messages by clicking a button.

Due to the full screen behavior on smartphones (size S), we recommend that you use the responsive popover as a container.

Message view inside the sap.m.ResponsivePopover

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Popover

The message popover control can display multiple messages of different types in one list. For example, it might show several messages related to entries in a form, or messages triggered by a finalizing action, such as Save.

The message popover is used in conjunction with a technical message manager, which populates the message list. If an error occurs at a validation point, the corresponding message is added to message popover automatically, without interrupting the user.

Users can browse messages by type and navigate to the message details. In some cases, they can also jump directly from the message to the affected field on the UI.

Message popover

When to Use

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Do not use the message popover if:

You need to interrupt the user. In this case, use a message box.
(Typically, interrupting the user is only necessary for technical problems, such as network errors and connection issues.)

Components

Components of the message popover

(1) Filter bar
(2) Message short text
(3) Message subtitle
(4) Section/subsection on the UI
(5) Message button
(6) Navigation to message details
(7) Counter for aggregated messages

Filter Bar

Initially, the filter bar shows all the different message types in the list (1).

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success, and information).

List

Short Description

The short message text (2) provides a simple and helpful short message. It’s the same message as the one attached to the UI control where the issue occurred.

Subtitle

You can use the subtitle (3) to give your message an identifier. If the message relates to a specific field, show the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Section/Subsection

Messages in the list are grouped by the section and subsection on the UI (4). This helps the user to find the part of the UI that triggered the message.

Navigation to Message Details

If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the message details page (6).

Aggregated Messages

If your app team wants to aggregate messages, they can use the counter property of each list item (7). Note that the message popover only provides the counter property. The aggregation itself must be implemented by the app team.

Message Button

If there are messages to display, the message button indicates the most critical message status in the list (5). For example, if the list contains an error message, the message button inherits the error icon and semantic color. If the most critical message in the list is a warning, the message button shows the warning icon and corresponding semantic color, and so on.

Message button types

If there are no messages to display, there is no message button. In this case, the footer toolbar contains only the “normal” actions for the task.

Message Details

The message details page shows:

The message short text (1).
A more detailed message text to explain the issue and propose a solution (2).
An optional link to more information, such as app documentation (3).

Detail page of the message popover

Behavior and Interaction

When Does the Message Popover Open?

Form Field Validation

If one or more errors occur when the user fills out a form, the message button appears, indicating the message type of the most critical message. The message popover does not open automatically. For more information on the different validation points, see Form Field Validation.

Form field validation behavior

Finalizing Actions

If the user activates a finalizing action (such as Create, Save, or Submit), the message popover opens automatically to inform the user about the errors on the UI that need to be resolved first.

Message popover triggered by a finalizing 'Save' action

Navigation to the Second Page

If the message provides a long text from the back-end system, the user can navigate to a second page within the message popover. There, the user will typically find more information and help.

Navigation to the detail page of the message popover

Navigation to the Relevant Field

The navigation link takes users directly to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

Guidelines

Always add a navigation link, where possible.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click the message text in both the first and second page of the message popover.

Navigation from the message text to a field on the UI

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full screen mode.

Full screen message popover on a smartphone

Top Tips

Whenever possible, provide a navigation link from the message to the relevant field on the UI.
Use the message subtitle to indicate the field label.
In forms, also highlight the individual fields, and change their value state according to the type of message. For more information, see Form Field Validation.

Usage

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full-screen mode.

Full screen message popover on a smartphone

Layout

Filtering

Initial state

Initially, the filter bar shows all the different types of messages found in the message popover.

General filter

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Filter on top of message popover

List

Short description

The short message text provides a simple and helpful short message. It’s the same message as the one attached on the UI control where the issue occurred.

Subtitle

The subtitle provides the chance to give your message an identifier. We recommend that you add the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Navigation to second page

In case there is a long text available, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message popover, where he or she can read the long text of the message.

Messaging button in full screen layout

Aggregating Messages

If the application development team wants to aggregate messages, they have the chance to fill the counter property of each list item. The app team will have to implement this aggregation on their own as the message popover just provides the counter property.

Messaging button in full screen layout

Detail Page of Message Popover

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Messaging button in full screen layout

Messaging Button

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

Messaging button in toolbar

How to Display the Message Popover

An overview of the different steps needed to display the message popover is provided below. For further information, see message handling.

Behavior and Interaction

When Should the Message Popover Open?

Activation actions

If the user clicks or taps on an activating action (such as Create, Save, or Submit), the message popover should open automatically to inform the user about the active errors on the UI. The message popover provides the user with an overview of the error messages.

Form field validation

If an error occurs (for example, after validating an input field), the message button appears with the number of messages inside. The message popover does not open automatically.

Detailed view

Navigation to the Second Page of the Message Popover

If the message provides a long text from the back-end system, the user is able to navigate to a second page within the message popover. There, the user will typically find more information and helpful message text.

Navigation to second page of the message popover

Navigation to the Relevant Field

Add a navigation link to direct users to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Developer Hint

Set the navigation link with the activeTitlePress event. This allows users to click or tap on the message text in both the first and second page of the message popover.

Navigation to from the message text to a field on the UI

Guidelines

Messaging Overview

No messages to display

If there are no messages to display, you do not need to include a message button in the toolbar.

Highlight the fields

First, highlight the specific field(s) if possible, and change their value state according to the type of message, such as error, warning, or success messages.

Message popover

In addition to the field(s) being highlighted, a button also appears in the toolbar, displaying an icon and the number of messages that have occurred. This number matches the number of fields that have been highlighted. Whenever multiple messages occur, they should be displayed in the message popover, which can be triggered via a button on the left side of the footer toolbar.

Display single messages in a message box

There may also be messages that have to interrupt the user. At present, we are only aware of technical issues such as network errors and connection issues.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

After focusing out
After pressing a key
After clicking or tapping an action, such as Create, Save, or Submit

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

Message Handling (guidelines)
Message Box (guidelines)

Implementation

Message Popover (SAPUI5 samples)
Message Popover (SAPUI5 API reference)

Message Popover

The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after validation points.

With the message concept, we now provide a way to centrally manage messages and show them to the user without additional work for the developer.

Message popover

Usage

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full-screen mode.

Full screen message popover on a smartphone

Layout

Filtering

Initial state

Initially, the filter bar shows all the different types of messages found in the message popover.

General filter

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Filter on top of message popover

List

Short description

The short message text provides a simple and helpful short message. It’s the same message as the one attached on the UI control where the issue occurred.

Subtitle

The subtitle provides the chance to give your message an identifier. We recommend that you add the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Navigation to second page

In case there is a long text available, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message popover, where he or she can read the long text of the message.

Messaging button in full screen layout

Aggregating Messages

If the application development team wants to aggregate messages, they have the chance to fill the counter property of each list item. The app team will have to implement this aggregation on their own as the message popover just provides the counter property.

Messaging button in full screen layout

Detail Page of Message Popover

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Messaging button in full screen layout

Messaging Button

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

Messaging button in toolbar

How to Display the Message Popover

An overview of the different steps needed to display the message popover is provided below. For further information, see message handling.

Behavior and Interaction

When Should the Message Popover Open?

Activation actions

If the user clicks or taps on an activating action (such as Create, Save, or Submit), the message popover should open automatically to inform the user about the active errors on the UI. The message popover provides the user with an overview of the error messages.

Form field validation

If an error occurs (for example, after validating an input field), the message button appears with the number of messages inside. The message popover does not open automatically.

Detailed view

Navigation to the Second Page of the Message Popover

If the message provides a long text from the backend, the user is able to navigate to a second page within the message popover. There, the user will typically find more information and helpful message text.

Navigation to second page of the message popover

Guidelines

Messaging Overview

No messages to display

If there are no messages to display, you do not need to include a message button in the toolbar.

Highlight the fields

First, highlight the specific field(s) if possible, and change their value state according to the type of message, such as error, warning, or success messages.

Message popover

In addition to the field(s) being highlighted, a button also appears in the toolbar, displaying an icon and the number of messages that have occurred. This number matches the number of fields that have been highlighted. Whenever multiple messages occur, they should be displayed in the message popover, which can be triggered via a button on the left side of the footer toolbar.

Display single messages in a message box

There may also be messages that have to interrupt the user. At present, we are only aware of technical issues such as network errors and connection issues.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

After focusing out
After pressing a key
After clicking or tapping an action, such as Create, Save, or Submit

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

Message Handling (guidelines)
Message Box (guidelines)

Implementation

Message Popover (SAPUI5 samples)
Message Popover (SAPUI5 API reference)

Message Strip

The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

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

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message View

Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.

While message view can be embedded within multiple controls, we recommend that you use it only within a responsive popover or a dialog.

Message view

Usage

Use the message view if:

You want to display messages without using the message popover.
You want to display multiple messages.
You want to display multiple transient messages within a disruptive dialog.

Do not use the message view if:

You want to display state messages. Instead, use message popover.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the container in which it is embedded.

To display messages as popovers on desktop devices, or in full-screen mode on smartphones, we recommend that you use sap.m.ResponsivePopover as a container.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons at the top of the control.

One Message Type Only – Filtering Hidden

If there is only one type of message (for example, only errors), the filter bar is hidden.

The filter bar is hidden if all messages are of the same type.

List

Short Description

The short description comprises a simple and helpful text.

Subtitle

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page

If there is a long text, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message view, where he or she can read the long text of the message.

Message view list items

Aggregating Messages

If desired, the app development team can aggregate messages by filling out the counter property of each list item. Note that the app team must implement this aggregation on their own as the message popover only provides the counter property.

Message view list aggregation

Detail Page of Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

Message view detail page

Behavior and Interaction

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click on the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Message View Within a Dialog

Handling of Transient Messages

The message view also handles transient messages and is available within a dialog. Possessing the same interaction patterns as the message popover, this control helps the app development team to display messages more easily and consistently.

Transient message handling with the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

Message View within a Responsive Popover

Handling Application-Specific Messages

The message view can be embedded in a responsive popover (sap.m.ResponsivePopover), for example, if you want to display multiple messages by clicking a button.

Due to the full screen behavior on smartphones (size S), we recommend that you use the responsive popover as a container.

Message view inside the sap.m.ResponsivePopover

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Popover

The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after validation points.

With the message concept, we now provide a way to centrally manage messages and show them to the user without additional work for the developer.

Message popover

Usage

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full-screen mode.

Full screen message popover on a smartphone

Layout

Filtering

Initial state

Initially, the filter bar shows all the different types of messages found in the message popover.

General filter

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Filter on top of message popover

List

Short description

The short message text provides a simple and helpful short message. It’s the same message as the one attached on the UI control where the issue occurred.

Subtitle

The subtitle provides the chance to give your message an identifier. We recommend that you add the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Navigation to second page

In case there is a long text available, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message popover, where he or she can read the long text of the message.

Messaging button in full screen layout

Aggregating Messages

If the application development team wants to aggregate messages, they have the chance to fill the counter property of each list item. The app team will have to implement this aggregation on their own as the message popover just provides the counter property.

Messaging button in full screen layout

Detail Page of Message Popover

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Messaging button in full screen layout

Messaging Button

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

Messaging button in toolbar

How to Display the Message Popover

An overview of the different steps needed to display the message popover is provided below. For further information, see message handling.

Behavior and Interaction

When Should the Message Popover Open?

Activation actions

If the user clicks on a so-called activation action (such as Save or Submit), the message popover should open automatically to inform the user about the active errors on the UI. The message popover will provide the user with an overview of the error messages.

Form field validation

If an error occurs (for example, after validating an input field), the message button appears with the number of messages inside. The message popover does not open automatically.

Detailed view

Navigation to the Second Page of the Message Popover

If the message provides a long text from the backend, the user is able to navigate to a second page within the message popover. There, the user will typically find more information and helpful message text.

Navigation to second page of the message popover

Guidelines

Messaging Overview

No messages to display

If there are no messages to display, you do not need to include a message button in the toolbar.

Highlight the fields

First, highlight the specific field(s) if possible, and change their value state according to the type of message, such as error, warning, or success messages.

Message popover

In addition to the field(s) being highlighted, a button also appears in the toolbar, displaying an icon and the number of messages that have occurred. This number matches the number of fields that have been highlighted. Whenever multiple messages occur, they should be displayed in the message popover, which can be triggered via a button on the left side of the footer toolbar.

Display single messages in a message box

There may also be messages that have to interrupt the user. At present, we are only aware of technical issues such as network errors and connection issues.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

After focusing out
After pressing a key
After clicking or tapping an action, such as Save or Submit

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

Message Handling (guidelines)
Message Box (guidelines)

Implementation

Message Popover (SAPUI5 samples)
Message Popover (SAPUI5 API reference)

Message Page

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

Size M (Tablet)

Search with no results on a tablet

Size L (Desktop)

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

Search

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

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

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

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

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

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

Link (guidelines)
Text (guidelines)
Button (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Strip

The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

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

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message View

Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.

While message view can be embedded within multiple controls, we recommend that you use it only within a responsive popover or a dialog.

Message view

Usage

Use the message view if:

You want to display messages without using the message popover.
You want to display multiple messages.
You want to display multiple transient messages within a disruptive dialog.

Do not use the message view if:

You want to display state messages. Instead, use message popover.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the container in which it is embedded.

To display messages as popovers on desktop devices, or in full-screen mode on smartphones, we recommend that you use sap.m.ResponsivePopover as a container.

Layout

Filtering

Multiple Message types – Filtering by Message Severity

If different types of message are available, users can filter messages by type (error, warning, success, and information) using the segmented buttons at the top of the message view.

Messages of different types can be filtered using the segmented buttons at the top of the control.

One Message Type Only – Filtering Hidden

If there is only one type of message (for example, only errors), the filter bar is hidden.

The filter bar is hidden if all messages are of the same type.

List

Short Description

The short description comprises a simple and helpful text.

Subtitle

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page

If there is a long text, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message view, where he or she can read the long text of the message.

Message view list items

Aggregating Messages

If desired, the app development team can aggregate messages by filling out the counter property of each list item. Note that the app team must implement this aggregation on their own as the message popover only provides the counter property.

Message view list aggregation

Detail Page of Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

Message view detail page

Behavior and Interaction

Just One Message to Display

The message view control was designed to display multiple messages easily. However, if there is just one message to display, the control navigates automatically to the details of the message. This allows the user to see all of the message immediately.

Automatic navigation to the message details

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click on the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Message View Within a Dialog

Handling of Transient Messages

The message view also handles transient messages and is available within a dialog. Possessing the same interaction patterns as the message popover, this control helps the app development team to display messages more easily and consistently.

Transient message handling with the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

Message View within a Responsive Popover

Handling Application-Specific Messages

The message view can be embedded in a responsive popover (sap.m.ResponsivePopover), for example, if you want to display multiple messages by clicking a button.

Due to the full screen behavior on smartphones (size S), we recommend that you use the responsive popover as a container.

Message view inside the sap.m.ResponsivePopover

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Page

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

Size M (Tablet)

Search with no results on a tablet

Size L (Desktop)

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 <entity> found. Check the filter settings. For example: “No matching items found. Check the filter settings.”
Show the filter icon.

No matching items found

Search

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

Display the following text: No matching <entity> found. For example: “No matching items found.”
Show the search icon.

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

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

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

Components

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

Icon
Text or link

Guidelines

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 that case, use the busy state without an explanatory text. Do not show the “No data” message, since this 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

Link (guidelines)
Text (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Toast

A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy the message content to the clipboard (such as a product or transaction number). In this case, use a success message dialog instead.

Responsiveness

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.

Layout

Position

The message toast is always centered horizontally at the bottom of the screen.

Message toast on a tablet device

Width

The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.

For longer success messages, adjust the width of the toast to make the message easy to read (for example, on a desktop device).

Behavior and Interaction

Choreography

When an action is successful, the message toast fades in and out automatically. The timing and duration of the message toast is defined by the app.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, after a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend using a message toast where possible.

Animation

Set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be. The message does not react to the user’s focus.

Guidelines

Message Toast Texts

To make the toast message easy to scan, keep the text as short as possible. Remember that the user will not have time to take in very much detail.

Do not use the word “successfully” in the message text. This is implicit in a success message.

Patterns

For standard actions (such as create, save, delete, or send), we recommend using the following patterns, depending on your use case.

Use Case	Use Case Variant	Pattern (EN)	Example (EN)
Single item	Object name is not needed. Hint: If the name or ID is not crucial feedback in your context, leave it out.	[object] [action taken]	Sales order created
	Object name is needed. Hint: If you mention the object name, you can often leave out the object type (usually obvious in the context).	[name] [action taken]	SAP added to customer group
Multiple items		[item count] [objects] [action taken]	2 sales orders were deleted.
Multiple actions	Single items, object names are not needed	1 [object] [1st action taken], 1 [object] [2nd action taken]	1 product added, 1 product removed
	Single items, object names are needed. Hint: Only include object names if the user really needs the specific feedback.	[object] [name] [1st action taken], [object] [name] [2nd action taken]	Product A was added, product B was removed.
	Multiple items	[item count] [objects] [1st action taken], [item count] [objects] [2nd action taken]	2 products added, 3 products removed

Notes:

The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by a heavy users, be as brief as possible (for example, Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (for example, Your request has been sent to the support team.).
Bear in mind that long object names can increase the length of the message toast. Remember to allow for this when defining the toast duration. If long or multiple object names make the toast too cumbersome to read, leave them out. If you really need to list them in a success message, use the success message box instead.

Do

Toast without ID

Don't

Do not use "successfully"

Do

Toast with item count

Don't

Do not list names of multiple items

SAP Fiori Elements

If you are using SAP Fiori elements, remember to replace the “object” placeholder with your business object.

For more information, see SAP Fiori Elements – Mandatory Adjustments.

Do

Replace "object" with your specific business object

Don't

Do not leave the "object" placeholder

Properties

You can change the values of the following properties. Only change the values if the standard values don’t work for your use case.

Position: We recommend that you always use the initial value (horizontally centered, at the bottom of the page).

Duration: The standard value is 3,000 ms. You can set a duration of more than 3,000 ms, but do not use less than 3,000 ms.

Width: The standard width is 15 em. You can extend the width, but do not use more than 35 em.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)
Message Box (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message View

Containing features from the message popover control, the message view control gives you the flexibility to display multiple messages within SAP Fiori.

While message view can be embedded within multiple controls, we recommend that you use it only within a responsive popover or a dialog.

Message view

Usage

Use the message view if:

You want to display messages without using the message popover.
You want to display multiple messages.
You want to display multiple transient messages within a disruptive dialog.

Do not use the message view if:

You want to display state messages. Instead, use message popover.

Responsiveness

Size S (Smartphone)

The responsiveness of the message view is determined by the container in which it is embedded.

To display messages as popovers on desktop devices, or in full-screen mode on smartphones, we recommend that you use sap.m.ResponsivePopover as a container.

Layout

Filtering

Initial State

The filter bar displays all the types of messages typically contained within the message popover.

General Filter

Users can filter messages by type (error, warning, success and information) with the segmented buttons on top of the message view.

Filtering inside the message view - Messages can be filtered by the filter on top of the control

List

Short Description

The short description comprises a simple and helpful text.

Subtitle

The subtitle comprises a description that helps users to identify the object they are looking for.

Navigation to Second Page

If there is a long text, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message view, where he or she can read the long text of the message.

Message view list items

Aggregating Messages

If desired, the app development team can aggregate messages by filling out the counter property of each list item. Note that the app team must implement this aggregation on their own as the message popover only provides the counter property.

Message view list aggregation

Detail Page of Message View

Users can filter messages by type (error, warning, success and information) using the segmented buttons on top of the message view.

Message view detail page

Behavior and Interaction

Navigation to the Second Page of the Message View

If the backend contains a long text, the user can click on the arrow/chevron on the right-hand side to view the full text in the second page of the message view.

Navigation to second page of the message view

Message View Within a Dialog

Handling of Transient Messages

The message view also handles transient messages and is available within a dialog. Possessing the same interaction patterns as the message popover, this control helps the app development team to display messages more easily and consistently.

Transient message handling with the message view

Life Cycle

We recommend that messages no longer be displayed after the user closes the dialog (sap.m.MessageBox/sap.m.Dialog).

Message View Within an sap.m.Responsive Popover

Handling Application-Specific Messages

The message view can be embedded in an sap.m.ResponsivePopover: for example, if you want to display multiple messages by clicking a button.

Due to the full-screen behavior on smartphones (size S), we recommend that you use the sap.m.ResponsivePopover as a container.

Message view inside the sap.m.ResponsivePopover

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

Message Box (guidelines)
Message Handling (guidelines)
Message Popover (guidelines)

Implementation

Message View (SAPUI5 samples)

Message Toast

A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy, for example, a transaction number to their clipboard. (In this case, show a success message dialog.)

Responsiveness

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.

Layout

Position

The message toast is always positioned horizontally centered at the bottom of the screen.

Message toast on a tablet device

Width

The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.

When success messages are longer, however, the width should be adjusted to create a message box that is easily readable, for example, on a desktop device.

Behavior and Interaction

Choreography

Following a successful response from the system, the message text is displayed in the message toast. The message toast fades in based on the time defined by the app, and then fades out again automatically.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend always considering a message toast instead.

Animation

The message does not react to the user’s focus. Therefore, you must set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be.

Properties

The app can change the values of the following properties. Only change the values if it makes sense; otherwise, keep the recommended standard values.

Position: We recommend that you always use the initial value (horizontally centered, vertically at the bottom of the page).

Duration: The standard value is 3,000 ms. You can adjust the duration to more than 3,000 ms, but do not use less than 3,000 ms.

Width: The standard width is 15 em. You can choose a larger width, but do not use more than 35 em.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message Toast

A message toast (sap.m.MessageToast) is a small, non-disruptive popup for success messages that disappears automatically after a few seconds.

Usage

Use the message toast if:

You want to display a short success message.
You do not want to interrupt users while they are performing an action.
You want to confirm a successful action.

Do not use the message toast if:

You want to display an error or warning message.
You want to interrupt users while they are performing an action.
You want to make sure that users read the message before they leave the page.
You want users to be able to copy, for example, a transaction number to their clipboard. (In this case, show a success message dialog.)

Responsiveness

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.

Layout

Position

The message toast is always positioned horizontally centered at the bottom of the screen.

Message Toast example

Width

The basic width of the toast is 15 rem. Although the app can adjust the width, we recommend setting it to no more than 35 rem.

When success messages are longer, however, the width should be adjusted to create a message box that is easily readable, for example, on a desktop device.

Behavior and Interaction

Choreography

Following a successful response from the system, the message text is displayed in the message toast. The message toast fades in based on the time defined by the app, and then fades out again automatically.

Navigation

In some scenarios, the action that triggers the message toast also triggers navigation to a different page (for example, a save or submit action).

In this case, always navigate first, and then show the message toast on the target page.

Only show the message toast on the same page if no navigation is involved.

Exception: success message dialog

If you need to interrupt users before they leave the current page, do not use the message toast, but a message box (sap.m.MessageBox, property: type – success), which includes a success message. For more information, see message box.

Information

Only put a success message in a message box if your use case requires explicit user interaction, such as copying an order number to process it. We strongly recommend always considering a message toast instead.

Animation

The message does not react to the user’s focus. Therefore, you must set the duration of the animation according to the length of the message text: the longer the text, the longer the duration should be.

Properties

The app can change the values of the following properties. Only change the values if it makes sense; otherwise, keep the recommended standard values.

Position: We recommend that you always use the initial value (horizontally centered, vertically at the bottom of the page).

Duration: The standard value is 3,000 ms. You can adjust the duration to more than 3,000 ms, but do not use less than 3,000 ms.

Width: The standard width is 15 em. You can choose a larger width, but do not use more than 35 em.

Offset: Do not change this value.

Auto-close: True/false

Example of a message toast

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

Dialog (guidelines)
Messaging (guidelines)

Implementation

Message Toast (SAPUI5 samples)
Message Toast (SAPUI5 API reference)

Message Page

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

Size M (Tablet)

Message page with contextual filter on tablet

Size L (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, 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

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

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

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

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

Link (guidelines)
Text (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Page

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

Size M (Tablet)

Message page with contextual filter on tablet

Size L (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, 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

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

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

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

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

Link (guidelines)
Text (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Page

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

Size M (Tablet)

Message page with contextual filter on tablet

Size L (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, 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

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

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.

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

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

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

Link (guidelines)
Text (guidelines)

Implementation

Message Page (SAPUI5 samples)
Message Page (SAPUI5 API reference)

Message Popover

The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after validation points.

With the message concept, we now provide a way to centrally manage messages and show them to the user without additional work for the developer.

Message popover

Usage

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performing an action.

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full-screen mode.

Full-screen message popover on a smartphone

Layout

Filtering

Initial state

Initially, the filter bar shows all the different types of messages found in the message popover.

General filter

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Filter on top of message popover

List

Short description

The short message text provides a simple and helpful short message. It’s the same message as the one attached on the UI control where the issue occurred.

Subtitle

The subtitle provides the chance to give your message an identifier. We recommend that you add the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Navigation to second page

In case there is a long text available, the message popover automatically provides a “chevron” on the right side so that the user is able to navigate to the second page of the message popover, where he or she can read the long text of the message.

Messaging button in full screen layout

Aggregating Messages

If the application development team wants to aggregate messages, they have the chance to fill the counter property of each list item. The app team will have to implement this aggregation on their own as the message popover just provides the counter property.

Messaging button in full screen layout

Detail Page of Message Popover

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Messaging button in full screen layout

Messaging Button

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

Messaging button in toolbar

How to Display the Message Popover

An overview of the different steps needed to display the message popover is provided below. For further information, see message handling.

Behavior and Interaction

When Should the Message Popover Open?

Activation actions

If the user clicks on a so-called activation action (such as Save or Submit), the message popover should open automatically to inform the user about the active errors on the UI. The message popover will provide the user with an overview of the error messages.

Form field validation

If an error occurs (for example, after validating an input field), the message button appears with the number of messages inside. The message popover does not open automatically.

Detailed view

Navigation to the Second Page of the Message Popover

If the message provides a long text from the backend, the user is able to navigate to a second page within the message popover. There, the user will typically find more information and helpful message text.

Navigation to second page of the message popover

Guidelines

Messaging Overview

No messages to display

If there are no messages to display, you do not need to include a message button in the toolbar.

Highlight the fields

First, highlight the specific field(s) if possible, and change their value state according to the type of message, such as error, warning, or success messages.

Message popover

In addition to the field(s) being highlighted, a button also appears in the toolbar, displaying an icon and the number of messages that have occurred. This number matches the number of fields that have been highlighted. Whenever multiple messages occur, they should be displayed in the message popover, which can be triggered via a button on the left side of the footer toolbar.

Display single messages in a message box

There may also be messages that have to interrupt the user. At present, we are only aware of technical issues such as network errors and connection issues.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

After focusing out
After pressing a key
After clicking or tapping an action, such as Save or Submit

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

Message Handling (guidelines)
Message Box (guidelines)

Implementation

Message Popover (SAPUI5 samples)
Message Popover (SAPUI5 API reference)

Message Popover

The message popover (sap.m.MessagePopover) control can handle multiple messages within SAP Fiori. In combination with a message manager, it automatically displays messages that occur after validation points.

With the message concept, we now provide a way to centrally manage messages and show them to the user without additional work for the developer.

Message popover

Usage

Use the message popover if:

You want to display multiple messages to the user.
You do not want to interrupt users while they are performning an action.

Responsiveness

Size S (Smartphone)

On smartphones, the message popover is automatically shown in full-screen mode.

Full-screen message popover on a smartphone

Layout

Full Screen Layout

In a full screen layout, the messaging button always appears on the left side of the footer toolbar.

Messaging button in full screen layout

Split-Screen Layout

In a split-screen layout, the messaging button always appears on the left side of the footer toolbar of the details. Messages are usually field-related (for example, to a business object).

Messaging button in split-screen layout

Messaging Button

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

Messaging button in toolbar

How to Display the Message Popover

An overview of the different steps needed to display the message popover is provided below. For further information, see message handling.

Behavior and Interaction

Navigate to Details

The message popover uses the sap.m.List control, which provides truncation. If the message cannot be fully displayed or includes a long description, the message popover provides navigation to the detailed description.

Message popover list view

Detailed view

Guidelines

Messaging Overview

No messages to display

If there are no messages to display, you do not need to include a message button in the toolbar.

Highlight the fields

First, highlight the specific field(s) if possible, and change their value state according to the type of message, such as error, warning, or success messages.

Message popover

In addition to the field(s) being highlighted, a button also appears in the toolbar, displaying an icon and the number of messages that have occurred. This number matches the number of fields that have been highlighted. Whenever multiple messages occur, they should be displayed in the message popover, which can be triggered via a button on the left side of the footer toolbar.

Display single messages in a message box

There may also be messages that have to interrupt the user. At present, we are only aware of technical issues such as network errors and connection issues.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

After focusing out
After pressing a key
After clicking or tapping an action, such as Save or Submit

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

Message Handling (guidelines)
Message Box (guidelines)

Implementation

Message Popover (SAPUI5 samples)
Message Popover (SAPUI5 API reference)

Message Strip

The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

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

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Message Strip

The message strip is a contro that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

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

Message Handling (guidelines)

Implementation

Message Strip (SAP UI5 explored)
Message Strip (API)

Message Strip

The message strip is a contro that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.

Do not use the message strip if:

You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message. Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)

Message strip on a desktop (size L)

Types

The following semantic types are available.

Information
Warning
Error
Success

Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

Property:showIcon – Allows you to display an icon before the text
Property:customIcon – Allows you to display an icon from the icon library
Property:type – Changes the semantic color and the icon in front of the message strip
Property:text – Adds text to the control
Property:link – Adds a link
Property:showCloseButton – Adds a Close button

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

Message Handling (guidelines)

Implementation

Message Strip (SAPUI5 samples)
Message Strip (SAPUI5 API reference)

Illustrated Message

When to Use

Use an illustrated message if:

Do not use an illustrated message if:

Generic illustrated message

Components

Anatomy of an illustrated message

Illustration Set (1)

Illustration set with all four illustration sizes: dot, spot, dialog, scene

Message Headline (2)

Message Description (3)

Call to Action (4)

Adaptiveness

Default Behavior

Fixed Sizes

Base size in a cell

Dot size in a small card or tile

Spot size in a card

Dialog size

Scene size in an empty page

Examples

Empty state - Empty calendar

Empty state - File upload

Empty state - Search

Empty state - Page not found

Empty state - Error page

Empty state - No results

Top Tips

Turn a negative event into a positive one

Unhelpful, problem-focused message with negative imagery

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Illustration without a message and unrelated to the action

Matching message, illustration, and action

Tailor your message to your use case

Additional tips

Related Links

Elements and Controls

Implementation

Message Handling – Processing Multiple Items

Enabling/Disabling Actions

Success

Message toast

Failure Cases

No items can be processed

Disabled edit button

No items were processed

Message view with errors only

Partial Processing

Backend issues

Message view with a mix of success, error, and warnings messages

One or more items can’t be processed

Messaging sequence for items that can't be processed

Before Processing

After User Confirmation

Summary with backend errors and information messages for items excluded from processing

Processing is blocked by items that require manual validation

Case 1: One Item

Manual validation flow for one item (message box)

Case 2: More than One

Manual validation flow for several items (message view)

Action on multiple items with field issues in edit mode

Action on multiple items with field errors in edit mode

Related Links

Elements and Controls

Implementation

Message Toast

Usage

Use the message toast if:

Do not use the message toast if:

Responsiveness

Layout

Position

Message toast on a desktop

Width

Behavior and Interaction

Choreography

Navigation

Exception: success message dialog

Animation