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

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

import { create} from "@openfin/workspace/notifications";

const exampleNotification: 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")
      }
    }
  ]
};

create(exampleNotification);