Widgets & styling / Built-in widget catalog

Built-in widget catalog

The widgets that ship in the box, grouped by job, each with the properties you can set. Bind any of them to live data like any other field.

Layout & structure

Component Slot

Marks where content the caller supplies is rendered. Put one in a reusable component and instances of it gain a named slot — in the widget tree, and in the properties panel when a "Widget slot" property names it.

Property	Label	Type
`slot`	Slot name	`slot`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Image Container

Places children at absolute spots over a background image. Collapses below a set width.

Property	Label	Type
`src`	Image	`image`
`alt`	Alt text	`String`
`fit`	Fit	`String`
`collapseBelow`	Collapse below (px)	`Integer`
`childPositions`	Child placement	`child-positions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Container

Groups and lays out child widgets in a row or column. Hosts other widgets.

Property	Label	Type
`title`	Title	`String`
`showWhenEmpty`	Show when empty	`Boolean`
`background`	Background	`color`
`border`	Border	`String`
`shadow`	Shadow	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Fixed Spacer

A precise pixel gap between widgets.

Property	Label	Type
`size`	Size (px)	`Integer`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Separator

A thin divider line between widgets.

Property	Label	Type
`orientation`	Orientation	`String`
`thickness`	Thickness (px)	`Integer`
`color`	Color	`color`
`inset`	Inset (px)	`Integer`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Stretch Spacer

Flexible gap that pushes neighbours apart, by ratio or percent.

Property	Label	Type
`mode`	Mode	`String`
`ratio`	Ratio	`Integer`
`percent`	Percent (%)	`Integer`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Content & controls

Alarm History

The rolling log of past alarm events.

Property	Label	Type
`title`	Title	`String`
`maxRows`	Max rows	`Integer`
`filterLevel`	Filter level	`String`
`chrome`	Own frame	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Alarm List

Live active alarms, filterable by level, with acknowledgement.

Property	Label	Type
`title`	Title	`String`
`filterLevel`	Filter level	`String`
`chrome`	Own frame	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Button

Runs actions and can bind a writable boolean struct (bVisible / bEnabled / bValue).

Property	Label	Type
`label`	Label	`String`
`iconName`	Icon	`icon`
`color`	Color	`color`
`variant`	Style	`String`
`variable`	Variable	`struct`
`actions`	Actions	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Clock

A live clock, formatted with the same patterns as the $time source.

Property	Label	Type
`format`	Format	`String`
`timezone`	Time zone	`String`
`value`	Value override	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Icon

A themeable Phosphor icon at any size and colour.

Property	Label	Type
`iconName`	Icon	`icon`
`size`	Size (px)	`Integer`
`color`	Color	`color`
`chrome`	Chip background	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Image

Shows an asset with a fit mode and optional data-driven indicators.

Property	Label	Type
`src`	Image	`image`
`alt`	Alt text	`String`
`fit`	Fit	`String`
`indicators`	Indicators	`image-indicators`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Label

Text in one of the theme typography combos, with translation support.

Property	Label	Type
`text`	Text	`String`
`typography`	Typography	`String`
`color`	Color	`color`
`align`	Align	`String`
`wrap`	Overflow	`String`
`size`	Size override	`String`
`weight`	Weight override	`Integer`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Logo Title

A logo image paired with a title and an optional subtitle.

Property	Label	Type
`logoUrl`	Logo image	`image`
`title`	Title	`String`
`subtitle`	Subtitle	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Page Title

The current page's title and icon, or your own override text.

Property	Label	Type
`text`	Text	`String`
`subtitle`	Subtitle	`String`
`iconName`	Icon	`icon`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Status Pill

A tone-colored status pill, with an optional second line and pulsing dot.

Property	Label	Type
`text`	Text	`String`
`subText`	Sub text	`String`
`tone`	Tone	`String`
`pulse`	Pulse	`Boolean`
`iconName`	Icon	`icon`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Trend Chart

Plots recorded tag history over selectable time ranges, or buffers live values with no historian.

Property	Label	Type
`source`	Data source	`String`
`variables`	Variables	`String`
`timeRange`	Default time range	`String`
`refreshInterval`	Refresh interval (s)	`Integer`
`liveWindow`	Live window (s)	`Integer`
`liveMaxSamples`	Max samples per variable	`Integer`
`showControls`	Show zoom buttons	`Boolean`
`seriesColors`	Line colors	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

User Badge

Shows the currently signed-in user as an initialled badge.

Property	Label	Type
`usernameText`	Username text	`String`
`groupsText`	Groups text	`String`
`actions`	On Press	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Web Frame

Embeds an external web page in an iframe.

Property	Label	Type
`url`	URL	`String`
`title`	Title	`String`
`showHeader`	Show header bar	`Boolean`
`showReloadButton`	Show reload button	`Boolean`
`showOpenInNewTab`	Show open-in-new-tab button	`Boolean`
`showLoadingState`	Show loading overlay	`Boolean`
`showErrorFallback`	Show error fallback	`Boolean`
`borderStyle`	Border	`String`
`cornerRadius`	Corner radius	`String`
`backgroundColor`	Background color	`color`
`loading`	Loading	`String`
`referrerPolicy`	Referrer policy	`String`
`scrolling`	Scrolling	`String`
`reloadInterval`	Reload interval (seconds)	`Integer`
`reloadTrigger`	Reload trigger variable	`String`
`enableSandbox`	Enable sandbox	`Boolean`
`allowScripts`	Allow scripts	`Boolean`
`allowSameOrigin`	Allow same-origin	`Boolean`
`allowForms`	Allow forms	`Boolean`
`allowPopups`	Allow popups	`Boolean`
`allowPopupsToEscapeSandbox`	Allow popups to escape sandbox	`Boolean`
`allowModals`	Allow modals	`Boolean`
`allowDownloads`	Allow downloads	`Boolean`
`allowTopNavigation`	Allow top navigation	`Boolean`
`allowPointerLock`	Allow pointer lock	`Boolean`
`allowOrientationLock`	Allow orientation lock	`Boolean`
`allowPresentation`	Allow presentation	`Boolean`
`allowFullscreen`	Allow fullscreen	`Boolean`
`allowCamera`	Allow camera	`Boolean`
`allowMicrophone`	Allow microphone	`Boolean`
`allowGeolocation`	Allow geolocation	`Boolean`
`allowAutoplay`	Allow autoplay	`Boolean`
`allowClipboardRead`	Allow clipboard read	`Boolean`
`allowClipboardWrite`	Allow clipboard write	`Boolean`
`allowPayment`	Allow payment	`Boolean`
`customAllow`	Custom allow	`String`
`allowedOrigins`	Allowed inbound origins	`String`
`inboundVariable`	Inbound variable (write target)	`String`
`outboundVariable`	Outbound variable	`String`
`outboundOrigin`	Outbound target origin	`String`
`onLoad`	On Load	`actions`
`onError`	On Error	`actions`
`onMessage`	On Message	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Inputs

Button Row

A row of mutually-exclusive buttons — pick 1 of N. Writes the chosen option to a bound variable, or tracks selection locally and fires On Change.

Property	Label	Type
`label`	Label	`String`
`options`	Options	`option-list
`variable`	Value	`String
`selectedValue`	Selected value	`String`
`disabled`	Disabled	`Boolean`
`onChange`	On Change	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Pick one option from a list. Publishes the selection for sibling widgets to read and fires On Change.

Property	Label	Type
`label`	Label	`String`
`options`	Options	`option-list
`selectedValue`	Selected value	`String`
`disabled`	Disabled	`Boolean`
`onChange`	On Change	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Number Input

