Input: drafts, variables, template parameters and validated submission

Preparation and sequence

Install and authorize the add-in and confirm that you can open an exported screen in Mingcedar. Modify one page through sections 1–3, create separate pages for sections 4 and 5, and copy section 5’s page for section 6. Sections 1–2 need no PLC; section 3 onwards requires readable and writable numeric Tags.

Scroll horizontally to view the full table

1. Choose Save after editing a template or behavior, then save the presentation.
2. After completing each section, update the screen package through MX Design → Export → Export HTML, reopen its page in Mingcedar and verify the result. Section 6 requires both the entry and destination pages in the export.

• Installation and authorization
• Export and publish the screen package

1A · Plain Input: create two independent inputs

Create a blank PowerPoint slide with two Inputs, two display text boxes and a button. Reuse the insertion, naming and Edit Instance procedures below in later sections.

Scroll horizontally to view the full table

1. Open MX Design → Templates → Library, select the Input card and choose Insert template. Repeat to create a second Input.
2. Open MX Design → Behaviors → Browse. In the Behavior Browser component tree, right-click each Input root, choose Rename Component and name them Speed A and Speed B. Name the roots rather than their child shapes.
3. Use PowerPoint Insert → Text Box to add two text boxes, each containing a dash. Use Rename Component to name them Preview A and Preview B. Add a rectangle through Insert → Shapes and label it Show input.
4. Select the complete Speed A instance, open MX Design → Templates → Edit Instance, apply the settings below and choose Save. Repeat for Speed B.

1B · Display the input on a button click

Drag Click Script onto Show input in Behavior Browser. Open the binding, replace its code with the block below and save. Reuse this procedure for later buttons. Export, enter 1200 and 900, then click Show input.

hqVisuDesigner.setComponentText("Preview A", template.getValue("Speed A"));
hqVisuDesigner.setComponentText("Preview B", template.getValue("Speed B"));

Expected result Preview A displays 1200 and Preview B displays 900. Change Speed A and click again; only Preview A changes.

2A · Runtime Variable: bind page variables

Reuse Speed A and Speed B. Open MX Design → Scripts → Page Script, choose New, enter input-data in Name and paste this block into Code. Select Enabled and choose Save. Open Edit Instance for each Input, apply the settings below and save.

Scroll horizontally to view the full table

• Enter unquoted variable names in Variable. Input detects the submitted type: 1200 is an integer; entering "1200" including its double quotes submits a string.

var speedDraftA = 0;
var speedDraftB = 0;

Expected result After exporting again, both Inputs start at 0. Enter 1200 or 900, then press Enter or leave the input to update its page variable.

2B · Display the page variables

Delete Show input. Bind Script Text to Preview A, clear Setup Script, use the expression below in Display Text, set Condition to true and save. Repeat for Preview B with String(speedDraftB).

String(speedDraftA)

Expected result After exporting again, committing Speed A updates Preview A, while Speed B updates Preview B. Reopening the page runs Page Script and restores both variables to 0.

3 · PLC Tag: bind fixed devices

Delete both Preview text boxes. Prepare the two Tags below with read/write access, decimal support, good quality and distinct current values. Open Edit Instance for Speed A and Speed B, apply the settings below and save. The input-data variables from section 2 may remain but are no longer used.

Scroll horizontally to view the full table

Expected result After exporting, each Input displays its own Tag value. Change only Speed A and press Enter. Verify PUMP01 Tag readback in Mingcedar; PUMP02 should retain its value.

4 · Template parameters: reuse an Input

Reuse the two Tags from section 3 and create a reusable template on a new page.

Scroll horizontally to view the full table

1. Create a blank slide and insert one Input from Templates → Library. Open Edit Instance, set Input mode to PLC Tag, enter <PLC>.<PUMP>.SPEED_SETPOINT in PLC Tag, set Write trigger to Immediate and choose Save.
2. Select the complete Input and open Templates → Library → Save selection. Set Template name to Pump setpoint input, retain the default Group, confirm PLC and PUMP in Captured variables and choose Save. Use another unique name if this one exists.
3. Close the library and delete the original Input that still contains placeholders from the page. Reopen Library, select the saved template and choose Insert template twice.
4. Select each new instance root, open Edit Instance and enter the template values below without quotes or angle brackets. Choose Save for each, save the presentation and export again.

Expected result The two instances display different pumps. Changing the second instance’s PUMP does not change the first.

5A · Runtime target: configure an address variable

