Product: Mingcedar Studio DESIGNER

Open Page as Popup | Mingcedar Studio

Open another exported page from this PowerPoint file as a popup without navigating away from the underlying page; the popup keeps its own HTML, SVG, JavaScript, and image assets.

Published 2026-10-25T12:48:42.668160394Z Updated 2026-10-25T12:48:42.668159613Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="interaction-open-page-as-popup">Interactions: Open Page as Popup</h2>

Open another exported page from this PowerPoint file as a popup without navigating away from the underlying page; the popup keeps its own HTML, SVG, JavaScript, and image assets.

<h3 id="interaction-open-page-as-popup-item-1">Overview</h3>

<p>Open Page as Popup opens another Page Code above the current page, for device details, confirmations and parameter panels. The underlying page remains in place.</p>

</article>

<h3 id="interaction-open-page-as-popup-item-2">How to use it: make the three primary choices</h3>

<p>Bind it to the opener, configure Popup page, Appearance and Interaction, and select Enabled:</p>

<ul>

<li>Popup page: select a page from this presentation or enter an existing exported Page Code, without .html or a folder path.</li>

<li>Appearance: choose Fit content for the useful content or Full page canvas for the complete canvas.</li>

<li>Interaction: set Block the page behind, Esc closes the popup, and Clicking outside closes it as needed.</li>

<li>Enabled: controls this behavior. Review the summary below the choices before saving.</li>

</ul>

</article>

<h3 id="interaction-open-page-as-popup-item-3">When to use Advanced options</h3>

<p>Select a fixed destination in Popup page. For a dynamic destination, parameters, or background options, expand Advanced options:</p>

<ul>

<li>Use a dynamic Page Code expression: provide a JavaScript expression that returns the Page Code.</li>

<li>Page parameters (JSON object): pass a static object such as <code>{"PLC":"PLC_LINE01","Device":"PUMP_01"}</code>. A top-level array is invalid.</li>

<li>Build page parameters with an expression: return an object or an ordered array of { key, value } entries; use the array to preserve repeated keys.</li>

<li>Background behind popup: choose Dim the page behind or Keep the page visible. Dim strength is limited to 0%-85%.</li>

<li>Allow the same popup to open more than once: permit duplicate instances. It is off by default to avoid accidental duplicates.</li>

</ul>

<div class="manual-code" data-code-language="text"><div class="manual-code-toolbar"><span>Text</span><span class="manual-code-tools"><small>Text</small><button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Text">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>// Fixed page + static parameters</span></span>

<span class="line"><span>Page Code: device_details</span></span>

<span class="line"><span>Page parameters: {"PLC": "PLC_LINE01", "Device": "PUMP_01", "active": true}</span></span>

<span class="line"><span>// Dynamic page example</span></span>

<span class="line"><span>selectedDeviceType === "pump" ? "pump_details" : "valve_details"</span></span></code></pre></div>

</article>

<h3 id="interaction-open-page-as-popup-item-4">How popup parameters are sent, read, and returned</h3>

<p>The static popup input requires a JSON object and cannot represent repeated keys. Dynamic parameter expressions can return an ordered array of { key, value } entries to preserve repeated keys. For consistent host and local-fallback behavior, use string, number, boolean, or null values. The popup destination still reads them with GetPageParameter, GetPageParameterValues, or GetPageParameters and treats the result as text.</p>

<ul>

<li>Static parameters: enter a JSON object.</li>

<li>Dynamic parameters: Build page parameters with an expression accepts an object or an ordered { key, value } array, but not a Promise or DOM object.</li>

<li>Destination reads: call GetPageParameter* in the popup page's Page Script.</li>

<li>Close result: Close Current Popup's Result expression sends a result back to the opener; it is not a page query parameter.</li>

<li>Parameters provide page context only; they do not bypass host permissions or expand Tag access.</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">// Popup Page Script</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> plc </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"PLC"</span><span style="color:#24292E">, </span><span style="color:#032F62">""</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> device </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"Device"</span><span style="color:#24292E">, </span><span style="color:#032F62">""</span><span style="color:#24292E">);</span></span>

<span class="line"><span style="color:#D73A49">var</span><span style="color:#24292E"> activeText </span><span style="color:#D73A49">=</span><span style="color:#6F42C1"> GetPageParameter</span><span style="color:#24292E">(</span><span style="color:#032F62">"active"</span><span style="color:#24292E">, </span><span style="color:#032F62">"false"</span><span style="color:#24292E">);</span></span>

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

</article>

<h3 id="interaction-open-page-as-popup-item-5">Delivery boundaries and common mistakes</h3>

<p>The target must be an exported page in the package. Adding, removing or renaming popup pages, or changing shared assets, requires a full export. Select from the page list to match Page Code to the manifest; do not emulate popups with Open Link.</p>

</article>

</div>

<strong>Figure 1: Open Popup editor</strong>

<p>Choose the popup page, Fit content or Full page canvas, and dismissal controls. Advanced options is collapsed in this image.</p>

</figcaption>

</figure>

</div>