Message Strip Toast (SAC)
UI Elements / Message Strip Toast (SAC)
Intro
In SAC, the Message Strip/Toast common control is used for both Message Strips and Message Toasts.
When to Use
Use the SAC message strip / toast:
- To display a short success, warning, error, or information message.
- To display a Story-wide message at the bottom of the user’s screen.
- To display a message strip within a Dialog or Side Panel in SAC.
- If you don’t want to interrupt users while they are performing an action.
Don’t use the SAC message strip / toast:
- To interrupt users while they are performing an action.
- If you want to make sure that users read the message before they leave the page.
- In Datasphere
Top Tips
- In SAC, the same common control is used for Message Strips and Message Toasts.
- Message Toasts appear at the bottom of the screen.
- Message Strips appear within components such as Dialogs and Side Panels.
Anatomy
- Semantic Icon: Dependent on the message value state
- Text: Toast message strip text
- Link (optional): Links with additional actions (i.e., Copy to Clipboard)
- Close Button: All value states must have a close button, except for the success state
Toast Message Strip - Anatomy
Writing Guidelines
- To make the message toast easy to scan, keep the text as short as possible.
- Don’t use the word “successfully” in the message text. This is implicit in a success message.
- Only use periods for complete sentences. See UI Text Guidelines for SAP Fiori – Punctuation – Period.
- The exact phrasing will depend on your target audience and the conventions in your app family. If an action is repeated regularly by experienced users, be as brief as possible (i.e., Order deleted). If your app is typically for occasional users, a full sentence might be more appropriate (i.e., Your request has been sent to the support team.).
Types
Success Message
Success Message Strip / Toast
Warning Message
Warning Message Strip / Toast
Error Message
Error Message Strip / Toast – Collapsed
Error Message Strip / Toast – Expanded
Information Message
Information Message Strip / Toast
Behavior and Interaction
"Show More"
Long error messages are truncated by default after two lines of text. Users can click the “Show More” link to view the full message.
Layout
When used as a Story-wide message, the message toast is centred horizontally at the bottom of the screen.
Choreography
When used as a Story-wide message toast, success messages will automatically fade in and out, with its timing and duration determined by the application team.
Error, warning, and information message toasts must be manually dismissed by the user.
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.
Animation
Set the duration of the animation based on the length of the message text. The longer the text, the longer the duration should be. When used as a Story-wide message, the message toast does not react to the user’s focus.