Tree

A generic, customizable tree. Author the nodes by hand with any icon, or bind a data hierarchy to it.

Reach for it when you need:

• A navigable equipment hierarchy
• A structured picker driven by a query

Component name: TreeView · Category: Display

In the palette: A generic, customizable tree — author nodes with any icon, or bind a data hierarchy

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
source	enum	authored	authored = build the tree in the editor. data = map a bound array ({{query.tree}}) or static rows. Options: authored · data.
nodes	array	[{"id":"n1","label":"Group A","icon":"Folder","children":[{"… (truncated)	The tree nodes. Each has its own label, icon, colours and children.
↳ nodes.id	string	""	Stable id (auto-filled if blank).
↳ nodes.label	string	New node	—
↳ nodes.icon	icon	""	Pick any icon from the library.
↳ nodes.iconColor	color	""	—
↳ nodes.color	color	""	—
↳ nodes.badge	string	""	Optional trailing badge text.
↳ nodes.selectable	boolean	true	—
↳ nodes.children	array	[]	—
↳ nodes.children.id	string	""	Stable id (auto-filled if blank).
↳ nodes.children.label	string	New node	—
↳ nodes.children.icon	icon	""	Pick any icon from the library.
↳ nodes.children.iconColor	color	""	—
↳ nodes.children.color	color	""	—
↳ nodes.children.badge	string	""	Optional trailing badge text.
↳ nodes.children.selectable	boolean	true	—
↳ nodes.children.children	array	[]	—
↳ nodes.children.children.id	string	""	Stable id (auto-filled if blank).
↳ nodes.children.children.label	string	New node	—
↳ nodes.children.children.icon	icon	""	Pick any icon from the library.
↳ nodes.children.children.iconColor	color	""	—
↳ nodes.children.children.color	color	""	—
↳ nodes.children.children.badge	string	""	Optional trailing badge text.
↳ nodes.children.children.selectable	boolean	true	—
↳ nodes.children.children.children	array	[]	—
↳ nodes.children.children.children.id	string	""	Stable id (auto-filled if blank).
↳ nodes.children.children.children.label	string	New node	—
↳ nodes.children.children.children.icon	icon	""	Pick any icon from the library.
↳ nodes.children.children.children.iconColor	color	""	—
↳ nodes.children.children.children.color	color	""	—
↳ nodes.children.children.children.badge	string	""	Optional trailing badge text.
↳ nodes.children.children.children.selectable	boolean	true	—
↳ nodes.children.children.children.children	array	[]	—
↳ nodes.children.children.children.children.id	string	""	Stable id (auto-filled if blank).
↳ nodes.children.children.children.children.label	string	New node	—
↳ nodes.children.children.children.children.icon	icon	""	Pick any icon from the library.
↳ nodes.children.children.children.children.iconColor	color	""	—
↳ nodes.children.children.children.children.color	color	""	—
↳ nodes.children.children.children.children.badge	string	""	Optional trailing badge text.
↳ nodes.children.children.children.children.selectable	boolean	true	—
data	array	[]	Bind to {{query.tree}} or a static array. Nested (children[]) or flat (parentField).
idField	string	id	—
labelField	string	name	—
iconField	string	icon	Row field holding an icon-library name.
childrenField	string	children	Nested mode: the child array field.
parentField	string	""	Set for FLAT data: the field pointing at the parent id. Empty = nested.
selectionMode	enum	single	Options: none · single · multiple.
showSearch	boolean	false	—
showTreeLines	boolean	true	Draw the connector lines between parents and children.
defaultExpanded	enum	roots	Options: none · roots · all.
indent	number	20	Width (px) of each depth column.
rowHeight	number	28	—
borderless	boolean	false	—
truncate	boolean	true	Truncate long labels with an ellipsis. Off = let the label overflow — then 'overflow' decides scroll vs clip.
overflow	boolean	true	When 'truncate' is OFF: allow horizontal overflow — long labels scroll sideways instead of being clipped.
selectedItem	object	{}	Output (single): the selected node as { id, label, path, node }. Bind e.g. {{ <name>.selectedItem.label }}.
selectedItems	array	[]	Output (multiple): the selected nodes as an array of { id, label, path, node }.
expandedIds	array	[]	Output (bind from this): currently-expanded node ids.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
nodeSelect	Node select	Tree	The selected node.
nodeDoubleClick	Node double click	Tree	The node.
nodeExpand	Node expand	Tree	The expanded node.
nodeCollapse	Node collapse	Tree	The collapsed node.
selectionChange	Selection change	Tree	The current selection.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

To browse the tag namespace specifically, use Tag Browser instead.

Bound to a query Changed in 1.0.8

• It no longer blanks on a refresh. A query-bound tree used to show "No data" and then pop in, and blank again whenever any other binding on the widget re-settled. It now shows a skeleton on the first load only, and afterwards keeps the rows on screen behind a small loading pill until the new result lands. A refreshBinding after an insert adds the one new row; nothing else redraws, and what was expanded stays expanded.
• A children column built by json_agg works. PostgreSQL hands it over as a JSON string, and a hierarchy nested that way was silently flattened to its roots. It is now parsed.
• Duplicate ids no longer collide. Expanding one folder used to open its twin.
• The selection follows the data. After a refresh, selectedItem no longer points at a node the data no longer has.

Ticking a folder Changed in 1.0.8

With multi-select on, a folder selects as a folder: ticking it takes its whole subtree, unticking clears the subtree and the folders above it, and a folder's box shows checked, unchecked or indeterminate from the leaves below it. selectedItems lists the selection in the order the tree shows it.

Search keeps up on a tree of a few thousand nodes, and the search box can be cleared with its × or Escape.