UI Elements Messaging Message View

Updated: March 17, 2021
SAPUI5 Version 1.80

Message View

sap.m.MessageView

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
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.
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.
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
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
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
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

Implementation