Notification Center overview

OpenFin Notification Center is an application that helps users stay up-to-date and notified of events within an OpenFin application. It is home to all notifications from OpenFin applications.

The Notification Center API provides application developers with a uniform way to create and organize desktop notifications as well as respond to notification events (notification clicked, closed, etc). Notifications are displayed as toasts as well as listed and organized in the Notification Center application. These notifications can be configured with buttons, icons, and colored indicators and further customized with your own templates. Notifications can also contain actions to help users stay up-to-date and notified of events within an OpenFin application.

The Notification Center is home to all OpenFin application notifications and is accessed by clicking on the Notification icon in the system tray.

Dependencies

Features

  • Notifications appear as toasts and in a centralized Notification Center app.
  • Persist notification toasts until dismissed.
  • Expire notifications by a specified date/time.
  • Attach handlers for click and close events.
  • Applications are restarted and receive actions if the end-user interacts with a notification when the application is closed.
  • Limited formatting of body content with Markdown and image (.ico files) support.
  • Extensive customization through custom notification templates.
  • Can use a UI color theme provided by a registered Workspace Platform

Creating a notification

To create a basic notification for Notification Center only takes a few lines of code. The following example show how to construct a basic notification using the title, body, and category properties. To create a notification, call the create() method with these properties in your application.

create({
    title: '3 weeks to go until #FinJSatHome',
    body: 'Just three weeks left until #FinJSatHome! Join us to hear how web technologies are causing a revolution in the capital markets...',
    category: 'Event',
    buttons: [
        {
            title: 'Sign Up Now',
            onClick: {
                "task" : "sign-up"
            }
        }
    ]
});

Sample Notification

Notification card created with basic propertiesNotification card created with basic properties

Notification card created with basic properties

Parts of a notification

A notification card, with its parts annotatedA notification card, with its parts annotated

A notification card, with its parts annotated

Visual customization

You can customize several aspects of the display of a notification:

  • Indicator color: Refer to Urgency of a notification
  • Indicator text
  • Application icon
  • Title text
  • Body content: Text with simple formatting or a list of data pairs.

Further, with custom templates, you can change the arrangement of the basic sections and create your own layout of text, lists, and images. Refer to Customize notifications for details.

Notification behavior

You can configure various aspects of the behavior of a notification through additional options:

  • Expiration, using the expires option with a date value
  • Toast type, to keep notification toasts visible on the desktop until the user interacts with them or to suppress desktop toasts altogether.
  • Buttons, to enable users to respond to a notification
  • Triggers, to respond to user actions that are not button-clicks
  • Actions, the programmatic implementation of a button or trigger

Expiration

Notifications are set to persist in the Notifications Center app by default. However, a notification can be configured to expire by adding the expires property as a NotificationOption as shown below.

create({
    ...
    expires: date;
});

Control over toasts

In addition to a notification card in the Notifications Center app, by default, a notification produces a pop-up "toast" on the desktop, which disappears after a few moments. In contrast to cards, toasts are transitory unless you use the sticky property with the sticky value (vs. the default value transient) to make them persist until the user dismisses them. Refer to Persistent notifications for more details.

Alternatively, starting in Workspace 6.0, you can suppress desktop toasts completely by using toastType: 'none'. A card appears for the notification in the Notification Center application, but no toast appears on the desktop. Refer to Notifications without toasts for details.

create({
    ...
    toastType: 'sticky';
});
create({
    ...
    toastType: 'none';
});

Color coding

A notificationIndicator adds a colored banner at the top of the notification card or toast. An indicator consists of a text string summarizing the condition and a color, which can be one of the following:

  • "red"
  • "green"
  • "yellow"
  • "blue"
  • "purple

It is your choice to assign meanings to these colors.

Prioritization

You can assign a priority to notifications, to indicate their relative urgency. The priority option is an integer from 1 to 4, with 4 being the most urgent.

Categories

Categories describe the context of a notification. This allows you as an application provider to control different types of notifications that are raised by your application based on context. For example, if you create calendar notifications you can categorize them for the end-user. Categories like Upcoming Events for notifications when an event is about to start and Event Start for notifications for when an event starts are helpful for the user, as they can distinguish what category the notification belongs to.

To set a category, add the category NotificationOption to the notification and set the value to a string.

Receiving information back

You can get information back about what happens to a notification, including that it expired or that the user interacted with it in various ways. You can define buttons for simple responses or forms for more complex ones. You can also choose to get information when a user selects or closes a notification card without clicking a button.

Refer to the following articles for more information:

Application relaunch

You can configure buttons that relaunch an application if it’s closed. For example, if an application is closed and the user views a notification from it, the user can click a button in the notification to relaunch the associated application.

To permit relaunch of an application:

  1. Create a button.
  2. Configure it with the onSelect property and a corresponding action.

Did this page help you?