Updated: June 23, 2023

Message Box

sap.m.MessageBox

Intro

The message box (sap.m.MessageBox) is a special dialog that allows you to display messages to the user. Compared to the message popover (sap.m.MessagePopover), you can use the message box to display messages that are not related to a field on the UI, such as technical errors.

Formulate messages in plain language (no code), describe the issue precisely, and suggest a constructive solution. Always help your user to recognize, diagnose, and recover from messages. Bear in mind that no message is always preferable to even a good message. When you design your apps, aim to prevent problems from occurring in the first place.

Developer Hint
You can create a message box using the sap.m.MessageBox control or by using the sap.m.Dialog control with the type Message.

Usage

Use the message box if:

  • You want to display non-field-related messages.
  • You want to interrupt the user while he or she performs an action.
  • You want to display error, warning, success, confirmation, or information messages.
  • You need to interrupt the user for some other reason.
  • You need the user to acknowledge the message.
  • You need the user to make a decision.

Do not use the message box if:

  • You want to display a short success message. (Use a toast instead. For more information, see Message Toast.)
  • You can show the message directly in a form field.

Responsiveness

The sap.m.MessageBox control has the same responsive behavior as the sap.m.Dialog control. The message box should only be opened in modal mode. Its basic width is 25 rem. For more information, see Dialog.

Types

The following categories of messages are available:

  • Error
  • Warning
  • Success
  • Information
  • Confirmation

Error Message

Error messages can be triggered after the user has entered incorrect data or a system error has occurred. They should interrupt the user by displaying a dialog. A final action such as Submit cannot be carried out until the user has rectified the error.

Control: sap.m.MessageBox
Icon: sap-icon://message-error
Title: Error
Stretch: False (no full screen on all devices)

Error message with one action
Error message with one action
Error message with two actions
Error message with two actions

Text guidelines for an error message:

  • Do not just describe the problem; tell the user how to resolve it.
  • In the short text, speak the language of the end user. Do not include system or configuration details.
  • If the solution is more involved or technical, add a long text.
  • Do not repeat the short text in the long text. They both appear together on the screen.

Warning Message

Warning messages highlight potential issues, but the user can still continue. This includes unintended data loss scenarios.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Warning
Stretch: False (no full screen on all devices)

Use cases for warnings

a) No decision required: Formulate the message as a statement.
Button(s): OK

Warning message with 'OK' button
Warning message with 'OK' button

b) Decision to continue required: Formulate the message as a statement.

Button(s): OK, Cancel

Warning message with 'OK' and 'Cancel' buttons
Warning message with 'OK' and 'Cancel' buttons

c) Specific decision required, with one action

Use a relevant action button. The message may also be formulated as a question.
Button(s): Leave Page, Cancel

Warning message with action and 'Cancel' buttons
Warning message with action and 'Cancel' buttons

Success Message

Success messages give feedback to the user that an action has been executed. The user needs to acknowledge the message.

Guidelines
You should generally use a message toast (sap.m.MessageToast) to display success messages.

Only use a message box for success messages in exceptional cases.
Example: A success message contains key information that users must be able to copy.

Control: sap.m.MessageBox
Icon: sap-icon://message-success
Title: Success
Stretch: False (no full screen on all devices)
Button(s): OK

Success message
Success message

Information Message

Information messages provide information the user needs to acknowledge, but which does not involve a decision. The message provides information that is useful and relevant, but never critical.

Control: sap.m.MessageBox
Icon: sap-icon://message-information
Title: Information
Stretch: False (no full screen on all devices)

Button(s): OK

Information message
Information message

Confirmation Message

Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that has to be confirmed, such as an intended deletion or an approval.

Control: sap.m.MessageBox
Icon: sap-icon://question-mark
Title:  (such as “Approve”, “Reject”, or “Delete”)
Stretch: False (no full screen on all devices)

Button(s): Approve, Cancel

Confirmation message
Confirmation message

Confirmation Message with “Note” Section

Developer Hint
The image belows shows a “Note” section which allows the user to add notes, for example in a “Reject” process. This feature is not provided by the sap.m.MessageBox. Instead, you can use a normal sap.m.Dialog and place those controls inside the confirmation message.

Confirmation messages prompt users to confirm an action that they have triggered. The title of the message box already includes the action that needs to be confirmed, such as an intended deletion or an approval.

Control: sap.m.Dialog
Type: Message
Icon: sap-icon://question-mark
Title:  Such as “Approve” or “Reject”
Stretch: False (no full screen on all devices)

Button(s): ApproveCancel

Confirmation message with note
Confirmation message with note

Confirmation for “Delete”

If the user clicks Delete, display a “Delete” dialog that confirms the delete action.

Control: sap.m.MessageBox
Icon: sap-icon://alert
Title: Delete
Stretch: False (no full screen on all devices)

Button(s): Delete, Cancel

 

Use cases for delete confirmation messages in object page and list reports

a) No context is available. For example, neither the ID nor the description of the business object are available at the time of deletion.
Body text: Delete this <object>?

Confirmation for 'Delete' action
Confirmation for 'Delete' action

b) The ID of the object is available.
Body text: Delete <object> <object ID>?

Confirmation for 'Delete' action with object ID
Confirmation for 'Delete' action with object ID

c) The object ID and description are both available at the time of deletion.
Body text: Delete <object> <object ID> “<object description>”?

Confirmation for 'Delete' action with object ID and description
Confirmation for 'Delete' action with object ID and description

Deleting several objects

If more than one object is being deleted, do not display the object ID and description.
Body text: Delete the <n = optional> selected <objects>?

Confirmation for 'Delete' action with several objects
Confirmation for 'Delete' action with several objects
Developer Hint
The default text in SAP Fiori elements will be slightly different, usually using the default term “object” to designate the item to be deleted. When using SAP Fiori elements, replace “object” with the correct business object name. For more information, see Introduction to SAP Fiori Elements – Adjustments.

Components

The message box contains the following sections and options:

Title: Title text appears in the message box header.

Content: This area contains the actual content of the message box.

Footer with actions: The footer can contain one or more buttons. We recommend limiting the number to two: A primary action and a negative path action.

Example of a message box structure
Example of a message box structure

Show Details button

The message displayed for the user should provide sufficient information to ensure that the user knows what has happened. A message box without an explicit details section should be sufficient. Therefore, the Show Details link is only shown if detailed information is available that differs from the message text and is important for the user.

If details are available, the application has three options to display the text. Text can be displayed as:

  • Plain
  • Formatted
  • The original code format
Message details - Plain text
Message details - Plain text
Message details - Formatted text
Message details - Formatted text
Message details with code excerpt
Message details with code excerpt

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation