1. Image
2. Priority
3. Title*
4. Action
5. Operation*
6. Subtitle
7. Author/Source
8. Timestamp*
9. Show/hide truncated text (Show More, Show Less)

Schematic visualization of a notification item

Properties for notification list groups:

1. Expand group*
2. Group priority
3. Title*
4. Group item counter*
5. Bulk actions
6. Bulk operations*

Schematic visualization of a notification group

Notifications sorted by date

Notifications sorted by type

Notifications sorted by priority

Icon and Badge

The Notifications icon button is embedded in the shell bar and is the central access point for all notifications.

• A counter and red badge appears over the upper right-hand corner of the notification icon every time a new notification is added to the list. It displays the number of new notifications.
• Truncation:
  Desktop: If the notification count is 1000 or more, the counter shows +999.
  Mobile: If the notification count is 100 or more, the counter shows +99.
• The badge is set to zero when the user opens the notification popover.
• When the notification popover is displayed, the badge continues to function as usual.

Notifications - Icon/badge

Banner

High-priority notifications are shown using the banner. The banner appears on the upper right-hand corner of the screen for a short period of time and then disappears. We recommend setting a notification to high priority if you need to get the user’s immediate attention. The banner is shown on all floorplans.

Notification banner

Groups

If the notification list is ordered by type/app, single notification items are aggregated in one group. Within a group, single items retain their interaction principles, but the user can also execute bulk actions on an entire group. The icon buttons :icon-slim-arrow-right(Expand Group) and :icon-slim-arrow-down(Collapse Group) display and hide the individual items.

• The highest priority for a single item within a group defines the priority for the entire group.
• The entire group can be dismissed at once. However, this does not affect processes behind the notifications. An item that was deleted from the notification list might still need to be processed.
• We strongly recommend including a count in the group headline.

Hint: Bulk actions are only available when a group is expanded and can be hidden by the system administrator. Single actions can still be executed within a group and can also be hidden.

Notification group

Items

The notification item contains several properties:

Actions

Actions are associated with notifications to allow users to act on notifications from within the notification popover. If more than one actions is exposed, all actions move into the overflow. We recommend displaying only self-explanatory actions that don’t require additional context. When notifications are sorted “By Type”, you can expose bulk actions at group level. Bulk actions are only displayed when the group is open.

Status

You can indicate the notification status using semantic icons within the notification item. There are four levels: red, orange, green, and grey. For more information about semantic colors, see How to Use Semantic Colors.

All high-priority notifications are also displayed as a banner to catch the user’s attention.

Operations

A notification operation can be dismissed. When dismissed, the notification item disappears from the list, but the task might still need to be processed. Bulk operations are exposed at group level.

Headline, Subtitle, Truncation

Provide a short, meaningful headline. If necessary, expose additional content using a subtitle. Longer texts are truncated after the second line. However, we recommend avoiding truncation altogether. If a text truncates, users can display the full text using the Show More button.

Image and Author

You can associate images, initials, or icons with a notification.

There is also a property for displaying the author, which is typically combined with an image.

Read/Unread

The “read” or “unread” status of a notification is visualized using medium and bold headlines. Unclicked/unopened notifications are shown as “unread” and in bold. When an item is clicked/opened, it is shown with a medium headline.

Navigation

Navigation is triggered by clicking the item.

Content

As of today, no other content is possible nor allowed.

Notification item with a single action

Notification item with multiple actions

Notification item with "read" status

Settings

All notification types are displayed in the settings dialog. Users can switch each type on or off without affecting the underlying processes.

Users can activate the banner function for each notification type. This sets the notification status to high priority and corresponding notifications have a red status indicator. Banners are also displayed for all other high priority notifications.

If the Show High-Priority Alerts setting is switched off, banners for high-priority notifications are deactivated, and the user can work without being interrupted.

Users can also receive notifications through other channels:

• Email: If this option is active, the user gets an email with a link to the underlying app.
• Mobile: If this option is active, notifications are sent to a mobile device.
  Note: This feature is currently only available for Apple iOS devices and SAP S/4HANA apps. For more information, see Mobile Integration.

Notification settings

Users open and close the notification popover by clicking the notification icon in the shell bar.

Accessing notifications

Actions are executed by clicking the action buttons, such as Approve or Reject.

Action

Clicking the Close icon in the upper right corner of the item removes the item from the list.

Dismiss notifications

Clicking within the notification item triggers navigation to the source.

Banner

Elements and Controls

• Launchpad Overview (guidelines)

Implementation

• Notification List Item (SAPUI5 samples)
• Notification List Group (SAPUI5 samples)

Visual Design

• [internal_only]Notifications (visual design specification)[/internal_only]