Displays a non-editable text field on the user interface. Each received msg.payload
will update the value shown alongside the (optional) label.
Properties
Prop | Dynamic | Description |
---|---|---|
Group | Defines which group of the UI Dashboard this widget will render in. | |
Size | Controls the width of the button with respect to the parent group. Maximum value is the width of the group. | |
Label | The text shown within the button. | |
Layout | Choose how to layout your label (if deifned) & value. | |
Style | Checkbox to define whether or not to include custom styling for the text. Enabling this will then show the below options. | |
Font | If "style" is enabled, this will define the font of the text. | |
Text Size | If "style" is enabled, this will define the size of the text. | |
Text Color | If "style" is enabled, this will define the color of the text. |
Adding Prefixes & Suffixes
In Dashboard 1.0 an option existed called valueFormat
which allowed you to add a prefix or suffix to a ui-text
widget witin the node's configuration. Whilst valuable, this had a lot of security vulnerabilities, so with Dashboard 2.0 we made the decision to remove it..
Instead, we take a different approach, and use Node-RED's built-in "template" node:
Which renders:
Example of a rendered suffix on a UI Text element
We do this because this approach can be used far beyond just the ui-text
widget, and can be used to inject HTML content into any widget through dynamic properties.
Rendering HTML
The ui-text
widget supports HTML content (via msg.payload
). This allows you to render formatted text, links, images, and more.
Static HTML
For example, injecting:
<a href="https://flowfuse.com" target="_blank">FlowFuse</a>
as a msg.payload
would render:
Rendering msg.
Content
If you want to render the content of a msg.
and still wrap this with HTML, you can use Node-RED's standard template
to define the HTML structure:
With the content of the template
node set to:
Example of a "template" node to structure HTML content in a Text Node
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 |
---|---|---|---|
Label | msg.ui_update.label | String | |
Layout | msg.ui_update.layout | String<'row-left', 'row-center', 'row-right', 'row-spread', 'col-center'> | |
Font | msg.ui_update.font | String | |
Font Size | msg.ui_update.fontSize | String | |
Color | msg.ui_update.color | String | |
Class | msg.class | String |
Example
Examples of variants of ui-text rendered in a Dashboard.