Buttons within a notification

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.

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

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.

You can define up to four buttons that include the cta property, and an additional four buttons that do not include this property. If you define more than two buttons that include the cta property, they are combined into a single button with a dropdown menu. If you define more than one button without the cta property, they are combined into a single button with a dropdown.

In Notification Studio, the cta property is represented by the option to mark a button as Primary.

Code example

const notification = {
   "title": "Stop Loss of 47.22 for Brent Oil Futures reached",
   "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.