Notification ui-notification
Added In: v0.5.0
Known in Dashboard 1.0 as a "Toast", this widget displays text/HTML in a small window that will appear on the screen for a defined duration of time (timeout
) and at a defined location on the screen (position
).
If you want to have the notification show indefinitely, you can set timeout
to 0
. It will not be possible to close the notification manually unless you also set allowDismiss
or allowConfirm
to true
.
Properties
Prop | Dynamic | Description |
---|---|---|
UI | Unlike most widgets, notifications are owned by a "UI", not Group. This allows for notifications to be displayed across all pages. | |
Position | The position on the screen whethere the notification will appear. | |
Color | The color that should be used for the notification border. | |
Timeout | Number of seconds before the notification will automatically close. | |
Show Countdown Bar | Whether or not to show a reducing progress bar to indicate the time remaining before the notification will close. | |
Allow Manual Dismissal | Show a button for users to dismiss the notification. Otherwise, will only close after Timeout. | |
Allow Manual Dismissal - Button Label | If "Allow Manual Dismissal" is enabled, this is the label for the button. | |
Allow Manual Confirmation | Show a button for users to confirm the notification. Otherwise, will only close after Timeout. | |
Allow Manual Confirmation - Button Label | If "Allow Manual Confirmation" is enabled, this is the label for the button. | |
Accept Raw | Whether you're passing in raw HTML that should be processed client-side. | |
Class | Appends CSS classes to the widget |
Dynamic Properties
Dynamic properties are those that can be overriden at runtime by sending a particular msg
to the node.
Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.
Prop | Payload | Structures | Example Values |
---|---|---|---|
Disabled State | msg.enabled | Boolean | |
Allow confirmation | msg.ui_update.allowConfirm | Boolean | |
Allow dismissal | msg.ui_update.allowDismiss | Boolean | |
Color | msg.ui_update.color | String | |
Confirmation button text | msg.ui_update.confirmText | String | |
Dismissal button text | msg.ui_update.dismissText | String | |
Display time(out) | msg.ui_update.displayTime | Number | |
Position | msg.ui_update.position |
| |
Progress bar color | msg.ui_update.progressColor | String | |
Accept raw html | msg.ui_update.raw | Boolean | |
Show | msg.ui_update.show | Boolean | |
Show countdown bar | msg.ui_update.showCountdown | Boolean |
Example
Example of rendered Notification in a Dashboard with a progress bar showing how long left until it will automatically close.
This notification was created using a msg.payload
of:
<h3>Generated Notification</h3><p>This is custom HTML injected into <b>Node-RED</b></p>