OpenFin Notification Center includes a client API enabling the creation and organization of uniform desktop notifications. Notifications are great way to enhance an end-user’s experience with an OpenFin application, while ensuring that the user’s attention is drawn to pertinent and actionable tasks.

The Notification Center app organizes notifications into a central location for ease of access. Users can easily discover their notifications through search and sort (by date-time and priority) functions and configure desktop level settings (such as location). The Notification Center app ships along side your application when included in your project and is accessible via a Notification icon in the System Tray.

Use this API and the Notification Center app to:

• Create persistent notification toasts
• Attach event handlers for click or close events
• Launch OpenFin applications currently hidden or closed on the desktop
• Style a notification’s content with markdown and images
• Create small forms to collect user responses

System Requirements

• Access to OpenFin’s CDN (https://cdn.openfin.co/)
• OpenFin Runtime 19.89.57.15
• Windows 10
• OpenFin Notification Center npm library

Set up

Add the package as a dependency for your app:
> npm install openfin-notifications

📘

Note

• The npm library is updated when the API is changed.
• Updating the npm library does not update the version of the Notification Center app.

Usage

Create a basic notification

Once your app has the client library installed, you can create a simple notification with title, body, and category properties. Copy and paste the following code into your app, and call it.

import {create} from 'openfin-notifications'; 

create({
  title: 'Hello!', 
  body: 'This is your first notification', 
  category: 'Greetings', 
})

Create a notification with a button

Add the buttons property to your notification, with a handler for click events:

create({
  title: '3 weeks to go until \#FinJSatHome', body: 'Just three weeks left until \#FinJSatHome\! Join us to hear how web technologies are causing a revolution in the capital markets...', category: 'Event', 
  category: 'Events',
  buttons: [
    {
      title: 'Sign Up Now', 
      onClick: ()=> {window.open("https://www.finjs.com/", "_blank")}
      }
    }
  ]
});

For more details, refer to Buttons within a notification.

Create a persistent notification with a color indicator

You can make the notification toast stay visible on the desktop. When you do this, you must add an indicator to help the user understand why the toast is staying around.

Add the sticky property to your notification, and an indicator property, with a priority, color, and a brief text description.

create({
  title: 'Persistent Notification', body: 'I stick around until you act on me', 
  category: 'Warnings', 
  sticky: 'sticky', // makes the toast persist until clicked 
  priority: 3,
  indicator: {
    color: "yellow",
    text: "Limit exceeded" 
  }
});

For more details, refer to Persistent notifications and Urgency of a Notification.