Message View

Intro

You can use the message view to display messages that are not related to form or table fields. These messages are triggered in response to a user 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 messages triggered by an action within a disruptive dialog.

Do not use the message view if:

  • You want to display messages for form field validation. Instead, use the message popover.
  • You want to display a single message that interrupts the user. 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)

A simple and helpful short message text.

Subtitle (2)

You can use the subtitle to give your message a description that helps users to identify the object they are looking for.

Navigation to Message Details (3)

If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details.

If the view contains only one message that also has message details, the message details page is displayed by default.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

The message view only provides the counter property. The aggregation itself must be implemented by the app team.

Short Description (1)

A simple and helpful short message text.

Subtitle (2)

You can use the subtitle to give your message a description that helps users to identify the object they are looking for.

Navigation to Message Details (3)

If message details are provided, the message view automatically provides a chevron on the right-hand side for navigating to the message details.

If the view contains only one message that also has message details, the message details page is displayed by default.

Aggregating Messages (4)

You can aggregate messages by filling out the counter property of each list item.

The message view only provides the counter property. The aggregation itself must be implemented by the app team.

Message view list items
Message view list items

Message Details

The detail view has the following parts:

1. Back-end short text

2. Back-end long text

3. Optional link

Message view - Details page
Message view - Details page

Behavior and Interaction

Navigation to Message Details

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

Navigation to message details
Navigation to message details

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

Interactive Chart

The interactive chart is used for visual-based filtering in the visual filter bar (VFB) within the analytical list page (ALP). It allows the user to filter by categories, time periods, or by parts of a whole.

Usage

Use the interactive chart if:

  • You want to give the user the possibility to visually filter data in the analytical list page.
  • You want the user to gain insights before filtering large datasets with the visual filter bar.

Do not use the interactive chart if:

  • You want to visualize data without using it for filtering.
  • You are not using the visual filter bar.
  • You want to visualize data for more complex scenarios. In this case, use the VizFrame chart instead.

Responsiveness

The interactive chart is fully responsive and supports both cozy and compact content density.

Types

There are three types of interactive charts currently available:

Filter by categorical data
Filter by categorical data
 Filter large sets of data by time period
Filter large sets of data by time period
Filter by parts of a whole
Filter by parts of a whole

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