NotificationBar

Introduction

A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is (since 1.13.0) per default at the bottom of the corresponding page. If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar - as seen in Example1.
IMPORTANT: to display the bar an attached listener is mandatory! Otherwise the bar won't be visible at all since the bar doesn't set its display-mode itself.

Resizing of the bar can be enabled or disabled. If the bar was maximized all messages are listed among each other with a scroll bar if needed.

Since version 1.19.0 it is possible to mark single messages as read-only. A corresponding example can be found under example 4. Furthermore NO selected event is fired for read-only messages. Please note that all messages are treated as selectable ones per default.

Detailed information of properties etc. can be found in the API documentation

Messages within the NotificationBar

Messages are used in two different way. Just as a kind to notify the user that something happened within the application i.e. if there is a new Feeder-item etc. The other kind is to display success, error or information messages. These messages are displayed in a separate part of the bar.

Messages can contain a specific icon. It is recommended to use an icon that doesn't exceed 32 pixels.

If a message-level was set a default icon is used. It is also possible to use another icon instead.

Notifiers within the NotificationBar

To show any messages or notifications a so called Notifier must be added to the bar that should be responsible for one kind of messages or notifications. This Notifier handles all corresponding messages and interacts with the bar to display them. The lastes message within a Notifier is shown on top. The bar differs in two kinds of Notifiers: a normal Notifier that monitors something for the application (i.e. new Feed-items) and the MessageNotifer.
A MessageNotifier is responsible to show messages with a message level. These levels could be information, warning or an error. There can be messages without any level as well - that's up to the application. The latest message that was added to the MessageNotifier is shown within the message area of the MessageNotifier (just aside the MessageNotifier). There is only one possible MessageNotifier at a time. Setting another one will overwrite the current one.
In version 1.8.5 the color-handling of the MessageNotifier was changed. Before this the color of the message counter was always red. From this version the colors change corresponding to the message levels. If there are several messages within the MessageNotifier the message with the highest level defines the color. The following table shows the levels from highest to lowest:

Level
Color
Error
Red
Warning
Yellow
Success
Green
Information / no level
Blue

As default a Notifier shows up to 5 messages. If a Notifiers contains more than that a scroll bar is provided.

A Notifier can contain an icon as desired. If there is no specific icon set a default icon will be used. It is recommended to use an icon that doesn't exceed 24 pixels.

To react on any selectesd item a corresponding listener must be attached to the Notifier.

For detailed information please see the Notifier's API documentation

Example 1 (special slim)

This example shows a bar with one Notifier with one single message. The Notifier uses a default icon. Resizing of the NotificationBar is disabled. Additionally this NotificationBar is a bit smaller than per default.

Example 2

This example shows a bar with two Notifiers with several messages. Some messages contain icons. One Notifier uses another icon. Resizing of the NotificationBar is enabled.

Example 3

This example shows a bar with two Notifiers and a MessageNotifier with several messages. Some messages contain icons. Some messages of the MessageNotifer contain a message level with the corresponding default icon. One Notifier uses another icon. Resizing of the NotificationBar is enabled. There is a listener that is attached to any clicks on a message.

The sample code removes one message (the last one) each time the bar is hidden. When it is displayed again, the message counter is adapted to the current number of messages and its color is chosen according to the highest priority of all messages.

Example 4

This example shows how to use the new feature of read-only messages.

API Documentation

See API documentation