A numeric entry field that writes a number to a variable.

Property	Label	Type
`label`	Label	`String`
`unit`	Unit	`String`
`min`	Min value	`Float`
`max`	Max value	`Float`
`variable`	Variable	`struct`
`showRangeOnNumpad`	Show range on numpad	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Numeric Stepper

Increment / decrement a numeric variable with + / − buttons.

Property	Label	Type
`label`	Label	`String`
`unit`	Unit	`String`
`variable`	Value	`Float
`step`	Step	`Float`
`min`	Min value	`Float`
`max`	Max value	`Float`
`decimals`	Decimal places	`Integer`
`showRangeOnNumpad`	Show range on numpad	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

String Input

A text field whose typed value is published for sibling widgets to read.

Property	Label	Type
`label`	Label	`String`
`placeholder`	Placeholder	`String`
`isPassword`	Password field	`Boolean`
`disabled`	Disabled	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Switch

A toggle that writes a boolean on/off to a variable.

Property	Label	Type
`label`	Label	`String`
`labelPosition`	Label position	`String`
`variable`	Value	`Boolean`
`color`	On color	`color`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Indicators

Gauge

A round analog gauge with min/max and a value binding.

Property	Label	Type
`variable`	Value	`Float`
`min`	Min value	`Float`
`max`	Max value	`Float`
`label`	Label	`String`
`unit`	Unit	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

LED Indicator

A status light that changes colour with a boolean.

Property	Label	Type
`variable`	Value	`Boolean`
`label`	Label	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Progress Bar

A horizontal bar showing a percentage or progress value.

Property	Label	Type
`variable`	Value	`Float
`min`	Min value	`Float`
`max`	Max value	`Float`
`label`	Label	`String`
`unit`	Unit	`String`
`decimals`	Decimal places	`Integer`
`showValue`	Show value	`Boolean`
`showPercent`	Show percent	`Boolean`
`color`	Fill color	`color`
`barHeight`	Bar height (px)	`Integer`
`dense`	Dense	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Ring Gauge

