Product: Mingcedar Studio DESIGNER

Script Color | Mingcedar Studio

Drive a component's fill, border, and visibility from one script. Use it when the color logic is more complex than a simple true/false switch.

Published 2026-10-25T12:48:42.653515142Z Updated 2026-10-25T12:48:42.65351422Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="color-script-color">Colors: Script Color</h2>

Drive a component's fill, border, and visibility from one script. Use it when the color logic is more complex than a simple true/false switch.

<h3 id="color-script-color-item-1">Overview</h3>

<p>Script Color computes one component's fill, border, and visibility from JavaScript expressions. Use it when the appearance depends on several Tags or combined conditions. Open Color Script Editor to configure the output channels.</p>

</article>

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

<p>Open the bound behavior and configure these fields:</p>

<ul>

<li>General: behavior name; component name is read-only, just to confirm the bound target</li>

<li>Setup Script: read tags, declare variables, compute intermediate values; its hint reads "define fill, border, or visibility values"</li>

<li>Condition: an enable expression, defaults to true; the behavior only applies its colors when this is true</li>

<li>Output Channels: three channels - Fill Color, Border Color, Visibility - each with its own Expression box and its own checkbox; only checked channels are applied</li>

<li>Fill Color and Border Color return color strings; Visibility returns true/false. A new behavior refers to MyFillcolor, MyStrokecolor, and MyVisibility from Setup Script. Keep the output expressions aligned when changing that script</li>

<li>Quality Override: enable Follow data quality (border / hide) and configure Good and Bad border colors. Enable Hide when quality is bad to hide the component on invalid data.</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">// Setup Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> state </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagInteger</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.STATE"</span><span style="color:#24292E">, </span><span style="color:#005CC5">0</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> fillColor </span><span style="color:#D73A49">=</span><span style="color:#24292E"> state </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> 1</span><span style="color:#D73A49"> ?</span><span style="color:#032F62"> "#22C55E"</span><span style="color:#D73A49"> :</span><span style="color:#032F62"> "#EF4444"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> borderColor </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "#000000"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> isVisible </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> true</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#6A737D">// Fill Color expression: fillColor</span></span>

<span class="line"><span style="color:#6A737D">// Border Color expression: borderColor</span></span>

<span class="line"><span style="color:#6A737D">// Visibility expression: isVisible</span></span></code></pre></div>

</article>

<p>Use scripts for multiple visual channels or combined conditions, for example:</p>

<ul>

<li>Pump status block: change fill and border together from a run tag and an alarm tag, hiding or flashing the block on alarm</li>

<li>Multi-tag combined state: color must be decided from several numeric and boolean values that a single State Color or Range Color cannot express</li>

</ul>

</article>

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

<p>Check these conditions before saving:</p>

<ul>

<li>Script Color output expressions must return synchronously. Handle asynchronous data in an async Page Script function or user interaction script, then store the result in a page variable for the expression to read.</li>

<li>Keep multi-line logic, tag reads, and function definitions in Setup Script; the three Output Channel expressions should only return the final result</li>

<li>An output channel's expression only applies when its checkbox (Fill/Border/Visibility) is checked; unchecked channels are ignored</li>

<li>The quality border and Hide when quality is bad use communication quality (good/bad), not the process value or alarm state.</li>

</ul>

</article>

</div>

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

<p>Drive fill color, border color, and visibility together from one script across the three output channels.</p>

</figcaption>

</figure>

</div>