Updated: March 17, 2021

Message View

sap.m.MessageView

Warning
We are still working on the image updates for this article. To see examples of the message view grouped by section/subsection, see the Message Popover article.

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

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

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

Grouping by section and subsections

Messages in the list are grouped by the section and (if relevant) subsection. This helps the user to find the field that triggered the message on the UI.

One Message Type Only – Filtering Hidden

If there is only one type of message (for example, only errors), the filter bar is hidden.

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

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

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
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 a Responsive Popover

Handling Application-Specific Messages

The message view can be embedded in a responsive popover (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 responsive popover as a container.

Message view inside the sap.m.ResponsivePopover
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

Implementation