Product: Mingcedar Studio DESIGNER

Select a device in a popup: pass the current value and update the original page | Mingcedar Studio

Use two slides to create a device picker. The source passes the current device and updates its text when the popup returns a selection. This example uses page variables and does not write to equipment.

Published 2026-10-25T12:48:42.680413306Z Updated 2026-10-26T19:56:55.675034284Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="recipe-popup-selection">Popup tutorial: Select a device in a popup: pass the current value and update the original page</h2>

<h3 id="recipe-popup-selection-item-1">1. Create the source page and picker</h3>

Create two slides in one PPT. Set Page Codes to overview (source) and pump_picker (popup) in MX Design → Page → Nav Path and save. Code opens pages by Page Code.

<ol>

<li>On overview, insert one text shape and a rectangle button labelled Choose device. On pump_picker, insert one text shape and three rectangle buttons labelled Choose PUMP01, Choose PUMP02 and Cancel.</li>

<li>Open Page Script through MX Design → Scripts → Page Script. Select the appropriate slide before entering its code.</li>

<li>To add a behavior, open MX Design → Behaviors → Browse and drag it from the right-hand catalog to the component node on the left. Use Interactions → Click Script for buttons and Text → Script Text for text shapes. Double-click each added behavior and fill the fields specified below.</li>

</ol>

<li><a href="/en/ppt/manual/first-screen/">First use: components, behaviors and publishing</a></li>

</ul>

</article>

<h3 id="recipe-popup-selection-item-2">2. Store the current selection on the source page</h3>

Put this code in overview Page Script. Add Script Text to its text shape, clear the default Setup Script, set Condition to true and Display Text to selectionMessage, then save.

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">overview → Page ScriptJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: overview → Page Script">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var popupSelectedPump = "PUMP01";

var selectionMessage = "Selected: " + popupSelectedPump;</code></pre></div>

Expected result The source displays Selected: PUMP01.

</article>

<h3 id="recipe-popup-selection-item-3">3. Open the popup and handle its result</h3>

Put this code in overview’s Choose device Click Script. After the popup closes, then validates the result and updates page variables. Cancel or Escape keeps the original selection.

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Choose device button → Click ScriptJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Choose device button → Click Script">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>return HQ.popup.open("pump_picker", {

parameters: [{ key: "pump", value: popupSelectedPump }],

closeOnEscape: true

}).then(function (result) {

if (result == null) return;

if (result !== "PUMP01" && result !== "PUMP02") {

throw new Error("Unsupported pump selection");

}

popupSelectedPump = result;

selectionMessage = "Selected: " + result;

});</code></pre></div>

Expected result The button opens pump_picker with the current pump parameter. The selection has not changed yet.

</article>

<h3 id="recipe-popup-selection-item-4">4. Read the incoming value in the popup</h3>

Put this code in pump_picker Page Script. Add Script Text to its text shape, clear the default Setup Script, set Condition to true and Display Text to incomingMessage. The popup reads the source selection through the pump parameter. Missing or unknown parameters display an error and prevent the selection buttons below from returning a device.

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">pump_picker → Page ScriptJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: pump_picker → Page Script">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var incomingPump = GetPageParameter("pump", "");

var incomingPumpValid = incomingPump === "PUMP01" || incomingPump === "PUMP02";

var incomingMessage = incomingPumpValid

? "Current: " + incomingPump

: "Invalid pump parameter. Cancel and reopen.";</code></pre></div>

Expected result The first visit displays Current: PUMP01. After choosing PUMP02, reopening must display Current: PUMP02.

</article>

<h3 id="recipe-popup-selection-item-5">5. Return a selection or cancel</h3>

Each row belongs to a different button’s Click Script. The result wrapper explicitly identifies the value returned to the source.

Scroll horizontally to view the full table

<thead><tr><th scope="col">Button</th><th scope="col">Click Script</th></tr></thead><tbody>

<tr><th scope="row">Choose PUMP01</th><td>if (!incomingPumpValid) return;

return HQ.popup.close({ result: "PUMP01" });</td></tr>

<tr><th scope="row">Choose PUMP02</th><td>if (!incomingPumpValid) return;

return HQ.popup.close({ result: "PUMP02" });</td></tr>

<tr><th scope="row">Cancel</th><td>return HQ.popup.close({ result: null });</td></tr>

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

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Choose PUMP02 button → Click ScriptJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Choose PUMP02 button → Click Script">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>if (!incomingPumpValid) return;

return HQ.popup.close({ result: "PUMP02" });</code></pre></div>

Expected result Choose PUMP02: the popup closes and the source changes to Selected: PUMP02. Cancel: it closes without changing the selection.

</article>

<h3 id="recipe-popup-selection-item-6">6. Export and verify</h3>

Save both slides, export through MX Design → Export → Export HTML, and verify overview in Mingcedar.

<ol>

<li>Open from PUMP01 and choose PUMP02; confirm the source text updates.</li>

<li>Reopen and confirm the popup receives PUMP02. Cancel and verify the source keeps PUMP02.</li>

<li>Temporarily replace value: popupSelectedPump with value: "PUMP99" in the open code and export again. Confirm Invalid pump parameter appears, neither choice returns a result, and Cancel still closes the popup. Restore the original code.</li>

<li>To retarget Input, declare its possible Tags as in the Input lesson and update its target variable inside then. To filter Table, update its filter variable. Changing a page variable does not itself write a PLC.</li>

</ol>

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

<li>Popup does not open: check Page Code, export scope and that both pages belong to the same package.</li>

<li>Source does not update: return the open Promise, update the source Page Script variables, and display them through Script Text rather than static text.</li>

<li>Only enable allowMultiple when separate concurrent instances are required; this exercise opens one picker at a time.</li>

</ul></div>

<li><a href="/en/ppt/manual/recipe-page-parameter-input/">Next: switch the Input target</a></li>

<li><a href="/en/ppt/manual/recipe-parameterized-table/">Next: filter the table</a></li>

<li><a href="/en/ppt/manual/interaction-open-page-as-popup/">Popup fields and closing reference</a></li>

</ul>

</article>

</div>