[uibuilder] How to show a notification "toast" to clients from Node-RED - no code required

A common requirement when using web UI's is to be able to notify clients of something.

uibuilder can do this from simple input data. You simply need to send the following msg data to a uibuilder node.

{
  "_uib": {
    // This can actually be anything, if it doesn't exist, 
    // the toast will appear in the default location
    "componentRef": "globalNotification",
    // Note that most if not all of these are optional
    "options": {
      // These can contain HTML - note the inclusion of the payload from the upstram msg
      "title": "This is the <i>title</i>",
      "content": `This is content <span style=\"color:red;\">in addition to</span> the payload<p>${msg.payload}</p>`,
            
      // Use 1 of the following 2 - click msg if no auto hide:
      "autoHideDelay": 2500,
      // "noAutoHide": true,

      // If false or not included, msgs stack above each other.
      "appendToast": true,

      // See "Recommended surfaces" in uib-brand.css. Normally
      // 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'
      "variant": "info",
    }
  }
}

The output at the client page overlays the whole page. The user can click anywhere outside the notification to cancel it.

This is a really simple way to get the users attention. :grin: And once again, it is worth noting that no front-end framework is needed for this. It is vanilla HTML. It will, of course, work even if you are using a framework as well as when you are not.

This will work from uibuilder v5.1 onwards. Future enhancements (post v6.1) to this are planned. Including making the messages more accessible (meeting W3C accessibility standards). Slotting the message into the page better and allowing more user actions.

This topic was automatically closed after 30 days. New replies are no longer allowed.