Interactivity

Make a page live — bind elements to tags, drive states and appearance with expressions, and act on clicks.

A static diagram becomes useful when its elements reflect — and control — your data. On a page you connect elements to tags in a few ways.

Bindings

A binding links an element, or one of its properties, to a tag so it shows the live value or reflects the tag’s state. A text label can show a tag’s value; a shape’s fill can follow it.

Expressions

For anything beyond a direct binding, write an expression — a short JavaScript-like snippet that computes a value or a condition from one or more tags. Expressions can format a value, combine tags, or decide a color. The full set of functions available is the page editor expression reference — reading and formatting tag values, navigating, writing values, and reading the viewer’s zoom level.

An expression can drive more than the text on a label. Wherever the Properties panel shows the expression button, that property can be computed instead of fixed. There are four such places:

  • an element’s text;
  • its Visible state, so parts of a diagram appear only when they’re relevant;
  • a symbol’s states — enabled, manual, energized, modulating;
  • a Click action.

Visible is the only appearance property that takes an expression. To make a fill or a stroke follow your data, use a condition instead.

A property being driven by an expression is locked in the panel and says so, so you can always tell a computed value from one someone typed.

Dynamic states

Equipment symbols expose states you bind to a tag or expression, so the symbol mirrors what the plant is doing:

  • Enabled — the component is running/active.
  • Manual — it’s in manual mode.
  • Energized — it’s energized.
  • Modulating — it’s modulating rather than fully open or closed.

When the bound value is true, the symbol updates (filling in, showing a manual outline, and so on). Which states apply depends on the symbol — see Equipment symbols.

Conditions

Conditions change how an element looks or behaves based on tag values — for example coloring a pump while it’s running, or highlighting a reading that’s out of range. A condition pairs an expression with the appearance to apply when it’s true.

Click actions

An element’s Events section has a Click action — an expression that runs when an operator clicks it. Use it to write a value to a writable tag (turn something on, change a setpoint), or to navigate to another dashboard, document, trend, or URL. Writing is only possible where the bound tag is writable and the user has permission.

Trendable tags

An element can declare trendable tags — the tags it represents — so their data is collected for trends and history without setting each one up separately.

Declaring them has a second payoff: anyone viewing the page can build a trend straight from it, selecting tags off the diagram rather than out of the tag tree. Only trendable tags appear there, so an element with none declared is invisible to that feature.