Get started with notifications

A notification card contains the following configurable areas:

1557

A notification card, with its parts annotated

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

  • Indicator: A colored area with text describing the nature of the notification.
    • indicator.text
    • indicator.color
  • Header: The app’s name and icon, a timestamp, and a title.
    • icon: the application icon
    • date: the timestamp; current date and time are used if not specified.
    • title the title, formatted as a headline
  • Body: The details of the notification. It can be customized by using one of the following, based on the template used:
  • Buttons: A row of buttons for the user to take action or dismiss the notification.

Create a basic notification

The following example shows how to apply basic options to generate the illustrated card:

const notification = {
  indicator: {
    color: “orange”,
    text: “News Alert”,
  },
  icon: “https://cdn.openfin.co/examples/notifications/company-B.png”,
  title: “US added 138K jobs; Lower than target 185K”,
  body: “After more than a decade of growth, U.S. nonfarm payrolls shrunk by 701,000, and the unemployment rate rose to 4.4%...”,
  buttons: [
    {
      title: “Read More”,
      type: “button”,
      cta: true,
      onClick: { 
        window.open("https://myexample.com/news/employment”, "_blank")
        }
    }
  ]
};
 
 create(notification);