Urgency of a notification

With many notifications appearing over time, users may have trouble distinguishing notifications that require immediate action from those that are purely informational or those that require less time-sensitive action.

User story

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

As a finance user, I want to know whether a notification is about a failure or warning, so I can prioritize fighting fires above other issues.

Recipe

To help users see the urgency of a notification, you can use a numeric priority member and a NotificationIndicator. The priority is an integer from 1 to 4, with 1 as the default and 4 as the most urgent. A NotificationIndicator consists of a color string and a text string. The text gives a brief summary of the condition (limited to 32 characters), such as “Trade failed.” The color value can be one of the following:

• "red"
• "yellow"
• "green"
• "blue"
• "purple

Code example

const notification = {
   "title": "US added 138K jobs; Lower than target 185K",
   "category": "News",
   "body": "After more than a decade of growth, U.S. nonfarm payrolls shrunk by 701,000, and the unemployment rate rose to 4.4%...",
   "icon": "http://cdn.openfin.co/examples/notifications/company-B.png",
   "priority" : 3,
   "indicator": {
       "color": "yellow",
       "text": "News Alert"
   }
}
create(notification);

Best practice

Use indicators with caution, as over-using them can lead users to ignore notifications that are truly urgent.

🚧

Backward compatibility

Starting in version 1.10.1 of the Notification Center API, the type member of the NotificationIndicator is deprecated, and its functionality is replaced with color on the indicator and priority on the notification. Values of type in existing code are treated in the following way:

• "type" : "success" is equivalent to "priority": 2 and "color" : "green".
• "type" : "warning" is equivalent to "priority": 3 and "color" : "yellow".
• "type": "failure" is equivalent to "priority": 4 and "color": "red.