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

FlowFuse Config Nodes Manual (EVOLV Reference)

Sources:

• https://dashboard.flowfuse.com/nodes/config/ui-base.html
• https://dashboard.flowfuse.com/nodes/config/ui-page.html
• https://dashboard.flowfuse.com/nodes/config/ui-group.html
• https://dashboard.flowfuse.com/nodes/config/ui-theme.html

---

ui-base — Dashboard Root

Property	Type	Notes
path	string	URL path after host, e.g. /dashboard
appIcon	string	URL to square icon (192–512px) for PWA
includePagePath	bool	Show page paths in side nav
navigationStyle	string	"default", "fixed", "icon", "temporary", "none"
headerStyle	string	"default" (scrolls), "fixed" (sticky), "hidden"
headerContent	string	"page", "dashboard", "both", "none"

---

ui-page — Dashboard Page

Property	Type	Notes
name	string	Displayed in nav and header
ui	ref	Parent ui-base
path	string	URL path segment, e.g. /influent
icon	string	Material Design icon (no mdi- prefix)
theme	ref	ui-theme reference
layout	string	"grid", "fixed", "notebook", "tabs"
order	int	Position in navigation
breakpoints	array	See breakpoints table

Layout Types

Layout	Description
grid	Responsive grid, widgets flow into columns
fixed	Absolute positioned, no responsive reflow
notebook	Single-column stacked groups
tabs	Each group becomes a tab

Default Breakpoints (grid/notebook/tabs)

Name	Min Width	Columns
Mobile	0 px	3
Medium	576 px	6
Tablet	768 px	9
Desktop	1024 px	12

---

ui-group — Widget Container

Property	Type	Notes
name	string	Group title (shown if showTitle: true)
page	ref	Parent ui-page
width	string/int	Column span (e.g. "4" = 4 of 12 columns)
height	string/int	Minimum row height ("1" = auto-grow)
order	int	Render order on page
showTitle	bool	Show name as header
className	string	Custom CSS class
groupType	string	"default" (visible) or "dialog" (triggered)

Sizing Rules

• Group width sets column span out of page's total columns (default 12).
• Group height is a minimum — group grows to fit content.
• Widget width within a group is relative to the group's width.
• Widget height is in row units (1 unit = theme's Row Height setting).

---

ui-theme — Appearance

Property	Type	Default	Notes
colors.surface	color	—	Header & nav background
colors.primary	color	—	Buttons, sliders, focus rings
colors.bgPage	color	—	Page background
colors.groupBg	color	—	Group background
colors.groupOutline	color	—	Group border color
sizes.rowHeight	string	"default"	"default" (48px), "comfortable" (36px), "compact" (32px)
sizes.pagePadding	string	"12px"	CSS shorthand (e.g. "12px 6px")
sizes.groupGap	string	"12px"	Space between groups
sizes.groupBorderRadius	string	"4px"	Group corner rounding
sizes.widgetGap	string	"12px"	Space between widgets in group

---

EVOLV Key Rules

1. 12-column grid with 4-col groups gives a clean 3-column layout at desktop.
2. Set height: "1" on groups to let them auto-size (content determines height).
3. Use order on groups to control left-to-right placement within a row.
4. For compact dashboards: theme rowHeight: "compact", pagePadding: "6px", groupGap: "6px", widgetGap: "6px".
5. Widget order within a group determines top-to-bottom flow (lower = higher).
6. Gauge sizing guide: tank gauge width:2, height:4 + 3/4 gauge width:2, height:3 fits well in a 4-col group alongside a status text width:4, height:1.