Page History

...

• The Notification Icon inside the header.
• The Notification Panel that opens on the right side of the dashboard.

• Global NotificationNotifications that exist in the form of Toast Notifications and Inline Notifications.
• Local Notifications in the form of Inline Notifications that are part of boardlets.

Global Notifications are independant independent of any dashboard and appear across the entrire entire application.
The Notification Icon, Notification Panel, and Global Notifications build a global notification flow that activates when a user receives a global notificationGlobal Notification.

Local Notifications are tied to the dashboard , and sometimes boardlet, they appere in. and, in some cases, to the boardlet where they appear.
They are not connected to the global notification Global Notification flow and vanish when the user leaves the dashboard.

The apperance appearance of notification elements may vary between different types of notifications.

...

The Notification Icon is part of the header toolbar at on the right side of the dashboard header.
It is always present, independent of the current dashboard.
The icon is located at the far right, only immediately to the left to of the overflow menu, if one is present.

...

When a new and unread notification appears, the notification icon Notification Icon gains a small blue indicator at the top-right.
The indicator disappears when the user has no unread notifications or opens the notification panelNotification Panel.

If the notification is an error, warning, or success notification, a special secondary icon appears to the left of the notification icon Notification Icon inside the header.
This icon matches the type of notification in appearance and vanishes when the user interacts with the notification.

A progress notification Progress Notification adds a progress indicator to the left of the notification iconNotification Icon.
It is circular and actively shows the progress instead of being a static icon.

...

Users can open the Notification Panel by clicking the notification icon Notification Icon in the header or on a global notificationGlobal Notification.
It opens on the right side of the dashboard and has a fixed width.

The notification panel Notification Panel can be closed by clicking the close action in the toolbar or by clicking outside the panel.
Users can anchor the panel like the navigation panel.
An anchored panel can only be closed by clicking the close action.

The notification panel Notification Panel has two tabs: unread Unread and all All.

• Unread - – This tab displays all notifications the user has not interacted with. This is the default tab.
• All - – This tab shows all information the user has received so far.

...

Unread notifications have a small blue status indicator at the top-right and a bold title.
By clicking the status indicator, users can set a notification as read.
Read notifications are greyed grayed out and have a non-bold title.
Both tabs have an action to set all notifications as "read" to the left of the content switch.

...

The Toast Notification appears in the top-right corner and visually floats above the dashboard.
Only one toast notification Toast Notification can be visible at a time.

The color of the toast notification Toast Notification depends on the type of notification it contains.
The general layout stays the same between notifications, with the progress notification as the only exception. Progress notifications include a progress bar under the description.Progress Noti

• 01 Notification Icon – Signals the type of notification and matches the icon in the header, with the exception of except for the progress notification.
• 02 Title
• 03 Time Stamp – Shows when the notification popped up.
• 04 Close Action – Allows the user to close the toast notification.
• 05 Description – A short text explaining the notification.
• 06 Actions – Influence the process in progress.

...

• 01 Notification Icon – Signals the type of notification and matches the icon in the header, with except for the exception of the progress notification.
• 02 Title
• 03 Time Stamp – Shows when the notification popped up.
• 04 Close Action – Allows the user to close the toast notification.
• 05 Description – A short text explaining the notification.
• 06 Actions – Influence the process in progress.
• 07 Progress Bar – Actively shows updates on the progress.

Inline Notifications

tba

Best Practices

• global vs. local notifications

Local Notification

...

For more information on the component: Inline Notification

Inline Notifications have four states, determined by importance. The content can vary by use case.

• Error Notification — Colored red; signals critical errors.
• Warning Notification — Colored orange; announces problems that may result in errors.
• Success Notification — Colored green; signals a successful process.
• System Notification — Colored blue; reports system information.

Image Added

The Inline Notification is part of boath Local and Global Notifications.

Local Inline Notifications

Their realm of influence is limited to the dashboard or boardlet they appear in and they are not listed in the Notification Panel. Inline Notifications are not popups and thereby influence the layout of the boardlet they appear in.

Global Inline Notifications

Best Practices

Local and Global Notifications

Local Notifications are strictly tied to the dashboard they appear in and are static.

[TODO: when to use]

Global Notifications appear regardless of the current dashboard. They are not tied to a specific boardlet and not dependent on user interaction to appear. [TODO: when to use]

Inline and Toast Notifications in Global Notification

Type of Notification

Notification Flow

Static Notification

This flow starts with a static toast notification. The user can interact with the notification by clicking the close action or the notification itself. If the user does not interact with the notification, it disappears after a set duration.

By clicking the close action, the notification closes and [tba]the pop-up, and the notification will be set as "read".
By clicking the notification itself, users open the Notification Panel.

The notification might have actions or links attached. If the user interacts with them, the action is activated, it opens the [tba]the notification closes, and it is set to "read".

Progress Notification

This flow starts with a progress toast notification. The progress is displayed in the header to the left of the notification icon and in the toast notification. During the process, the user may be able to cancel or stop the process using actions inside the toast notification.

...