Product: Mingcedar Studio DESIGNER

Screen reuse and parameter configuration | Mingcedar Studio

Choose Tags, template parameters, page variables or page parameters according to when the target changes.

Published 2026-10-25T12:48:42.656268724Z Updated 2026-10-26T19:56:55.657153372Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="design-reuse-guide">Screen design: Screen reuse and parameter configuration</h2>

Choose Tags, template parameters, page variables or page parameters according to when the target changes.

<h3 id="design-reuse-guide-item-1">1. Choose a reuse method</h3>

<p>Each template insertion creates an instance. Fill template parameters during authoring, use page variables for current-page state, and pass page parameters when opening another page.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Use case</th><th scope="col">Configuration</th><th scope="col">When the value takes effect</th></tr></thead><tbody>

<tr><th scope="row">Place PUMP01 and PUMP02 controls side by side</th><td><PLC> / <PUMP> template parameters</td><td>Fill each instance before exporting</td></tr>

<tr><th scope="row">Switch one Input between two devices</th><td>A page variable holding the Tag name</td><td>A button changes the variable while the page stays open</td></tr>

<tr><th scope="row">Open the same details page for different pumps</th><td>Page parameters + GetPageParameter</td><td>The source page passes the pump when opening the destination</td></tr>

<tr><th scope="row">Switch a table between areas A and B</th><td>A page variable + a function returning rows</td><td>Change the variable; the function returns the matching rows</td></tr>

<tr><th scope="row">Display a live speed instead of a one-time snapshot</th><td>Call ReadTagDouble inside the evaluated function</td><td>Read again whenever the display evaluates the function</td></tr>

</tbody></table></div>

<li><a href="/en/ppt/manual/first-screen/">First use: create and publish a screen</a></li>

<li><a href="/en/ppt/manual/recipe-page-parameter-input/">Input: from local draft to device parameters</a></li>

<li><a href="/en/ppt/manual/recipe-parameterized-table/">Table: from fixed arrays to live filtering</a></li>

<li><a href="/en/ppt/manual/recipe-template-bit-write/">Bit writes: from one button to reusable controls</a></li>

</ul>

</article>

<h3 id="design-reuse-guide-item-2">2. Distinguish a Tag name from its value</h3>

<p>A Tag is a Mingcedar data point. speedTag holds its name; ReadTagDouble reads its value. Replace PLC_LINE01.PUMP01.SPEED with a readable numeric Tag from your project.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Entry</th><th scope="col">Meaning</th></tr></thead><tbody>

<tr><th scope="row">"PLC_LINE01.PUMP01.SPEED"</th><td>A string containing the complete Tag name</td></tr>

<tr><th scope="row">speedTag</th><td>A JavaScript variable containing that string</td></tr>

<tr><th scope="row"><PUMP></th><td>An authoring placeholder filled separately in each template instance</td></tr>

<tr><th scope="row">GetPageParameter("pump", "PUMP01")</th><td>A string supplied when this page was opened; PUMP01 is the fallback</td></tr>

<tr><th scope="row">ReadTagDouble(speedTag, 0)</th><td>Read the current number; 0 is a fallback, not proof that the device stopped</td></tr>

</tbody></table></div>

<ol>

<li>Create a page, open MX Design → Scripts → Page Script, and enter the code below.</li>

<li>Insert a text shape. Open MX Design → Behaviors → Browse and drag Text → Script Text onto its component node. Double-click the new behavior, clear the default Setup Script, set Condition to true, and enter speedTag + " = " + String(speedNow) in Display Text. Save.</li>

<li>Save the PPT, export through MX Design → Export → Export HTML, and open the page in Mingcedar to inspect the displayed name and value.</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Page Script: compare a Tag name with its value</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: Page Script: compare a Tag name with its value">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:#D73A49">var</span><span style="color:#24292E"> speedTag </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "PLC_LINE01.PUMP01.SPEED"</span><span style="color:#24292E">;</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> speedNow </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> ReadTagDouble</span><span style="color:#24292E">(speedTag, </span><span style="color:#005CC5">0</span><span style="color:#24292E">);</span></span></code></pre></div>

<p class="doc-step-result"><strong>Expected result</strong> speedNow is sampled when these lines run. For a live display, put the read in an evaluated behavior expression or table function. Declare the possible dynamic Tag names as shown in the lessons.</p>

</article>

<h3 id="design-reuse-guide-item-3">3. Variable syntax by field</h3>

<p>Each row is independent. Define selectedTag in Page Script with a full Tag name of the required type. buildRows is the Table tutorial’s row-array function. Expression syntax differs by field.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Location</th><th scope="col">Fixed or template target</th><th scope="col">Page variable</th></tr></thead><tbody>

<tr><th scope="row">Input → PLC Tag</th><td><PLC>.<PUMP>.SPEED_SETPOINT</td><td>=selectedTag</td></tr>

<tr><th scope="row">Write Tag / Write Tag Bit → Target Tag</th><td><PLC>.<PUMP>.CTRL_WORD</td><td>=selectedTag</td></tr>

<tr><th scope="row">Table → Rows</th><td>[["PUMP01", "1200 rpm"]]</td><td>=buildRows()</td></tr>

<tr><th scope="row">Click Script</th><td>WriteTagDouble("<PLC>.<PUMP>.SPEED_SETPOINT", 1200)</td><td>WriteTagDouble(selectedTag, 1200)</td></tr>

