Table: data binding, template reuse and filtering

Prepare the page and Table

Requires an installed, licensed add-in and Mingcedar runtime access. Follow the numbered steps. After each configuration, save, update with MX Design → Export → Export HTML and reopen the screen.

• Steps 1–2 need no PLC. Step 3 requires readable numeric Tags PLC_LINE01.PUMP01.SPEED and PLC_LINE01.PUMP02.SPEED; step 4 adds the same two Tags under PLC_LINE02.
• Table name is the displayed title. Quotes specify literal text; unquoted text is first resolved as a variable or expression. ExportTable uses the component name, configured in step 4D.

1. Create a blank PowerPoint slide. Open MX Design → Page → Nav Path, set its Page Code to pump_table and choose Save.
2. Open MX Design → Templates → Library, select the built-in Table card and choose Insert template. Select the complete inserted Table group and choose Templates → Edit Instance.
3. Enter the code below in Table name in Template Edit, including its double quotes. Complete steps 1A and 1B before saving.

"Pump speeds"

• Installation and authorization
• Export and publish the screen package

1A. Fixed headers: enter a one-dimensional array

In the same Template Edit window, paste the array into Headers. Leave Table text ID empty and set Header text IDs to []. Continue with Rows.

• The three strings become the column headings. Do not quote the entire array.

["Pump", "Area", "Speed"]

1B. Fixed rows: enter a two-dimensional array

Paste this two-dimensional array into Rows. Each inner array is a row and each item is a cell. Choose Save, export and open pump_table in Mingcedar.

• Leave each Column layout width blank for equal widths. For custom widths, enter 40, 20 and 40 in the three fields; if a single width field is shown, enter 40,20,40. Set Font size (px) to 14.
• Table displays plain text and scrolls when content exceeds its height. It has no built-in pagination, row buttons or cell editing.

[["PUMP01", "A", "1200 rpm"], ["PUMP02", "B", "900 rpm"]]

Expected result The table shows three columns and two rows: PUMP01 / A / 1200 rpm and PUMP02 / B / 900 rpm.

2A. Define the array in Page Script

On pump_table, open MX Design → Scripts → Page Script, click New, name it table-data and paste the complete code below. Enable and save it. Edit this document in subsequent steps.

• Page variables belong to the current page. Another page needs its own Page Script.

var pagePumpRows = [
  ["PUMP01", "A", "1200 rpm"],
  ["PUMP02", "B", "900 rpm"]
];

2B. Bind Rows to the variable

Select the Table, open Templates → Edit Instance and replace Rows with the unquoted variable name below. Choose Save, export again and reopen the page.

• =pagePumpRows also evaluates the variable explicitly; "pagePumpRows" is a string, not an array lookup.
• The array holds data from assignment time. Even an array constructed with ReadTagDouble at Page Script top level is not rebuilt by Tag updates. Use the function in step 3 for live data.

pagePumpRows

Expected result The table still displays the two rows from step 1.

3A. Define a live Tag-reading function

Open Page Script on pump_table, select table-data, replace all of Code with the function below and save. Both full Tag names must match the project.

• Each call rereads the Tags. The second argument, 0, is the fallback when a read fails. Step 4 adds quality checks to distinguish unavailable data from a real zero.

function livePumpRows() {
  return [
    ["PUMP01", "A", ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0)],
    ["PUMP02", "B", ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0)]
  ];
}

3B. Bind Rows to the function call

Open Edit Instance for the Table, replace Rows with the call below and save. After exporting, change or observe PLC_LINE01.PUMP01.SPEED in Mingcedar and compare the first row.

• Rows contains the call; the function definition stays in Page Script. Refresh depends on host data updates rather than a fixed sampling interval.

livePumpRows()

Expected result When the runtime receives new data, the first Speed value updates while the second row continues to show PUMP02.

4A. One shared function for two lines

Replace all of Code in table-data with the block below and save. The function reads four explicitly listed Tags, then filters by line, area and pump. Keep the initial tableArea and pumpFilter values and continue through steps 4B–4D.

• All four Tags must be readable. A quality other than good displays Unavailable.
• tableArea="ALL" selects every area; pumpFilter="" selects every pump.

var tableArea = "ALL";
var pumpFilter = "";

