Product: Mingcedar Studio DESIGNER

Table: data binding, template reuse and filtering | Mingcedar Studio

Configure fixed data, page arrays, live Tags, reusable instances, area and pump filters on one page, then export the filtered result.

Published 2026-10-25T12:48:42.679559532Z Updated 2026-10-26T19:56:55.673638979Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="recipe-parameterized-table">Tutorial: Table: data binding, template reuse and filtering</h2>

Configure fixed data, page arrays, live Tags, reusable instances, area and pump filters on one page, then export the filtered result.

<h3 id="recipe-parameterized-table-item-1">Prepare the page and Table</h3>

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.

<ul>

<li>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.</li>

<li>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.</li>

</ul>

<ol>

<li>Create a blank PowerPoint slide. Open MX Design → Page → Nav Path, set its Page Code to pump_table and choose Save.</li>

<li>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.</li>

<li>Enter the code below in Table name in Template Edit, including its double quotes. Complete steps 1A and 1B before saving.</li>

</ol>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → Table nameJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Table → Table name">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>"Pump speeds"</code></pre></div>

<li><a href="/en/ppt/manual/windows-install/">Installation and authorization</a></li>

<li><a href="/en/ppt/manual/export-and-publish-screen-package/">Export and publish the screen package</a></li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-2">1A. Fixed headers: enter a one-dimensional array</h3>

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.

<ul>

<li>The three strings become the column headings. Do not quote the entire array.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → HeadersJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Table → Headers">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>["Pump", "Area", "Speed"]</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-3">1B. Fixed rows: enter a two-dimensional array</h3>

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.

<ul>

<li>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.</li>

<li>Table displays plain text and scrolls when content exceeds its height. It has no built-in pagination, row buttons or cell editing.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Table → RowsJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Table → Rows">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>[["PUMP01", "A", "1200 rpm"], ["PUMP02", "B", "900 rpm"]]</code></pre></div>

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

</article>

<h3 id="recipe-parameterized-table-item-4">2A. Define the array in Page Script</h3>

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.

<ul>

<li>Page variables belong to the current page. Another page needs its own Page Script.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Page Script → table-data">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var pagePumpRows = [

];</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-5">2B. Bind Rows to the variable</h3>

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

<ul>

<li>=pagePumpRows also evaluates the variable explicitly; "pagePumpRows" is a string, not an array lookup.</li>

<li>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.</li>

</ul>

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

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>If empty, check that the document is enabled, saved on the same page and uses the exact variable casing.</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-6">3A. Define a live Tag-reading function</h3>

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.

<ul>

<li>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.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Page Script → table-data">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>function livePumpRows() {

return [

["PUMP01", "A", ReadTagDouble("PLC_LINE01.PUMP01.SPEED", 0)],

["PUMP02", "B", ReadTagDouble("PLC_LINE01.PUMP02.SPEED", 0)]

];

}</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-7">3B. Bind Rows to the function call</h3>

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.

<ul>

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

</ul>

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

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>If stale, check Tag names, permission and quality, then verify Rows still calls the function rather than the earlier snapshot array.</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-8">4A. One shared function for two lines</h3>

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.

<ul>

<li>All four Tags must be readable. A quality other than good displays Unavailable.</li>

<li>tableArea="ALL" selects every area; pumpFilter="" selects every pump.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Page Script → table-data">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>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"];

});

}</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-9">4B. Set the template title</h3>

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.

</article>

<h3 id="recipe-parameterized-table-item-10">4C. Pass the instance PLC into Rows</h3>

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

<ul>

<li>Keep the quotes around the placeholder so the resolved line code is passed as a string.</li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-11">4D. Save the template and insert two instances</h3>

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

<ul>

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

</ul>

<ol>

<li>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.</li>

<li>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.</li>

<li>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.</li>

<li>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.</li>

</ol>

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

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>Identical data: check each instance PLC. Missing function: check current-page scripts. Remaining <PLC>: check Captured variables and the selected instance root.</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-12">5A. Pass area from an entry page</h3>

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.

<ul>

<li>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.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Entry-page Area B buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Entry-page Area B button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>return hqVisuDesigner.openPage("pump_table", {

parameters: [{ key: "area", value: "B" }]

});</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-13">5B. Read and validate area on the destination</h3>

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.

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Page Script → table-dataJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Page Script → table-data">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>var tableArea = GetPageParameter("area", "ALL");

if (["ALL", "A", "B"].indexOf(tableArea) < 0) {

throw new Error("Area must be ALL, A or B");

}</code></pre></div>

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

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>An area of C, an empty string or another unknown value stops script initialization. Correct the entry parameter and reopen the destination page.</li>

</ul></div>

</article>

<h3 id="recipe-parameterized-table-item-14">6A. Switch areas on the current page</h3>

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.

<ul>

<li>Pump and area filters apply together. The table is empty when no pump matches both.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Current-page Area B buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Current-page Area B button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("tableArea", "B");</code></pre></div>

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

</article>

<h3 id="recipe-parameterized-table-item-15">6B. Add an All areas button</h3>

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

<ul>

<li>The button updates current-page state. Reopening the page initializes tableArea from the entry area parameter again.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → All areas buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → All areas button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("tableArea", "ALL");</code></pre></div>

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

</article>

<h3 id="recipe-parameterized-table-item-16">6C. Replace the complete data array</h3>

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.

<ul>

<li>The button replaces pagePumpRows without changing the function binding of either live table.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Switch inspection data buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Switch inspection data button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("pagePumpRows", [

]);</code></pre></div>

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

</article>

<h3 id="recipe-parameterized-table-item-17">7A. Add a separate Input for pump filtering</h3>

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.

<ul>

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

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Apply pump filter buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Apply pump filter button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>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);</code></pre></div>

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.

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>PUMP99 leaves the previous filter unchanged. Blank input clears the pump filter. If the Input is not found, check its instance name, Pump filter.</li>

</ul></div>

<li><a href="/en/ppt/manual/recipe-page-parameter-input/">Continue: parameter-driven Input and submission</a></li>

</ul>

</article>

<h3 id="recipe-parameterized-table-item-18">7B. Clear only the pump filter</h3>

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.

<ul>

<li>Area filtering remains active. After choosing Area B and clearing the pump filter, each table shows its PUMP02.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Clear pump filter buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Clear pump filter button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>hqVisuDesigner.writeVariable("pumpFilter", "");</code></pre></div>

</article>

<h3 id="recipe-parameterized-table-item-19">8. Export the current filtered result</h3>

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.

<ul>

<li>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.</li>

<li>The browser controls the save location and download completion.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">Click Script → Export LINE01 buttonJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Click Script → Export LINE01 button">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>ExportTable("Line01Table", "line01-filtered.csv", "csv");</code></pre></div>

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

<div class="doc-step-troubleshooting">If the result differs<ul>

<li>If the table is not found, check the component name Line01Table. Its Table name title and an outer group name cannot replace the actual Table component name.</li>

</ul></div>

</article>

</div>