<tr><th scope="row">State Color → Condition</th><td>ReadTagBoolean("<PLC>.<PUMP>.RUN", false)</td><td>ReadTagBoolean(selectedTag, false)</td></tr>

<tr><th scope="row">Write Tag Bit → Bit Index</th><td>3</td><td>This field takes a fixed integer; use WriteTagBit in Click Script for a dynamic index</td></tr>

</tbody></table></div>

<p class="doc-step-result"><strong>Expected result</strong> Use = for the Input target field, pass variables directly to functions, and keep template placeholders inside JavaScript strings. Some fields only accept fixed values.</p>

</article>

<h3 id="design-reuse-guide-item-4">4. Convert numeric and Boolean template parameters</h3>

<p>Use a new page for this example; no PLC data is required. LIMIT is a non-negative number and ENABLED is true or false. Template parameters substitute text, which must be converted before use.</p>

<p class="doc-table-hint">Scroll horizontally to view the full table</p>

<thead><tr><th scope="col">Instance</th><th scope="col">LIMIT</th><th scope="col">ENABLED</th><th scope="col">Converted values</th></tr></thead><tbody>

<tr><th scope="row">B</th><td>2200</td><td>false</td><td>2200 / false</td></tr>

</tbody></table></div>

<ol>

<li>Insert a text shape and add Text → Script Text. Replace the default Setup Script with the complete code below. Set Condition to true and Display Text to String(limit) + " / " + String(enabled), then save.</li>

<li>Select the text shape, open MX Design → Templates → Library, and click Save selection. Enter Parameter display in Template name, confirm LIMIT and ENABLED in Captured variables, then click Save.</li>

<li>After confirming the save, remove the original placeholder text shape from this page. Save selection saves to the library without removing the original. Hiding it or moving it to another slide in the same PPT does not exclude it from a full export.</li>

<li>Double-click the Parameter display card twice. Select each whole instance group, open MX Design → Templates → Edit Instance, enter values A and B below in Template variables, and save. Export and open the page. A should display 1500 / true and B should display 2200 / false.</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar"><span>Script Text → Setup Script</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: Script Text → Setup Script">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:#D73A49">var</span><span style="color:#24292E"> limitText </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "<LIMIT>"</span><span style="color:#24292E">.</span><span style="color:#6F42C1">trim</span><span style="color:#24292E">();</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> limit </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> Number</span><span style="color:#24292E">(limitText);</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#D73A49">!</span><span style="color:#24292E">limitText </span><span style="color:#D73A49">||</span><span style="color:#D73A49"> !</span><span style="color:#24292E">Number.</span><span style="color:#6F42C1">isFinite</span><span style="color:#24292E">(limit) </span><span style="color:#D73A49">||</span><span style="color:#24292E"> limit </span><span style="color:#D73A49"><</span><span style="color:#005CC5"> 0</span><span style="color:#24292E">) {</span></span>

<span class="line"><span style="color:#D73A49"> throw</span><span style="color:#D73A49"> new</span><span style="color:#6F42C1"> Error</span><span style="color:#24292E">(</span><span style="color:#032F62">"LIMIT must be a non-negative number"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "<ENABLED>"</span><span style="color:#24292E">.</span><span style="color:#6F42C1">trim</span><span style="color:#24292E">().</span><span style="color:#6F42C1">toLowerCase</span><span style="color:#24292E">();</span></span>

<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (enabledText </span><span style="color:#D73A49">!==</span><span style="color:#032F62"> "true"</span><span style="color:#D73A49"> &&</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">!==</span><span style="color:#032F62"> "false"</span><span style="color:#24292E">) {</span></span>

<span class="line"><span style="color:#D73A49"> throw</span><span style="color:#D73A49"> new</span><span style="color:#6F42C1"> Error</span><span style="color:#24292E">(</span><span style="color:#032F62">"ENABLED must be true or false"</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> enabled </span><span style="color:#D73A49">=</span><span style="color:#24292E"> enabledText </span><span style="color:#D73A49">===</span><span style="color:#032F62"> "true"</span><span style="color:#24292E">;</span></span></code></pre></div>

<div class="doc-step-troubleshooting"><p><strong>If the result differs</strong></p><ul>

<li>Keep the quotes in Number("<LIMIT>"); var limit = <LIMIT> is not valid JavaScript.</li>

<li>Boolean("false") is true; compare the string explicitly as shown.</li>

<li>Saving a component template does not copy the current Page Script to another page.</li>

</ul></div>

</article>

<h3 id="design-reuse-guide-item-5">5. Diagnose data display problems</h3>

<ol>

<li>Start with constants: use [["PUMP01", "1200 rpm"]] for Table Rows, Plain Input for typing, or true / false for the indicator condition. Confirm the control itself works.</li>

<li>Inspect the computed target: when adding Script Text, clear its default Setup Script and set Condition to true. Temporarily enter selectedTag or GetPageParameter("pump", "missing") in Display Text. A visible <PUMP> means substitution did not happen; the wrong device means selection or parameters are incorrect.</li>

<li>Connect the real Tag last: check its name, type, communication quality and user access. After a write, compare the value read back from the device.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> Check control configuration, computed parameters and data connection in that order.</p>

</article>

</div>