Get started with notifications

A notification contains the following configurable areas:

You work with the properties of the NotificationOptions object to create or update a notification:

• Indicator: Optional banner to call attention to the rest of the notification. See Configure important notifications.

  • indicator.text

  • indicator.color

• Basic identifying information

  • icon: Optional image to help identify the application that sent the notification.

  • date: Optional timestamp. If not specified, defaults to current date and time.

  • title: Required title to introduce the notification. title and body are the only required properties.

• The main section, specified with a template. One of:

  • TemplateMarkdown, specified with the body property (can also be form): a string that can contain inline Markdown formatting.

  • TemplateList, specified with the list property: a list of string pairs.

  • TemplateCustom, specified with the templateOptions and templateData properties: a custom template and the data to populate it. For more information, see Work with custom notification templates.

• Buttons: A row of buttons for the user to take action or dismiss the notification.

  • button: a list of ButtonOptions. For more information, see Buttons in a notification.

You can add other elements, to help your users interact with the notification or to organize notifications in Notification Center. These elements include:

• Forms. See Forms in notifications

• Streams. See Streams of notifications

• Reminders. See Notification reminders

• Actionable fragments. See Work with actionable fragments

And you can configure a notification to persist on the desktop or to appear only in Notification Center, with the toast property.

Create a basic notification

info

The @openfin/workspace/notifications package is deprecated and will no longer be supported in a future release. The new package that replaces it, @openfin/notifications, has the exact same members as @openfin/workspace/notifications. To avoid future compatibility issues, we recommend that you replace the package name in your code at your earliest convenience.

info

Custom Notification Center manifest configuration is now placed in the host platform manifest. The options parameter for register() is now deprecated and will not be supported in a future release.

The notification shown on this page is defined like the following:

import * as Notifications from "@openfin/notifications";

await Notifications.register();

const exampleNotification: Notifications.BaseNotificationOptions =
{
  // banner at the top of the notification
  indicator:
  {
    color: 'orange',
    text: 'News Alert',
  },

  icon: 'https://EXAMPLE.COM/examples/notifications/company-B.png', //optional
  title: 'US added 138K jobs; Lower than target 185K', // required
  // TemplateMarkdown
  body: 'After more than a decade of growth, U.S. nonfarm payrolls shrunk by 701,000, and the unemployment rate rose to 4.4%...',
  // simple button
  buttons:
  [
    {
      title: “Read More”,
      type: “button”,
      cta: true,
      // see main article on buttons for more complex actions you can invoke with a button
      // this is the simplest possible example, provides only an informational link
      onClick:
      {
        window.open("https://EXAMPLE.COM/news/employment”, "_blank")
      }
    }
  ]
};

Notifications.create(exampleNotification);