Get started with notifications

A notification card contains the following configurable areas:

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:
  • TemplateMarkdown, body: a string, which may contain inline Markdown formatting
  • TemplateList, list: a list of string pairs
  • TemplateCustom, templateOptions and templateData: a custom template and specific data to populate it. For more information, see Customize notifications.
• Buttons: A row of buttons for the user to take action or dismiss the notification.
  • button: A list of (at most 4) ButtonOptions for buttons to display. Refer to Buttons within a notification for details.

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);