Product: Mingcedar Studio DESIGNER

Multi-State Color | Mingcedar Studio

Check up to 8 conditions in order and apply the first true row’s fill, border and visibility. Use for prioritized states such as alarm, manual, auto and idle.

Published 2026-10-25T12:48:42.673643044Z Updated 2026-10-25T12:48:42.673642302Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="multi-state-color">Colors: Multi-State Color</h2>

Check up to 8 conditions in order and apply the first true row’s fill, border and visibility. Use for prioritized states such as alarm, manual, auto and idle.

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

<p>Multi-State Color displays several states by priority. Configure up to eight Boolean conditions; at runtime, the first true row supplies the component's fill, border, and visibility settings. Row 1 has the highest priority. Use Else for a default appearance when no condition is true.</p>

</article>

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

<p>Arrange conditions by priority, top to bottom. Enable output channels and set each row’s action.</p>

<ul>

<li>Setup Script (optional): preparation area to read tags and define helper values; leave it empty if not needed.</li>

<li>Conditions (1-8): one true/false expression per row; the row number is its priority, row 1 highest, and the runtime uses the first row that is true.</li>

<li>Use Else: when checked, adds an Else row at the bottom of the condition list, used when no condition is true.</li>

<li>Fill (enable via the column header): set one fill color for each state row.</li>

<li>Border (enable via the column header): set one border color for each state row.</li>

<li>Visible (enable via the column header): set show or hide for each state row.</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 (prepare)</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> st </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"> alarm </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagBoolean</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC_LINE01.PUMP01.ALARM"</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 1 (highest priority, alarm)</span></span>

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

<span class="line"><span style="color:#6A737D">// Condition 2 (manual)</span></span>

<span class="line"><span style="color:#6A737D">// Condition 3 (auto running)</span></span>

<span class="line"><span style="color:#6A737D">// Else fallback: idle</span></span></code></pre></div>

</article>

<p>Use it when one component must show three or more mutually exclusive operating states that have a clear priority.</p>

<ul>

<li>Pump/device status lamp: alarm shows red first, then manual orange, then auto-running green, then idle grey.</li>

<li>Multi-level run state: stopped / low speed / high speed / fault on a single shape switched by priority, instead of stacking several behaviors.</li>

</ul>

</article>

<h3 id="multi-state-color-item-4">Common mistakes</h3>

<p>Check priority and unmatched-state handling:</p>

<ul>

<li>Order decides the result: the first true condition wins, so put the more important state (e.g. alarm) earlier or an earlier true condition will steal it.</li>

<li>Conditions are expressions, not colors: a condition row only returns true/false; colors are set in the action columns, and an empty condition is treated as false.</li>

<li>None true with no Else: this behavior leaves the component unchanged; enable Use Else if you need a fallback.</li>

<li>Enable the channel in the header first: if Fill / Border / Visible is unchecked, that column has no effect on any row.</li>

<li>Quality is communication quality: Quality Border reflects tag comms, not the process value; do not keep showing a valid-looking state when quality is bad.</li>

</ul>

</article>

</div>

<strong>Figure 1: Multi-State Color editor</strong>

<p>Rank up to 8 conditions by priority; the first true one wins and applies that row's fill, border, and visibility.</p>

</figcaption>

</figure>

</div>