UI Elements Messaging Message Strip

Updated: November 12, 2021
SAPUI5 Version 1.60

Message Strip

sap.m.MessageStrip

Intro

The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page.

Usage

Use the message strip if:

  • You want to provide information within the detail area of an object.
  • You want to inform your user about a status of an object.
  • You want to warn your user about an issue.

Do not use the message strip if:

  • You want to display information within the object page header, within a control, in the master list, or above the page header.

Responsiveness

The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Close action) of the message.  Text and links behave differently and wrap.

If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.

Message strip on a smartphone (size S)
Message strip on a smartphone (size S)
Message strip on a desktop (size L)
Message strip on a desktop (size L)

Types

The following semantic types are available.

  • Information
  • Warning
  • Error
  • Success
Different semantic types and colors
Different semantic types and colors

Behavior and Interaction

Static behavior

The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.

Static behavior used to display a status
Static behavior used to display a status

Interactive behavior

Clicking the Close button on the right side hides the message strip.

Interactive behavior with close function
Interactive behavior with close function

Properties

sap.m.MessageStrip is limited to the following properties:

  • Property:showIcon – Allows you to display an icon before the text
  • Property:customIcon – Allows you to display an icon from the icon library
  • Property:type – Changes the semantic color and the icon in front of the message strip
  • Property:text – Adds text to the control
  • Property:link – Adds a link
  • Property:showCloseButton – Adds a Close button

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