Product: Mingcedar Studio DESIGNER

Behavior Browser: How to Bind a Behavior to a Component | Mingcedar Studio

Manage pages, components and behaviors. Drag from Behaviors onto a component node, then double-click the bound behavior to edit it.

Published 2026-10-25T12:48:42.64943934Z Updated 2026-10-25T12:48:42.649438549Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="behavior-browser-bind-behaviors">Feature: Behavior Browser: How to Bind a Behavior to a Component</h2>

Manage pages, components and behaviors. Drag from Behaviors onto a component node, then double-click the bound behavior to edit it.

<h3 id="behavior-browser-bind-behaviors-item-1">Overview</h3>

<p>Open MX Design → Behaviors → Browse. Pages / Components shows bindings on the left, Behaviors lists categories on the right, and Behavior Details describes the selected node below.</p>

</article>

<h3 id="behavior-browser-bind-behaviors-item-2">Behavior catalog</h3>

<p>Behaviors are organized into these categories; see each chapter for fields and examples.</p>

<ul>

<li>Visual States: Blink Color, Range Color, Script Color, Discrete Color, State Color, Multi-State Color.</li>

<li>Geometry: Move, Rotate, Scale.</li>

<li>Interactions: Set Variable on Click, Open Diagnosis, Open Link, Open Page as Popup, Close Current Popup, Write Tag, Write Tag Bit, Click Script, Hover Script, Press/Release Script.</li>

<li>Text: Script Text, Tag Text, Localized Text.</li>

</ul>

</article>

<h3 id="behavior-browser-bind-behaviors-item-3">How to use it: drag to bind + right-click menu + editor fields</h3>

<p>Drag a behavior from the right catalog onto a component node on the left; double-click the binding to edit. Double-clicking the catalog only shows a drag hint. Fields and context commands are listed below:</p>

<ul>

<li>Binding steps: select the component on the left -> drag a behavior onto that component node -> release the mouse.</li>

<li>Double-clicking a behavior on the right does not bind; double-clicking a bound behavior node on the left opens its editor.</li>

<li>Setup Script: preparation (read tags, define variables, intermediate math).</li>

<li>Condition / Value / Text: return only the final result; keep complex logic in Setup Script.</li>

<li>Color behaviors, common fields: Fill, Border, Visibility.</li>

<li>Write behaviors, common fields: Target Tag, Value, Bit Index, Action (Set/Reset/Toggle).</li>

<li>Left-tree right-click: Locate in PowerPoint / Rename Component / Edit Behavior / Remove Behavior.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>JavaScript</span><span class="manual-code-tools"><small>JavaScript</small><button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: JavaScript">Copy code</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#6A737D">// State Color: enter each part in its indicated field</span></span>

<span class="line"><span style="color:#6A737D">// Setup Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> running </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagBoolean</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.RUN"</span><span style="color:#24292E">, </span><span style="color:#005CC5">false</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#6A737D">// Condition</span></span>

<span class="line"><span style="color:#24292E">running</span></span>

<span class="line"><span style="color:#6A737D">// Action: enable TRUE, FALSE, and Fill color</span></span>

<span class="line"><span style="color:#6A737D">// TRUE state: #22C55E (running)</span></span>

<span class="line"><span style="color:#6A737D">// FALSE state: #94A3B8 (stopped)</span></span></code></pre></div>

</article>

<h3 id="behavior-browser-bind-behaviors-item-4">Use the component-tree toolbar</h3>

<p>The Components tree has five toolbar buttons. Refresh rereads the current presentation. Collapse all and Expand all control the tree. Zoom out and Zoom in adjust tree text and row size. Selecting a page or component node also selects the matching object in PowerPoint.</p>

<ul>

<li>The tree is behind PowerPoint: click Refresh.</li>

<li>There are too many open nodes: Collapse all, then open only the target page.</li>

<li>You need to review every behavior on the page: Expand all.</li>

<li>Names are clipped or the list is too dense: use Zoom out / Zoom in.</li>

<li>After selecting a component node, confirm the same object is selected on the slide.</li>

</ul>

</article>

<h3 id="behavior-browser-bind-behaviors-item-5">Read the Bound, Unbound, Behavior, and Current legend</h3>

<p>Bound means attached; Unbound means not attached to this component. Behavior identifies a behavior node and Current marks the active node. Confirm a binding by its presence under the component.</p>

<ul>

<li>After a drag, confirm that a new behavior node appears under the component.</li>

<li>Double-click the new node and confirm that its editor opens.</li>

<li>Save, refresh once, and confirm that it still appears as Bound.</li>

</ul>

</article>

<h3 id="behavior-browser-bind-behaviors-item-6">Use the context menu and keyboard shortcuts</h3>

<p>Right-clicking a page, component, group, template, or behavior shows commands valid for that node: Locate in PowerPoint, Edit Template, Ungroup, Rename Component, Edit Behavior, Copy Behavior, Paste Behavior, and Remove Behavior.</p>

<ul>

<li>Ctrl+C: copy the selected behavior.</li>

<li>Ctrl+V: paste the copied behavior onto the current compatible component.</li>

<li>Delete: remove the selected behavior after confirmation.</li>

<li>After a paste, recheck Target Tag, page targets, component names, and template variables.</li>

<li>If a command is disabled, confirm the type of node currently selected.</li>

</ul>

</article>

<h3 id="behavior-browser-bind-behaviors-item-7">Understand cancel rollback and text-target restrictions</h3>

<p>Dragging a behavior opens its editor. Cancel removes a new binding but only discards edits to an existing one. Text behaviors require text-capable components.</p>

<ul>

<li>Keep a new behavior: fill required fields and choose Save / OK.</li>

<li>Discard a new behavior: choose Cancel and confirm no behavior node remains.</li>

<li>Discard edits to an existing behavior: choose Cancel; the old configuration remains.</li>

<li>A Text behavior is rejected: select a text box, text-capable shape, or supported template object.</li>

<li>Tree and PowerPoint selection differ: Refresh, then use Locate in PowerPoint.</li>

</ul>

</article>

<p>Use it for data-driven appearance and click or hover actions:</p>

<ul>

<li>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 Setup Script and set the color in the output.</li>

<li>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.</li>

</ul>

</article>

<h3 id="behavior-browser-bind-behaviors-item-9">Common mistakes</h3>

<p>Drop onto a component node, not a page node. If a page, template or selection change is missing from the tree, use Tools → Refresh or the browser refresh button.</p>

</article>

</div>

<strong>Figure 1: Behavior Browser</strong>

<p>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.</p>

</figcaption>

</figure>

</div>