用两张幻灯片制作设备选择窗。主页面传入当前设备;弹窗返回选择后,主页面更新文字。本例只使用页面变量,不写入设备。
在同一个 PPT 新建两页,用 MX Design → Page → Nav Path 将 Page Code 分别设为 overview(主页面)和 pump_picker(弹窗),保存。代码通过 Page Code 打开页面。
- overview 页插入一个文本框,再画矩形作为按钮,文字填“选择设备”。pump_picker 页插入一个文本框及三个矩形按钮,文字分别填“选择 PUMP01”“选择 PUMP02”“取消”。
- Page Script 的入口是 MX Design → Scripts → Page Script;先选中相应幻灯片,再填写该页代码。
- 添加行为时打开 MX Design → Behaviors → Browse,将右侧目录的行为拖到左侧对应组件节点。按钮使用 Interactions → Click Script,文本框使用 Text → Script Text;双击新增行为后填写下文指定字段。
将下方代码放在 overview 的 Page Script。给文本框添加 Script Text,清空默认 Setup Script,Condition 填 true,Display Text 填 selectionMessage,再保存。
overview → Page ScriptJavaScript
var popupSelectedPump = "PUMP01";
var selectionMessage = "Selected: " + popupSelectedPump;
完成标志 主页面显示 Selected: PUMP01。
将下方代码放入 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 参数传入。当前选择此时还未改变。
将下方代码放在 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。
以下每一行属于不同按钮的 Click Script。result 包装用于明确指定返回给主页面的值。
左右滑动查看完整表格
选择 PUMP02 按钮 → Click ScriptJavaScript
if (!incomingPumpValid) return;
return HQ.popup.close({ result: "PUMP02" });
完成标志 选择 PUMP02:弹窗关闭,主页面变为 Selected: PUMP02。取消:弹窗关闭,主页面保持原选择。
保存两页,用 MX Design → Export → Export HTML 整包导出,在 Mingcedar 打开 overview 验证。
- 从 PUMP01 打开弹窗并选择 PUMP02;确认主页面文字更新。
- 再次打开,确认弹窗读到 PUMP02;点取消后主页面仍为 PUMP02。
- 把打开代码中的 value: popupSelectedPump 临时改成 value: "PUMP99",重新导出。应显示 Invalid pump parameter,两个选择按钮都不返回结果,取消仍能关闭;恢复原代码后再继续。
- 要改变 Input 的目标,按输入框教程声明候选 Tag,并在上述 then 内更新那个目标变量;要筛选 Table,则更新其筛选变量。改变变量本身不会写 PLC。
如果结果不一致
- 弹窗打不开:确认目标 Page Code、导出范围以及两页都在同一个画面包。
- 原页面没变化:确认按钮 return 了 open 返回的 Promise,回调修改的是原页面 Page Script 变量,文本框使用 Script Text 而非静态文字。
- 需要同时打开同一选择窗的多个独立实例时再设置 allowMultiple;本练习每次打开一份即可。