Files
EVOLV/manuals/node-red/flowfuse-ui-text-manual.md
znetsixe 6a6c04d34b Migrate to new Gitea instance (gitea.wbd-rd.nl)
- Update all submodule URLs from gitea.centraal.wbd-rd.nl to gitea.wbd-rd.nl
- Add settler as proper submodule in .gitmodules
- Add agent skills, function anchors, decisions, and improvements
- Add Docker configuration and scripts
- Add manuals and third_party docs
- Update .gitignore with secrets and build artifacts
- Remove stale .tgz build artifact

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 21:07:04 +01:00

2.2 KiB

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.