Tag Browser
Browses the tag namespace as a tree and lets the operator select tags. It shows structure only — no live values.


Reach for it when you need:
- An engineering screen where the user picks which tags to trend
Component name: TagBrowser · Category: Display
In the palette: Browse the tag namespace as a tree and select tags (structure only, no live values)
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
selectionMode | enum | single | none = browse only (no selection emitted). single = click a tag to select it. multiple = checkboxes with folder select-all. Options: none · single · multiple. |
autoFocus | boolean | false | Focus the search box when the widget mounts. |
placeholder | string | Search tags... | — |
borderless | boolean | false | Drop the widget's outer border/rounding. |
showTagCount | boolean | true | Show the number of tags in each folder. |
truncate | boolean | true | Truncate long tag names with an ellipsis, leaving room for the folder count (or to the edge when it's hidden). Off = let the name overflow — then 'overflow' decides scroll vs clip. |
overflow | boolean | true | When 'truncate' is OFF: allow horizontal overflow — long names scroll sideways instead of being clipped. |
selectedItem | object | {} | Output (single): the selected tag as { tagId, tagPath, tagName }. Bind e.g. {{ <name>.selectedItem.tagId }}. |
selectedItems | array | [] | Output (multiple): the selected tags as an array of { tagId, tagPath, tagName }. |
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. |
tagSelect | Tag select | Tree | The selected tag. |
selectionChange | Selection change | Tree | The current selection. |
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
Think before placing this on an operator screen: it exposes the whole plant model. On a public LiveView it is usually the wrong component.