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
clickorcloseevents - 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")}
}
}
]
});
Notification card created with basic properties and a button.
For more details, refer to Buttons within a notification.
Create a persistent notification with an urgency indicator
You can make the notification toast stay visible on the desktop. When you do this, you must add an urgency indicator to help the user understand why the toast is staying around.
Add the sticky property to your notification, and an indicator property
create({
title: 'Persistent Notification', body: 'I stick around until you act on me',
category: 'Warnings',
sticky: 'sticky' // makes the toast persist until clicked indicator: {
type: "warning",
text: "Limit exceeded"
}
});For more details, refer to Persistent notifications and Urgency of a Notification.
Updated 27 days ago