Scripting Guide

About 3 minscriptingjavascript

Scripting Guide

IOTA VUE includes a built-in JavaScript scripting engine that lets builders add interactivity, navigation logic, and custom behavior to dashboards. There are two types of scripts:

Global Scripts — run once when a view loads, with access to all components on the view
Component Scripts — run on specific events for a single component (click, data change, focus, etc.)

Actions are scripts under the hood

Everything you configure in the Actions panel — Multistate, Interaction, and Navigation — is generated as JavaScript behind the scenes. Open any action you built in the UI, switch to the Script tab, and you'll see the exact code the builder produced.

For example, the table-row navigation from the Heat Exchanger series — the Fleet Comparison table's onClick Interaction (selected → viewContext / SetOptions) followed by a GoTo navigation — reads on the Script tab as:

The Script tab of a table's onClick action, showing the UI-configured Interaction and Navigation as generated JavaScript: getComponent('viewContext', this).SetOptions(this.selected) and GoTo('HEX Details - Actions')

The UI actions and the scripting API are the same thing — the calls the panels generate (getComponent(...).SetOptions(...), GoTo(...)) are the very functions documented below. Writing scripts directly just lets you go beyond what the panels expose: dynamic targets, conditional logic, and multi-step behavior.

Global vs Component Scripts

	Global Scripts	Component Scripts
Trigger	Once on view load	Per-event: `onCreate`, `onChange`, `onData`, `onTick`, `onFocus`, `onDblClick`, `onHover`
Scope	View-wide — access all components via `this.parent.$dashboardComponents`	Single component — `this` is the component instance
Navigation	All navigation functions enabled	Blocked during `onCreate` and `onData`
Editor	Upload `.js` files or code editor in View Properties	Inline script editor per event in Component Properties
Shared context	Multiple scripts share the same `this`	Each event script has its own scope

Available Functions

The following functions are available in both script types. No imports needed.

Function	Description
`GoTo(name)`	Navigate to a view by name
`GoToId(id)`	Navigate to a view by ID
`GoToPath(path)`	Navigate to a view by path
`GoBack()`	Navigate to the previous view
`GoForward()`	Navigate to the next view
`GoToUrl(url, newtab)`	Open a URL (optionally in a new tab)
`Popup(id, title, w, h, x, y)`	Open a view in a popup window
`PopupPath(path, ...)`	Open a view by path in a popup
`Refresh()`	Reload the current view

Component Access

Function	Description
`getComponent(varnam)`	Get a component by its variable name
`getComponentGlobal(varnam)`	Get by variable name, title, or ID
`getComponentByName(name)`	Get a component by display name
`getComponentByType(type)`	Get all components of a given type
`getComponentByLabel(label)`	Get a component by label

Data

Function	Description
`callDriver(config)`	Call a driver function
`getDriver(topic)`	Get a driver instance by topic
`tagSearch(config)`	Search for tags
`tagSnapshot(config)`	Get a snapshot of tag values

Built-in Variables

Variable	Description
`_VIEW_ID_`	Current view ID
`_VIEW_NAME_`	Current view name
`_VIEW_PATH_`	Current view path

All variables defined in the view's Variables tab are also available by name.

Tips and Gotchas

Scripts execute in the browser — keep them lightweight. Use calculations for heavy data processing.
Do not call injected functions inside non-async callbacks. The script runner wraps them with await. Use this.parent.$viewPlugin.popupViewPath() directly instead of the injected PopupPath() in callback handlers.
Use _ prefix for shortcut properties (e.g., this._varnam) — the $ character can conflict with the script runner's replacement regex.
Confirmation dialogs: Use this.parent.$confirm.require({...}) directly in callback handlers.
See a component's exact shape with Inspect. Right-click a component in the editor and choose Inspect to view its full configuration as JSON — the fastest way to find the property names your script should read or write.

What's Next

Start with the Interaction Functions reference to script how components respond to each other.

Global Scripts — view-level scripts with full component access
Component Scripts — per-event scripts on individual components
Interaction Functions — component interaction API
Navigation Functions — navigation API
Custom Components — building reusable components
Python Calculations — server-side data processing