Manual

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

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.

Popup tutorialDocumentation revised: 2026-10-21

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.

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.
Open Page Script through MX Design → Scripts → Page Script. Select the appropriate slide before entering its code.
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.

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.

var popupSelectedPump = "PUMP01";
var selectionMessage = "Selected: " + popupSelectedPump;

Expected result The source displays Selected: PUMP01.

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.

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;
});

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

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.

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

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

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

Button	Click Script
Choose PUMP01	if (!incomingPumpValid) return; return HQ.popup.close({ result: "PUMP01" });
Choose PUMP02	if (!incomingPumpValid) return; return HQ.popup.close({ result: "PUMP02" });
Cancel	return HQ.popup.close({ result: null });

if (!incomingPumpValid) return;
return HQ.popup.close({ result: "PUMP02" });

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

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

Open from PUMP01 and choose PUMP02; confirm the source text updates.
Reopen and confirm the popup receives PUMP02. Cancel and verify the source keeps PUMP02.
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.
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.

If the result differs

Popup does not open: check Page Code, export scope and that both pages belong to the same package.
Source does not update: return the open Promise, update the source Page Script variables, and display them through Script Text rather than static text.
Only enable allowMultiple when separate concurrent instances are required; this exercise opens one picker at a time.

Popup tutorial: Select a device in a popup: pass the current value and update the original page

1. Create the source page and picker

2. Store the current selection on the source page

3. Open the popup and handle its result

4. Read the incoming value in the popup

5. Return a selection or cancel

6. Export and verify