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

# FlowFuse `ui-text` Manual (EVOLV Reference)

![code-ref](https://img.shields.io/badge/code--ref-9ab9f6b-blue) ![type](https://img.shields.io/badge/type-manual_(third-party)-orange)

> [!NOTE]
> Reference page. Maintained for context; not regenerated by code. See [Home](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`)

```js
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:
```js
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`.