Welcome to OpenFin Docs

Explore our guides, resources and references for building with OpenFin

Get Started

Buttons within a notification

Notifications can be one element in an overall workflow for your application. You can use buttons within a notification to enable the user to take action directly from the notification. Clicking a button can send data back to the application that you can use to learn from or to take further action in the workflow.

Image showing usage of button and CTAImage showing usage of button and CTA

Image showing usage of button and CTA

User story

Suppose your management has given you the following user story to implement:

As a trader, I want to make quick responsive decisions to a trade, so that I don’t miss out on a stock.

Recipe

You can use the buttons configuration option to define up to four buttons per notification.

Use the onClick property to define the result returned to your application by the button.

Use the cta property to indicate that a button represents the main "call to action" for the notification. It causes the button to be colored blue and therefore appear distinct from other buttons.

Code example

const notification = {
   "title": "Stop Loss of 47.22 for Brent Oil Futures reached",
   "category": "Trade",
   "body": "Your stop limit for Brent Oil has been reached. Proceed with the purchase of 1000 Futures?",
   "icon": "http://cdn.openfin.co/examples/notifications/company-T.png",
   "buttons": [
       {
           //Button that sends data to the app
           "title": "Buy Now",
           "type": "button",
           "cta": true, //makes the button prominent by coloring it blue
           "onClick": {
               "task": "buy-threshhold-stock",
               "customData": {
                   "message": "Example data to send back when this entry is clicked"
               }
           }
       },
       {
           //This button dismisses the notification and does not do anything else
           "title": "Cancel Order",
           "type": "button",
       }
   ]
};
 
 create(notification);

More info

You can bundle data into a notification, as shown in the customData field in the code example. Such data is not visible to the user, and is made available to the application when it receives a NotificationActionResult from the notification. For example, you could use it for a filename to access.

Best practice

Keep the amount of data sent in this way to a minimum: it consumes memory in the notification center.

Updated 4 months ago


Buttons within a notification


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.