跳至主要内容

弹窗选择设备:传入当前值,关闭后更新原页面

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

弹窗教程文档修订:2026-10-21

弹窗教程: 弹窗选择设备:传入当前值,关闭后更新原页面

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

1. 创建主页面与选择弹窗

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

  1. overview 页插入一个文本框,再画矩形作为按钮,文字填“选择设备”。pump_picker 页插入一个文本框及三个矩形按钮,文字分别填“选择 PUMP01”“选择 PUMP02”“取消”。
  2. Page Script 的入口是 MX Design → Scripts → Page Script;先选中相应幻灯片,再填写该页代码。
  3. 添加行为时打开 MX Design → Behaviors → Browse,将右侧目录的行为拖到左侧对应组件节点。按钮使用 Interactions → Click Script,文本框使用 Text → Script Text;双击新增行为后填写下文指定字段。

2. 主页面保存当前选择

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

overview → Page ScriptJavaScript
var popupSelectedPump = "PUMP01";
var selectionMessage = "Selected: " + popupSelectedPump;

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

3. 打开弹窗并处理返回值

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

选择设备按钮 → Click ScriptJavaScript
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;
});

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

4. 弹窗读取传入值

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

pump_picker → Page ScriptJavaScript
var incomingPump = GetPageParameter("pump", "");
var incomingPumpValid = incomingPump === "PUMP01" || incomingPump === "PUMP02";
var incomingMessage = incomingPumpValid
  ? "Current: " + incomingPump
  : "Invalid pump parameter. Cancel and reopen.";

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

5. 返回选择或取消

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

左右滑动查看完整表格

按钮Click Script
选择 PUMP01if (!incomingPumpValid) return; return HQ.popup.close({ result: "PUMP01" });
选择 PUMP02if (!incomingPumpValid) return; return HQ.popup.close({ result: "PUMP02" });
取消return HQ.popup.close({ result: null });
选择 PUMP02 按钮 → Click ScriptJavaScript
if (!incomingPumpValid) return;
return HQ.popup.close({ result: "PUMP02" });

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

6. 导出并验证

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

  1. 从 PUMP01 打开弹窗并选择 PUMP02;确认主页面文字更新。
  2. 再次打开,确认弹窗读到 PUMP02;点取消后主页面仍为 PUMP02。
  3. 把打开代码中的 value: popupSelectedPump 临时改成 value: "PUMP99",重新导出。应显示 Invalid pump parameter,两个选择按钮都不返回结果,取消仍能关闭;恢复原代码后再继续。
  4. 要改变 Input 的目标,按输入框教程声明候选 Tag,并在上述 then 内更新那个目标变量;要筛选 Table,则更新其筛选变量。改变变量本身不会写 PLC。

如果结果不一致

  • 弹窗打不开:确认目标 Page Code、导出范围以及两页都在同一个画面包。
  • 原页面没变化:确认按钮 return 了 open 返回的 Promise,回调修改的是原页面 Page Script 变量,文本框使用 Script Text 而非静态文字。
  • 需要同时打开同一选择窗的多个独立实例时再设置 allowMultiple;本练习每次打开一份即可。

再次点击图片或按 Esc 关闭