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.

In Notifications v2 or later a new package requires you to explicitly register a notifications provider before Notification Center starts on users' desktops. In previous versions, Notification Center started automatically. For more information, see Register notifications.

🚧

openfin-notifications package deprecated

You can continue to work with the previous approach, which starts Notification Center automatically on users' desktops. But the openfin-notifications package is now deprecated and will no longer be supported in a future release.

Create a basic notification

1. Import the appropriate package. See Register notifications.

2. Define and create the notification illustrated in the card image in this article:

   TypeScript

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