Skip to content

Text ui-text

Try Demo

Displays a non-editable text field on the user interface. Each received msg.payload will update the value shown alongside the (optional) label.

Properties

PropDynamicDescription
GroupDefines which group of the UI Dashboard this widget will render in.
SizeControls the width of the button with respect to the parent group. Maximum value is the width of the group.
LabelThe text shown within the button.
LayoutChoose how to layout your label (if deifned) & value.
StyleCheckbox to define whether or not to include custom styling for the text. Enabling this will then show the below options.
FontIf "style" is enabled, this will define the font of the text.
Text SizeIf "style" is enabled, this will define the size of the text.
Text ColorIf "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:

Adding a suffix to a UI Text elementExample 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:

html
<a href="https://flowfuse.com" target="_blank">FlowFuse</a>

as a msg.payload would render:

HTML content in Text

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:

HTML content in TextExample 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.

PropPayloadStructuresExample Values
Labelmsg.ui_update.labelString
Layoutmsg.ui_update.layoutString<'row-left', 'row-center', 'row-right', 'row-spread', 'col-center'>
Fontmsg.ui_update.fontString
Font Sizemsg.ui_update.fontSizeString
Colormsg.ui_update.colorString
Classmsg.classString

Example

Examples of TextExamples of variants of ui-text rendered in a Dashboard.