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.
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.