Product: Mingcedar Studio DESIGNER

Click Script | Mingcedar Studio

Run JavaScript on click for confirmation, Tag reads/writes, styling or navigation. Condition controls whether it runs.

Published 2026-10-25T12:48:42.652949452Z Updated 2026-10-25T12:48:42.652948701Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="click-script-interaction">Interactions: Click Script</h2>

Run JavaScript on click for confirmation, Tag reads/writes, styling or navigation. Condition controls whether it runs.

<p>Click Script is an Interactions behavior for custom click logic. Scripts can access object, objects, event, tag, page, presentation, shape, hqVisuDesigner and globals.</p>

</article>

<h3 id="click-script-interaction-item-2">Field configuration</h3>

<p>General has editable Behavior Name and read-only Component Name; Trigger is Click. Configure these Interaction Setup fields:</p>

<ul>

<li>Click Script: the script body executed on click. It supports multiple lines for conditions, tag reads and writes, component updates, and dialogs. Use return to exit early or return a result.</li>

<li>Condition: an enable-gate expression, defaulting to true;. Put only a single expression that resolves immediately to true/false here, e.g. ReadTagBoolean(...) or a comparison; when false, that click does not run.</li>

<li>Tag helpers available: ReadTagBoolean/Integer/Double/String, and during this real click action WriteTagBoolean/Integer/Double/String. Components and navigation use hqVisuDesigner (setComponentFill / setComponentText / setComponentVisible / openPage / openScreen, etc.).</li>

<li>Async APIs (fetch, setTimeout, setInterval, ...) belong only in a script body like Click Script; never in Condition (a synchronous evaluation slot).</li>

<li>The script snippet button is context-aware: it offers full script snippets in Click Script and short expression snippets in Condition.</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">// Click Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> v </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> prompt</span><span style="color:#24292E">(</span><span style="color:#032F62">"Enter a value"</span><span style="color:#24292E">, </span><span style="color:#032F62">"0"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (v </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> null</span><span style="color:#D73A49"> ||</span><span style="color:#24292E"> v </span><span style="color:#D73A49">===</span><span style="color:#032F62"> ""</span><span style="color:#24292E">) { </span><span style="color:#D73A49">return</span><span style="color:#24292E">; }</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> n </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> parseInt</span><span style="color:#24292E">(v, </span><span style="color:#005CC5">10</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#6F42C1">isNaN</span><span style="color:#24292E">(n)) { </span><span style="color:#6F42C1">alert</span><span style="color:#24292E">(</span><span style="color:#032F62">"Please enter an integer."</span><span style="color:#24292E">); </span><span style="color:#D73A49">return</span><span style="color:#24292E">; }</span></span>

<span class="line"><span style="color:#6F42C1">WriteTagInteger</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.SETPOINT"</span><span style="color:#24292E">, n);</span></span>

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

<span class="line"><span style="color:#6F42C1">ReadTagBoolean</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.ALLOW_OP"</span><span style="color:#24292E">, </span><span style="color:#005CC5">false</span><span style="color:#24292E">)</span></span></code></pre></div>

</article>

<p>Use for multi-step or custom click actions:</p>

<ul>

<li>Confirm-then-write: prompt/confirm the operator first, then WriteTagInteger/WriteTagBoolean.</li>

<li>Drive several components on one click: recolor, relabel, or show/hide multiple components in a single handler (hqVisuDesigner.setComponentFill / setComponentText / setComponentVisible).</li>

<li>A guarded action button: wire Condition to an allow/logged-in/manual-mode tag so the click simply does nothing when the precondition isn't met.</li>

</ul>

</article>

<h3 id="click-script-interaction-item-4">Limitations and troubleshooting</h3>

<p>Configuration requirements:</p>

<ul>

<li>Writes remain subject to host permissions, confirmation, reason capture, and asynchronous processing. Calling WriteTag does not confirm that the device accepted the value; verify the result in the runtime platform.</li>

<li>Condition must return its result synchronously. It does not support fetch() or other asynchronous calls that return a Promise.</li>

<li>A multi-line Click Script can finish naturally without a final return. Use return in branches that must exit early, such as when the user cancels.</li>

<li>Don't navigate with relative disk paths: use hqVisuDesigner.openPage("PageName") within the same package, hqVisuDesigner.openScreen("SCREEN_CODE") across packages, and a URL only for real external sites.</li>

</ul>

</article>

</div>

<strong>Figure 1: Click Script editor</strong>

<p>Write the on-click script in the Click Script box and use Condition to gate whether the click runs.</p>

</figcaption>

</figure>

</div>