Product: Mingcedar Studio DESIGNER

Open Link (Click to Navigate) | Mingcedar Studio

Configure a component to open a page, URL, system menu, or scripted destination on click. Select Destination first, then enter the fields for that type.

Published 2026-10-25T12:48:42.667455732Z Updated 2026-10-25T12:48:42.667454941Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="interaction-open-link">Interactions: Open Link (Click to Navigate)</h2>

Configure a component to open a page, URL, system menu, or scripted destination on click. Select Destination first, then enter the fields for that type.

Open Link runs when a user clicks its component at runtime. Choose Internal page, External URL, System menu, or Run script under Destination.

</article>

<h3 id="interaction-open-link-item-2">How to use it: editor fields</h3>

Drag Open Link onto the target component, open the editor, and choose Destination. Fill the fields for the selected target type:

<ul>

<li>Internal page: enter an exported page file such as Main.html in Page address, or click Select PPT page... to choose from this presentation. Relative addresses resolve from the current exported page and must stay within the asset root.</li>

<li>External URL: select this destination for a complete external or intranet URL, then fill the fields shown for that mode.</li>

<li>System menu: select this destination for a host menu and confirm the target configured in the host.</li>

<li>Run script: use this when the destination depends on runtime state or the click combines actions.</li>

<li>Open options: choose HMI window or Page only, then set Fullscreen and New tab as needed.</li>

<li>Parameters (optional): add Key / Value pairs only when the destination needs context.</li>

</ul>

<div class="manual-code" data-code-language="text"><div class="manual-code-toolbar">TextText<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Text">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>// Run script: choose a page by state

if (ReadTagBoolean("PLC_LINE01.PUMP01.FAULT", false)) {

hqVisuDesigner.openPage("alarm_overview");

} else {

hqVisuDesigner.openPage("production_overview");

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

</article>

<h3 id="interaction-open-link-item-3">Parameters: sending values and reading them on the destination</h3>

For Internal page, add Key / Value rows under Parameters when the destination needs context. A scripted openPage call may supply strings, numbers, booleans, or null; the destination reads text values. Repeated keys keep their original order.

<ul>

<li>Editor sender: select Internal page and add Key / Value rows.</li>

<li>Script sender: hqVisuDesigner.openPage(pageCode, { frameTarget, parameters }); parameters must be an array, not a plain object.</li>

<li>Read the first value: GetPageParameter("PLC", "").</li>

<li>Read every repeated value: GetPageParameterValues("Area").</li>

<li>Read every parameter in original order: GetPageParameters().</li>

<li>The equivalent hqVisuDesigner.getPageParameter / getPageParameterValues / getPageParameters methods are also available.</li>

</ul>

<div class="manual-code" data-code-language="javascript"><div class="manual-code-toolbar">JavaScriptJavaScript<button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: JavaScript">Copy code</button></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code>// Source page: navigate within the package and pass context

hqVisuDesigner.openPage("device_details", {

frameTarget: "frame",

parameters: [

{ key: "PLC", value: "PLC_LINE01" },

{ key: "Device", value: "PUMP_01" },

{ key: "Area", value: "AREA01" },

{ key: "Area", value: "AREA02" }

]

});

// Destination Page Script

var plc = GetPageParameter("PLC", "");

var device = GetPageParameter("Device", "");

var areas = GetPageParameterValues("Area");</code></pre></div>

</article>

Use it to switch pages or open content, for example:

<ul>

<li>A Pump Details button on the overview page: use Internal page to select the exported Pump page.</li>

<li>For a host menu, choose System menu and verify its target in the host.</li>

<li>For a help, work-order, or reporting site, choose External URL and enter an address reachable at runtime.</li>

<li>For a static help page in the same package, enter its exported page address under Internal page.</li>

<li>For a destination computed from live state, use Run script.</li>

</ul>

</article>

<h3 id="interaction-open-link-item-5">Limitations and troubleshooting</h3>

An Internal page relative address must stay inside the current package's asset directory. Use a screen code for another package or System menu for a host menu. Do not use a path such as <code>../../other-screen/index.html</code> to navigate between packages.

</article>

</div>

Figure 1: Open Link: Internal page

For Internal page, enter Page address, select a presentation page, and configure Open options and Parameters.

</figcaption>

</figure>

</div>