Builder Guide

Builders design and create the displays that viewers interact with. Everything happens in the browser — there is nothing to install.

This guide walks through the editor, workspace setup, and three common display scenarios. Start with Foundation, then go to the scenario that matches your use case.

Foundation

Get familiar with the editor before placing any components:

• Editor Basics — Unlocked mode, editor panes, grid, zooming, and the visible area vs. scrollable region.
• The Editor Interface — Map of the full editor UI: left panel libraries, canvas, properties panel, and top bar.

Set Up Your Workspace

Configure your environment once before building so every new component starts with the right look:

• Set Up Your Workspace — Alignment tools, formatting brush, style switch, and component panels accessible from the toolbar.
• Themes & Branding — Set your color palette, logo, fonts, and component defaults. Apply a theme before creating styles — styles reference the theme's color palette.
  • Component Styles — Define named default styles per component type so new placements are already configured.
• Libraries — Custom component libraries and SVG assets for reuse across displays.
  • Custom Components — Package a group of configured components into a reusable building block, saved to your Custom Component Library.
  • Custom SVG Library — Add site-specific equipment symbols to the SVG library panel.

First Display

• Building Your First Display — Create a display, understand view modes and the visible workspace, then place components and connect live data.

Searching for Data

• Searching for Tags, Assets & Datasets — Use the Search panel to find tags by name, browse the asset hierarchy, or pull in structured datasets. Covers the * wildcard and Plotted vs. Recorded mode.

Display Process Data with Tags

Display Process Data with Tags — the simplest path, connecting process tags directly to components on a fixed layout:

• Creating Displays with Tags — Tag search, drag-and-drop onto components, Value and Line Chart setup.
• Multistate Behavior — Add conditional color and visibility rules driven by data values.
• Line Chart Deep Dive — Trace formatting, GTC lock, Plotted vs. Recorded mode, and performance for high-frequency data.

Display Data with Asset Hierarchies

Display Data with Asset Hierarchies — build displays that dynamically re-bind to any asset (one template, many assets):

• Understanding Asset Hierarchies — How the AF/asset tree is structured and how IOTA navigates it.
• Training Components — Make components asset-relative so displays work for any asset in the tree. Train vs. Train and Add explained.
• Actions & Interactions — Triggers, interaction connections between components, and how to drive one component from another (e.g., tree selection updating a chart).
• Navigation Between Displays — Link asset groups to KPI dashboards and navigate between displays.
• Asset Groups — Organize assets into collections and build overview dashboards that show multiple assets at once.

Merging Data Sources

Combine data from multiple historians, databases, or calculation engines in one display:

• Merging Data Sources — Add multiple datasets to components, understand dataset tabs, and configure mixed-source line charts.

Building Real-World Displays

Building Real-World Displays — patterns that go beyond a single canvas:

• Organizing Complex Displays — Use the Tab component to divide a display into sections, and embed subviews to reuse display blocks across multiple parent displays.
• Integrating with External Applications — Embed external web content with the iFrame component (including Power BI) and documents with the PDF component, and open IOTA displays from external systems pre-scoped to an asset using URL parameters.

Scripting

Extend display behavior with scripts that run on user interaction, data updates, or navigation:

• Interaction Functions — Trigger scripts on clicks, hover, and other user events.
• Navigation Functions — Programmatically navigate between displays and pass parameters.
• Passing Context — Pass parameters between displays via URL, variables, and reference views.
• Component Scripts — Scripts scoped to a single component's lifecycle.
• Global Scripts — Scripts that run across the entire display on load or on a timer.
• Scripting Performance — rAF loop patterns, bulk script limits, and when to use server-side calculations instead.

Calculations

Move heavy data processing off the browser and onto the server:

• Calculations — When to calculate on the server instead of in a script.
• PI System Calculations — Expression and summary calculations against PI/AF data.
• Python Calculations — Custom Python calculations for complex logic.

Finishing & Sharing

• Finishing & Sharing — Publish displays, generate links, manage folder access, download/upload copies, and understand the view ownership model.

Advanced

Advanced — specialized, less commonly used features:

• Engineering View — Hide construction-only elements so viewers get a clean, focused display.

Components Reference

• Components Reference — Full reference for every component you can place: Data, UI, Primitive, Complex, and Experimental — plus the Generic Settings shared across all of them.

Video Tutorials

• Video Tutorials — Watch the 10-part Quick Start series and topic deep-dive walkthroughs.

---

Need to configure data sources, users, or organization-wide themes? See the Admin Guide.

What's Next

Ready to start building? Begin with Editor Basics — how to unlock a display, save your work, zoom around the canvas, and use the global time control. It is the foundation every later topic builds on.