- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Message Toast
sap.m.MessageToast
Intro
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.
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.
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.
Toast without ID
Do not use "successfully"
Toast with item count
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.
Replace "object" with your specific business object
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
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.