Create a page and insert Input as in 1A; name its root Speed input. Create Page Script document input-data, paste the block below, enable and save it. Configure Edit Instance as shown.

Scroll horizontally to view the full table

• HQVISU_DECLARE_TAGS declares the two Tags that this dynamic target may read and write. Host permissions still control access.

var selectedSetpointTag = "PLC_LINE01.PUMP01.SPEED_SETPOINT";
HQVISU_DECLARE_TAGS({
  expression: "selectedSetpointTag",
  read: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"],
  write: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"]
});

5B · Switch the target with buttons

Give Select pump 2 the Click Script below and save. Copy it as Select pump 1 and change PUMP02 to PUMP01 in the copied script.

hqVisuDesigner.writeVariable("selectedSetpointTag", "PLC_LINE01.PUMP02.SPEED_SETPOINT");

Expected result After exporting again, Select pump 2 displays the current PUMP02 value and Select pump 1 displays PUMP01. Selection buttons do not write a device value.

6A · Page parameters: create device entry buttons

Copy the page from section 5. Open MX Design → Page → Nav Path, change the copy’s Page Code to pump_setpoint and save. Keep Speed input and input-data; remove the selection buttons. Create a separate entry slide with an Open PUMP02 button and bind the Click Script below as in section 1B. Copy it as Open PUMP01 and change PUMP02 to PUMP01 in the copied script.

return hqVisuDesigner.openPage("pump_setpoint", {
  parameters: [{ key: "pump", value: "PUMP02" }]
});

Expected result Both entry buttons open the same destination page with different pump parameters. Complete sections 6B–6D before exporting the complete presentation containing both pages.

6B · Validate page parameters

On pump_setpoint, replace the entire input-data document with this code and save; do not create duplicate variables. GetPageParameter returns text. Missing or unknown values stop this initialization.

var pumpCode = GetPageParameter("pump", "");
if (pumpCode !== "PUMP01" && pumpCode !== "PUMP02") {
  throw new Error("Open from a device entry; pump must be PUMP01 or PUMP02");
}
var selectedSetpointTag = "PLC_LINE01." + pumpCode + ".SPEED_SETPOINT";
HQVISU_DECLARE_TAGS({
  expression: "selectedSetpointTag",
  read: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"],
  write: ["PLC_LINE01.PUMP01.SPEED_SETPOINT", "PLC_LINE01.PUMP02.SPEED_SETPOINT"]
});

Expected result The PUMP01 and PUMP02 entries resolve selectedSetpointTag to their respective devices. PUMP99 or a missing pump parameter establishes no valid target.

6C · External: disable automatic input submission

On pump_setpoint, select Speed input and open Edit Instance. Change Write trigger to External, retain Input mode PLC Tag and PLC Tag =selectedSetpointTag, then choose Save. Add a Submit rectangle button and a text box displaying Awaiting input. Use Rename Component to name the text box Input message.

Scroll horizontally to view the full table

Expected result The Input displays the current device value. Editing and pressing Enter or leaving the input does not write automatically; the next section’s button submits the value.

6D · Validate and submit the value

Save this Click Script on Submit. The example accepts decimal numbers from 0 to 3000; use the device’s permitted range in your project. Export the full package with Export HTML and select a device from the Mingcedar entry page.

var raw = String(template.getValue("Speed input")).trim();
var value = Number(raw);
if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(raw) ||
    !Number.isFinite(value) || value < 0 || value > 3000) {
  hqVisuDesigner.setComponentText("Input message", "Enter a valid number from 0 to 3000");
  return false;
}
hqVisuDesigner.setComponentText("Input message", "Validation passed; check the device write result");
return WriteTagDouble(selectedSetpointTag, value);

Expected result Entering 1200.5 and clicking Submit sends one write to the selected device. Blank text, letters, -1 and 3001 only show feedback without writing. Verify the applied value through Tag readback.

Verify the result

Press Escape to discard unsubmitted input. A validation-passed message only confirms that the value meets the script’s rules; verify the write result separately.

1. Open through PUMP01 and PUMP02 separately. Verify the displayed value and the Tag receiving each submitted write.
2. Enter 1200.5 and leave the input; confirm the device is unchanged. Click Submit and verify device readback.
3. Submit blank text, abc, -1 and 3001; confirm feedback without writes. Temporarily change the entry parameter to PUMP99 and confirm no valid binding is established, then restore the parameter.
4. Close and reopen the destination page; confirm that the Input displays the current device value again.