Update a notification

If a notification contains information that may change, you might want to update it. For example, some information might not be available when the notification is created, and some information might change over time. This can be preferable to creating a second notification, to ensure that the end-user does not mistakenly act on outdated information.

User stories

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

  • As a dealer, I want to see a notification as soon as a request for quote (RFQ) is created, even if the price is not available yet.

  • As a dealer, I want to see the price for a particular RFQ as soon as it is available.

  • As a dealer, I want to know if an RFQ has expired.

Recipe

To update a notification, you call the update() function, passing it the id of the notification and the new information to be applied. You can define the id as an argument to the create() function; if you do not define it, a value is provided in the id property of the Notification that resolves the promise returned by create().

The options you can update in a notification include:

  • buttons

  • customData

  • template type: "markdown", "list", or "custom"

  • The template content

    • "markdown" template: body

    • "list" template: list

    • “custom” template: only templateData; templateOptions cannot be updated.

Any of these items that is not explicitly set via the update() function is left in its original state. To remove an item, you must explicitly set it to an empty value. For example, to remove all buttons, use buttons: [].

If you call update() while the end-user’s pointer is hovering over a notification card, Notification Center automatically does the following:

  • Sets the opacity of the card content to 50% (“graying” it out).

  • Replaces the indicator text with NOTIFICATION UPDATED.

  • Replaces the buttons with a single OK button.

These changes ensure that the end-user cannot take an action that is no longer valid or is based on old information. If they click OK, the updated content of the notification card appears.

Example code

Original notification:

let nfn = await create({
  title = 'Request for Quote',
  template = 'list',
  id = 'nfn12345',
  list = {
    bid: '-2.250',
    spd: '3yr',
    numDealers: '25',
    body: 'A quote has been requested with the following details:"
  },
  customData: {
    quoteID: '12345',
  }, 
  buttons: [
    {
      title: 'Buy now',
      cta: true,
      onClick: {
        task: "buy-threshhold-stock",
      }
    },
    {
      title: 'Cancel Order',
    }
  ]
});

Updated notification:

nfn = await update({
  id: nfn.id,
  template: 'markdown',
  body: 'Quote timed out'
  buttons: [
    {
      title: 'Requote',
      cta: true,
      onClick: {
        task: "requote-stock",
      }
    },
    {
      title: 'Cancel',
    }
  ],
});