On smartphones, the message popover is automatically shown in full-screen mode.

Initial state

Initially, the filter bar shows all the different types of messages found in the message popover.

General filter

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

Short description

The short message text provides a simple and helpful short message. It’s the same message as the one attached on the UI control where the issue occurred.

Subtitle

The subtitle provides the chance to give your message an identifier. We recommend that you add the label of the field where the error occurred. Based on the subtitle, the user should be able to identify the corresponding UI control on the UI (for example, the input field in a form).

Navigation to second page

In case there is a long text available, 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 popover, where he or she can read the long text of the message.

If the application development team wants to aggregate messages, they have the chance to fill the counter property of each list item. The app team will have to implement this aggregation on their own as the message popover just provides the counter property.

Segmented buttons at the top of the message popover allow the user to filter the messages by type (error, warning, success and information), allowing the user to focus on the messages he or she is interested in.

If there are no messages to display, you do not need to show a messaging button. The toolbar then only includes the “normal” actions related to the object.

If there are messages to display, the messaging button must look like the example shown in the figure on the right.

When Should the Message Popover Open?

Activation actions

If the user clicks or taps on an activating action (such as Create, Save, or Submit), the message popover should open automatically to inform the user about the active errors on the UI. The message popover provides the user with an overview of the error messages.

Form field validation

If an error occurs (for example, after validating an input field), the message button appears with the number of messages inside. The message popover does not open automatically.

Navigation to the Second Page of the Message Popover

If the message provides a long text from the back-end system, the user is able to navigate to a second page within the message popover. There, the user will typically find more information and helpful message text.

Navigation to the Relevant Field

Add a navigation link to direct users to the field on the UI that triggered the message. This can be a field in the visible area, a field somewhere else on the same page, or a field on another tab or screen.

For more information about the navigation, see Navigating to the Corresponding Field on the UI in the Message Handling article.

Validation Points

No guidelines are currently available regarding data validation. Several cases are possible, which depend on the users, the performance, and the data that needs to be validated. These cases include:

• After focusing out
• After pressing a key
• After clicking or tapping an action, such as Create, Save, or Submit