A donut ring showing a value as a share of its range, with the reading in the hole.

Property	Label	Type
`value`	Value	`Float
`min`	Min value	`Float`
`max`	Max value	`Float`
`unit`	Unit	`String`
`caption`	Caption	`String`
`decimals`	Decimal places	`Integer`
`size`	Diameter (px)	`Integer`
`thickness`	Ring thickness (px)	`Integer`
`color`	Ring color	`color`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Stat Tile

KPI tile: label, value and unit, with a tinted icon in row mode.

Property	Label	Type
`label`	Label	`String`
`value`	Value	`String`
`unit`	Unit	`String`
`icon`	Icon	`icon`
`tone`	Tone	`String`
`size`	Size	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Trend

A live sparkline of one variable with its current reading — buffered in the page, no historian.

Property	Label	Type
`variable`	Value	`Float`
`historyLength`	History length (samples)	`Integer`
`label`	Label	`String`
`unit`	Unit	`String`
`decimals`	Decimal places	`Integer`
`color`	Line color	`color`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Value Display

Displays a numeric value with a label and unit.

Property	Label	Type
`variable`	Value	`Float
`label`	Label	`String`
`unit`	Unit	`String`
`decimals`	Decimal places	`Integer`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Sidebar or top-bar menu mirroring the page tree, with rich display options.

Property	Label	Type
`mode`	Mode	`String`
`items`	Items	`menu-items`
`orientation`	Orientation	`String`
`display`	Display	`String`
`hierarchy`	Hierarchy	`String`
`submenuMode`	Submenu mode	`String`
`iconStrategy`	Icon strategy	`String`
`activeStyle`	Active style	`String`
`groupExpansion`	Group expansion	`String`
`showSearch`	Show search	`Boolean`
`collapsed`	Collapsed	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

The trail of pages to where you are, with optional home icon.

Property	Label	Type
`separator`	Separator	`String`
`showHomeIcon`	Show home icon	`Boolean`
`homeLabel`	Home label	`String`
`homePageId`	Home page	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Language Switcher

Lets operators change the interface language.

Property	Label	Type
`label`	Label	`String`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Collapses or expands a bound menu state; swaps icon per state.

Property	Label	Type
`bound`	Bound state	`Boolean`
`iconCollapsed`	Icon (collapsed)	`icon`
`iconExpanded`	Icon (expanded)	`icon`
`ariaLabel`	Aria label	`String`
`actions`	Actions	`actions`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Page Navigator

Previous / next controls stepping through a page group.

Property	Label	Type
`groupId`	Target group	`page-group`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Tab Bar

Switches between the sibling pages of a group as tabs.

Property	Label	Type
`groupId`	Target group	`page-group`
`variant`	Style	`String`
`showIcons`	Show icons	`Boolean`
`visible`	Visible	`Boolean`
`interactable`	Interactable	`Boolean`

Beyond these you have Components (reusable page fragments with input properties) and every custom widget in the active project. They all live in the same Add-widget menu — see Building your own widgets.