Files
EVOLV/wiki/manuals/node-red/flowfuse-ui-text-manual.md
znetsixe 5ae8788fd7 wiki: crisp overhaul — no decoration emoji, all 9 master pages refactored
Source-tree mirror of EVOLV.wiki.git refactor (27a42ee on wiki.git):

- 7 master pages rewritten with clean design (Home, Architecture,
  Topology-Patterns, Topic-Conventions, Telemetry, Getting-Started,
  Glossary). Tables and Mermaid for visuals, gitea alert callouts for
  warnings, shields badges for metadata only. No emoji as decoration.
- Archive.md becomes a removal-changelog pointing readers to git
  history and to the successor pages.
- _Sidebar.md updated to navigate the new flat-name layout.
- Concept / finding / manual pages: uniform mini-header (badges +
  "reference page" callout) added without rewriting domain content.
- Every internal link now uses the flat naming that resolves on the
  live gitea wiki (Concept-ASM-Models, Finding-BEP-..., etc.).

On wiki.git: 29 Archive-* pages hard-deleted (the git history
preserves them; Archive.md documents the removal).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 22:24:51 +02:00

2.5 KiB

FlowFuse ui-text Manual (EVOLV Reference)

code-ref type

Note

Reference page. Maintained for context; not regenerated by code. See Home for current top-level navigation.

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.