所属产品: Mingcedar Studio DESIGNER

弹窗选择设备：传入当前值，关闭后更新原页面 | Mingcedar Studio

用两张幻灯片制作设备选择窗。主页面传入当前设备；弹窗返回选择后，主页面更新文字。本例只使用页面变量，不写入设备。

首次发布 2026-10-25T12:48:42.598284483Z 最近更新 2026-10-26T19:56:55.614322312Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="recipe-popup-selection">弹窗教程: 弹窗选择设备：传入当前值，关闭后更新原页面</h2>

用两张幻灯片制作设备选择窗。主页面传入当前设备；弹窗返回选择后，主页面更新文字。本例只使用页面变量，不写入设备。

<h3 id="recipe-popup-selection-item-1">1. 创建主页面与选择弹窗</h3>

在同一个 PPT 新建两页，用 MX Design → Page → Nav Path 将 Page Code 分别设为 overview（主页面）和 pump_picker（弹窗），保存。代码通过 Page Code 打开页面。

<ol>

<li>overview 页插入一个文本框，再画矩形作为按钮，文字填“选择设备”。pump_picker 页插入一个文本框及三个矩形按钮，文字分别填“选择 PUMP01”“选择 PUMP02”“取消”。</li>

<li>Page Script 的入口是 MX Design → Scripts → Page Script；先选中相应幻灯片，再填写该页代码。</li>

<li>添加行为时打开 MX Design → Behaviors → Browse，将右侧目录的行为拖到左侧对应组件节点。按钮使用 Interactions → Click Script，文本框使用 Text → Script Text；双击新增行为后填写下文指定字段。</li>

</ol>

<li><a href="/ppt/manual/first-screen/">首次使用：组件、行为与画面发布</a></li>

</ul>

</article>

<h3 id="recipe-popup-selection-item-2">2. 主页面保存当前选择</h3>

将下方代码放在 overview 的 Page Script。给文本框添加 Script Text，清空默认 Setup Script，Condition 填 true，Display Text 填 selectionMessage，再保存。

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">overview → Page ScriptJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: overview → Page Script">复制代码</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>

完成标志 主页面显示 Selected: PUMP01。

</article>

<h3 id="recipe-popup-selection-item-3">3. 打开弹窗并处理返回值</h3>

将下方代码放入 overview 的“选择设备”按钮 Click Script。弹窗关闭后，then 校验结果并更新页面变量；取消或 Esc 保留原选择。

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">选择设备按钮 → Click ScriptJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: 选择设备按钮 → Click Script">复制代码</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>

完成标志 点击后打开 pump_picker，并把当前设备编码作为 pump 参数传入。当前选择此时还未改变。

</article>

<h3 id="recipe-popup-selection-item-4">4. 弹窗读取传入值</h3>

将下方代码放在 pump_picker 的 Page Script。给文本框添加 Script Text，清空默认 Setup Script，Condition 填 true，Display Text 填 incomingMessage。弹窗通过 pump 参数读取主页面的选择；参数缺失或未知时显示错误，并阻止下一步的选择按钮返回设备。

<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="已复制" data-failed="请选中代码后复制" aria-label="复制代码: pump_picker → Page Script">复制代码</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>

完成标志 首次打开显示 Current: PUMP01；主页面选过 PUMP02 后再次打开，应显示 Current: PUMP02。

</article>

<h3 id="recipe-popup-selection-item-5">5. 返回选择或取消</h3>

以下每一行属于不同按钮的 Click Script。result 包装用于明确指定返回给主页面的值。

左右滑动查看完整表格

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

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

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

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

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

<tr><th scope="row">取消</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">选择 PUMP02 按钮 → Click ScriptJavaScript<button type="button" data-copy-code data-copied="已复制" data-failed="请选中代码后复制" aria-label="复制代码: 选择 PUMP02 按钮 → Click Script">复制代码</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>

完成标志 选择 PUMP02：弹窗关闭，主页面变为 Selected: PUMP02。取消：弹窗关闭，主页面保持原选择。

</article>

<h3 id="recipe-popup-selection-item-6">6. 导出并验证</h3>

保存两页，用 MX Design → Export → Export HTML 整包导出，在 Mingcedar 打开 overview 验证。

<ol>

<li>从 PUMP01 打开弹窗并选择 PUMP02；确认主页面文字更新。</li>

<li>再次打开，确认弹窗读到 PUMP02；点取消后主页面仍为 PUMP02。</li>

<li>把打开代码中的 value: popupSelectedPump 临时改成 value: "PUMP99"，重新导出。应显示 Invalid pump parameter，两个选择按钮都不返回结果，取消仍能关闭；恢复原代码后再继续。</li>

<li>要改变 Input 的目标，按输入框教程声明候选 Tag，并在上述 then 内更新那个目标变量；要筛选 Table，则更新其筛选变量。改变变量本身不会写 PLC。</li>

</ol>

<div class="doc-step-troubleshooting">如果结果不一致<ul>

<li>弹窗打不开：确认目标 Page Code、导出范围以及两页都在同一个画面包。</li>

<li>原页面没变化：确认按钮 return 了 open 返回的 Promise，回调修改的是原页面 Page Script 变量，文本框使用 Script Text 而非静态文字。</li>

<li>需要同时打开同一选择窗的多个独立实例时再设置 allowMultiple；本练习每次打开一份即可。</li>

</ul></div>

<li><a href="/ppt/manual/recipe-page-parameter-input/">下一步：选择设备后切换 Input 目标</a></li>

<li><a href="/ppt/manual/recipe-parameterized-table/">下一步：选择设备或区域后筛选表格</a></li>

<li><a href="/ppt/manual/interaction-open-page-as-popup/">弹窗字段与关闭方式参考</a></li>

</ul>

</article>

</div>