EVOLV/wiki/manuals/node-red/flowfuse-ui-text-manual.md

FlowFuse ui-text Manual (EVOLV Reference)

Source: https://dashboard.flowfuse.com/nodes/widgets/ui-text.html

Purpose

Read-only text display widget. Shows a label + value. Supports HTML in payload.

Properties

Property	Type	Dynamic	Notes
group	ref	No	Parent ui-group
width	int	No	Columns
height	int	No	Row units
label	string	Yes	Left-side label text
format	string	No	Template: {{msg.payload}} or {{msg.myProp}}
layout	string	Yes	See layout options below
style	bool	No	Enable custom font/size/color
font	string	Yes	Font family (when style enabled)
fontSize	string	Yes	e.g. "16px", "1.2rem"
color	string	Yes	Text color (when style enabled)

Layout Options

Value	Description
row-left	Label and value left-aligned
row-center	Centered on row
row-right	Right-aligned
row-spread	Label left, value right
col-center	Stacked vertically, centered

Input

msg.payload — string or number. HTML is rendered if present.

Dynamic Properties (msg.ui_update)

msg.ui_update = {
  label: "New Label",
  layout: "row-spread",
  font: "monospace",
  fontSize: "14px",
  color: "#ff5722"
};

Also: msg.class — add CSS class to the widget container.

Value Formatting

The format field supports template syntax and JSONata:

• {{msg.payload}} — raw value
• {{msg.myProp}} — any msg property
• JSONata in Value property: $round(payload, 1)

HTML Support

msg.payload can contain HTML tags. Useful for inline formatting:

msg.payload = '<b>Active</b> — 3 pumps online';

EVOLV Key Rules

1. Use layout: "row-spread" for status lines (label left, value right).
2. For multi-field status, build a formatted string in the Function node and send as single payload.
3. Keep text widgets height: 1 for compact status rows.
4. Use format: "{{msg.payload}}" (the default) — keeps it simple.
5. For direction arrows and styled status, use HTML in payload: ↑ filling | 142 m³/h | 35 min.