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 produced 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 following example shows how to apply basic options to generate the illustrated card:

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

      icon: 'https://cdn.openfin.co/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://myexample.com/news/employment”, "_blank")
          }
        }
      ]
    };

    create(exampleNotification);
    ```