function buildPumpRows(plc) {
  if (plc !== "PLC_LINE01" && plc !== "PLC_LINE02") {
    throw new Error("Unsupported line");
  }
  if (["ALL", "A", "B"].indexOf(tableArea) < 0) {
    throw new Error("Unsupported area");
  }
  var pumps = [
    { plc: "PLC_LINE01", area: "A", pump: "PUMP01",
      speed: ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE01.PUMP01.SPEED") },
    { plc: "PLC_LINE01", area: "B", pump: "PUMP02",
      speed: ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE01.PUMP02.SPEED") },
    { plc: "PLC_LINE02", area: "A", pump: "PUMP01",
      speed: ReadTagDouble("PLC_LINE02.PUMP01.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE02.PUMP01.SPEED") },
    { plc: "PLC_LINE02", area: "B", pump: "PUMP02",
      speed: ReadTagDouble("PLC_LINE02.PUMP02.SPEED", 0),
      good: ReadTagQualityGood("PLC_LINE02.PUMP02.SPEED") }
  ];
  return pumps.filter(function (pump) {
    return pump.plc === plc &&
      (tableArea === "ALL" || pump.area === tableArea) &&
      (pumpFilter === "" || pump.pump === pumpFilter);
  }).map(function (pump) {
    return [pump.pump, pump.area,
      pump.good ? pump.speed.toFixed(0) + " rpm" : "Unavailable"];
  });
}

4B. Set the template title

Open Edit Instance for the Table, replace Table name with the string below and retain the three Headers from step 1. <PLC> is replaced by the line code when the instance is configured. Complete step 4C before saving.

"<PLC> pump speeds"

4C. Pass the instance PLC into Rows

Replace Rows with the call below and choose Save. <PLC> is still unresolved; complete template saving and instance configuration in step 4D before exporting.

• Keep the quotes around the placeholder so the resolved line code is passed as a string.

buildPumpRows("<PLC>")

4D. Save the template and insert two instances

Save the current Table as a template, then insert two configured instances. No additional outer group is needed for this example.

• The template contains Table configuration but not the page document table-data. Other destination pages need the shared function and variables as well.

1. Select the complete Table, open Templates → Library and choose Save selection. Set Template name to Pump speed table, retain the default Group, confirm that Captured variables contains PLC and choose Save. Use another unique name if this one exists.
2. Close the library and delete the original Table that still contains <PLC> from the page. Reopen Library, select the saved Pump speed table and choose Insert template twice.
3. Select each new instance root and open Templates → Edit Instance. Enter PLC_LINE01 for the first PLC and PLC_LINE02 for the second, without quotes. Choose Save for each instance.
4. Open MX Design → Behaviors → Browse. Right-click each Table node in the component tree, choose Rename Component and name them Line01Table and Line02Table. If there is an outer group, expand it and name the actual Table. Save the presentation and export again.

Expected result Line01Table shows the two PLC_LINE01 pumps; Line02Table shows the two PLC_LINE02 pumps. Each title includes its own line code.

5A. Pass area from an entry page

Create an entry slide with an Area B rectangle button. In MX Design → Behaviors → Browse, drag Click Script onto it, open the binding, enter the code below and save. Reuse this procedure for later buttons.

• Complete step 5B, then use Export HTML to export the complete presentation containing both this entry page and pump_table. A single-page export does not contain the other page.

return hqVisuDesigner.openPage("pump_table", {
  parameters: [{ key: "area", value: "B" }]
});

5B. Read and validate area on the destination

Return to pump_table and open Page Script → table-data. Replace only var tableArea = "ALL"; with the block below; keep pumpFilter and the entire buildPumpRows function. Choose Save and export. In Mingcedar, open the entry page and click Area B.

var tableArea = GetPageParameter("area", "ALL");
if (["ALL", "A", "B"].indexOf(tableArea) < 0) {
  throw new Error("Area must be ALL, A or B");
}

Expected result Opening through the B area button should show only PUMP02 / B for each line. An absent area defaults to ALL.

6A. Switch areas on the current page

On pump_table, create an Area B button and bind Click Script as in step 5A. Enter the code below, save and export again, then click the button.

• Pump and area filters apply together. The table is empty when no pump matches both.

hqVisuDesigner.writeVariable("tableArea", "B");

Expected result With no pump filter, each table shows only its Area B PUMP02.

6B. Add an All areas button

Add an All areas button to pump_table, place this code in Click Script and save. It sets the page variable tableArea to ALL.

• The button updates current-page state. Reopening the page initializes tableArea from the entry area parameter again.

hqVisuDesigner.writeVariable("tableArea", "ALL");

Expected result With no pump filter, clicking All areas restores two rows in each table.

6C. Replace the complete data array

Insert a separate Table on pump_table. Set Table name to "Inspection status" and use the step 1A Headers. Create Page Script document table-status with the complete step 2A array; keep table-data. Set the new Rows to pagePumpRows, add the Click Script below to Switch inspection data and save.

• The button replaces pagePumpRows without changing the function binding of either live table.

hqVisuDesigner.writeVariable("pagePumpRows", [
  ["PUMP01", "A", "Inspection due"],
  ["PUMP02", "B", "Inspection complete"]
]);

Expected result After the click, the inspection-status table displays Inspection due and Inspection complete.

7A. Add a separate Input for pump filtering

On pump_table, open Templates → Library, select Input and choose Insert template. In Behavior Browser, right-click its instance root and use Rename Component to name it Pump filter. Open Templates → Edit Instance, set Input mode to Plain Input and save. Add an Apply pump filter button with this Click Script.

• Input supplies the filter text, the button updates page state and Table displays the result. See the Input tutorial for device setpoint editing.

var pump = String(template.getValue("Pump filter")).trim().toUpperCase();
if (["", "PUMP01", "PUMP02"].indexOf(pump) < 0) {
  throw new Error("Enter PUMP01, PUMP02 or leave blank");
}
hqVisuDesigner.writeVariable("pumpFilter", pump);

Expected result After exporting again, click All areas. Type PUMP01 and click Apply pump filter: each table shows one PUMP01 row. Lowercase pump02 filters as PUMP02.

• Continue: parameter-driven Input and submission

7B. Clear only the pump filter

Add a Clear pump filter button, enter this code in Click Script and save. It clears pumpFilter without changing the text still visible in the input.

• Area filtering remains active. After choosing Area B and clearing the pump filter, each table shows its PUMP02.

hqVisuDesigner.writeVariable("pumpFilter", "");

8. Export the current filtered result

Add this Click Script to Export LINE01 and confirm the Table component name is Line01Table (step 4D). Save and export, then click Area B, Clear pump filter and Export LINE01 in the runtime.

• Export includes all filtered rows, including rows outside the scroll viewport. It reevaluates the data, so values can be newer than the last displayed frame.
• The browser controls the save location and download completion.

ExportTable("Line01Table", "line01-filtered.csv", "csv");

Expected result The browser downloads line01-filtered.csv with the Pump, Area and Speed headers and the current PLC_LINE01 PUMP02 data.