Behavior Browser: How to Bind a Behavior to a Component

The Behavior Browser (ribbon HQ VISU tab -> Behavior Browser) is the visual pane where you attach run-time behaviors to the shapes on your PPT page. It is the screen you will use most. The layout is fixed into three panes. The left tree, Pages / Components, shows the hierarchy: pages, the components on each page, and the behaviors already bound under each component (the active page or component is highlighted). The right catalog, Behaviors, lists every behavior you can bind, grouped into four categories: Visual States (color, border, show/hide, status lamps), Geometry (move, rotate, scale), Interactions (click, hover, navigation, write value), and Text (text display). The bottom pane, Behavior Details, shows details for the node you have selected. In short: this is where you decide how a shape should change on the live screen, and what happens when it is clicked.

Feature

Feature: Behavior Browser: How to Bind a Behavior to a Component

The Behavior Browser is the most-used screen in the plugin. It has three panes: the left tree (Pages / Components) lists pages, components, and the behaviors already bound to them; the right catalog (Behaviors) lists the behaviors you can bind; the bottom is Behavior Details. The only way to bind is to DRAG a behavior from the right catalog onto a component node in the left tree; double-clicking a behavior on the right does NOT bind it.

What it is and what it is for

The Behavior Browser (ribbon HQ VISU tab -> Behavior Browser) is the visual pane where you attach run-time behaviors to the shapes on your PPT page. It is the screen you will use most. The layout is fixed into three panes. The left tree, Pages / Components, shows the hierarchy: pages, the components on each page, and the behaviors already bound under each component (the active page or component is highlighted). The right catalog, Behaviors, lists every behavior you can bind, grouped into four categories: Visual States (color, border, show/hide, status lamps), Geometry (move, rotate, scale), Interactions (click, hover, navigation, write value), and Text (text display). The bottom pane, Behavior Details, shows details for the node you have selected. In short: this is where you decide how a shape should change on the live screen, and what happens when it is clicked.

How to use it: drag to bind + right-click menu + editor fields

There is only one correct way to bind: select a component node in the left tree first, then drag the behavior you want from the right catalog onto that component node and release the mouse. Double-clicking a behavior on the right does NOT bind it; on double-click the status bar only shows Drag a behavior onto a component node to bind it. You must drag it across. Once bound, double-click that behavior node under the component in the left tree to open its editor and fill the fields. Fields differ per behavior; common ones are: Definition (the prep area; read tags, define variables, do intermediate math), Condition / Value / Text (the output that returns the value the behavior actually uses), Fill (fill color), Border (border color), Visibility (show/hide), Tag Expression (the tag name), BitNr (bit number), and Action (Set / Reset / Toggle). The left-tree nodes also have a right-click menu: Locate in PowerPoint (find the page/component in PPT), Rename Component, Edit Behavior, and Remove Behavior.

  • Binding steps: select the component on the left -> drag a behavior onto that component node -> release the mouse.
  • Double-clicking a behavior on the right does not bind; double-clicking a bound behavior node on the left opens its editor.
  • Definition: preparation (read tags, define variables, intermediate math).
  • Condition / Value / Text: return only the final result; keep complex logic in Definition.
  • Color behaviors, common fields: Fill, Border, Visibility.
  • Write behaviors, common fields: Tag Expression, Value, BitNr, Action (Set/Reset/Toggle).
  • Left-tree right-click: Locate in PowerPoint / Rename Component / Edit Behavior / Remove Behavior.
// After binding State Color to a pump shape, fill its editor like this:
// Definition (prep area)
var running = ReadTagBoolean("PLC1.PUMP.RUN", false);
// Output: Fill green when running, red when stopped
running ? "#22C55E" : "#EF4444"

When to use it

Use it whenever a shape must change with live data, or must do something on click or hover. Two typical scenarios:

  • Run-state lamp: find the pump/valve shape in the left tree, drag State Color or Blink Color onto it, then read the tag in Definition and set the color in the output.
  • Click action: drag Write Tag / Write Tag Bit / Open Link onto a button shape, set the tag or the navigation target, and it works on click in the host after export.

Common mistakes

The most common mistake is double-clicking a behavior on the right and expecting it to bind. Double-clicking the right catalog only pops the hint Drag a behavior onto a component node to bind it.; it never binds; you must drag onto a component node on the left. Also: to bind to a component, drop onto the component NODE, not a page node. If you change a page, the selection, a template, or a behavior and the view does not update right away, click Refresh in the ribbon Tools group (or the browser's refresh) to re-read everything; no need to close and reopen.

HQ VISU Designer Behavior Browser
Figure 1: Behavior Browser

The left tree lists pages, components, and bound behaviors; drag a behavior from the right catalog onto a component node to bind it, with details below.