Updated: March 17, 2021

SAPUI5 Version 1.50

Message View

sap.m.MessageView

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

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)