Product: Mingcedar CONTROL

Screen files, runtime menus, and popup templates | Mingcedar

Location: Configuration Center → Screen Files. Viewing requires screen:view; uploads and restores require screen:manage. Prepare a complete Mingcedar Studio export or custom HTML with its assets, preserving relative paths.

Published 2026-10-25T12:48:42.6393942Z Updated 2026-10-25T12:48:42.639393478Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="screens">Screens: Screen files, runtime menus, and popup templates</h2>

Upload HTML and assets, configure menus and popup templates, then check runtime data and access.

<h3 id="screens-item-1">1. Select a directory and publish screen files</h3>

<p>Location: Configuration Center → Screen Files. Viewing requires screen:view; uploads and restores require screen:manage. Prepare a complete Mingcedar Studio export or custom HTML with its assets, preserving relative paths.</p>

<ol>

<li>Select the assets root or a destination subfolder on the left and inspect the displayed User page directory.</li>

<li>Choose Content, then select files or a complete folder. Use a folder for a page bundle to preserve relative paths.</li>

<li>Review the entry HTML and dependencies in Pending Files. Enable Allow overwrite only when replacing existing files is intended.</li>

<li>Click Publish. This uploads pending files into the current directory; wait for Upload finished and its file count.</li>

<li>Refresh the directory, confirm the HTML and assets, and inspect Recent History. Then choose the HTML in Menus.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> The directory shows HTML, assets and the upload record. No separate version publication is needed.</p>

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

<li>Existing file: confirm the intended replacement before allowing overwrite.</li>

<li>No files selected: choose content again and inspect Pending Files.</li>

<li>Submission timeout: inspect the directory and Recent History before submitting again.</li>

</ul></div>

</article>

<h3 id="screens-item-2">Which runtime directory Screen Files uses</h3>

<p>Screen Files displays the active User page directory, and the Entry HTML selector in Menus scans that directory. Installation method or administrator configuration can change the path; use the value shown on the page.</p>

<ul>

<li>Place pages directly under assets or organize them in project subfolders.</li>

<li>A folder upload preserves its inner paths; relative references in HTML must match the resulting layout.</li>

<li>For manual file copies, use the displayed runtime directory rather than an unpacked installer directory.</li>

<li>If Menus cannot find the HTML, confirm its Screen Files location and refresh.</li>

</ul>

</article>

<h3 id="screens-history">Inspect recent records and restore a directory</h3>

<p>Recent History lists uploads, publications, and cleanup for the selected directory. Restore replaces the current runtime directory content with the chosen record.</p>

<ol>

<li>Select the directory and expand a recent record to inspect its time, action, and file count.</li>

<li>To restore it, click Restore and confirm the directory and record summary in the dialog.</li>

<li>Wait for completion, refresh the directory, then reopen its HTML from the runtime menu and verify assets and live functions.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> Restore replaces current runtime files. Open the screen from its menu to verify the result.</p>

</article>

<h3 id="screens-item-3">2. Create a direct primary-page menu</h3>

<p>Location: Configuration Center → Menus. Viewing requires menu:view; creation and editing require menu:manage. A primary Page (open HTML directly) opens one page; a Group holds secondary menus.</p>

<ol>

<li>Click New Primary and enter Default Name. Add an I18n Key if available; otherwise the runtime shows the default name.</li>

<li>Choose Page (open HTML directly) and select the uploaded file under Entry HTML, including its subfolder path.</li>

<li>Set Sort Order and icon. Turn on Login required when this entry should be visible only to signed-in users.</li>

<li>Click Create Primary Menu, or Update Primary Menu when editing, and wait for the save result.</li>

<li>Open it in the runtime menu; refresh the runtime page if it still shows an older menu list.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> The menu opens the selected HTML; uploaded files and assets determine its content.</p>

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

<li>Entry HTML missing: check Screen Files, refresh, and reopen Menus.</li>

<li>Menu missing: check the save result, Site, login state, and primary type.</li>

<li>Page 404: compare Entry HTML with the actual relative path in Screen Files.</li>

</ul></div>

</article>

<h3 id="screens-secondary-menu">Create a Group and secondary-page menu</h3>

<p>Create a primary Group before adding secondary pages. Alarm Scope is configured in the secondary-menu editor.</p>

<ol>

<li>Create a primary menu of type Group (contains secondary menus), enter its name, and choose Save and Manage Secondary.</li>

<li>Set the secondary Default Name and Entry HTML, then set Sort Order, icon, and Login required as needed.</li>

<li>For alarm filtering, click Configure and enter full Tag names, Device codes, or Device code.group codes. Closing that dialog does not save the menu; click Create or Update Secondary Menu.</li>

<li>Expand the Group in the runtime portal, open the page, and verify its alarm scope and access state.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> The secondary page and alarm scope are saved with its menu.</p>

</article>

<h3 id="screens-item-4">3. Create and save a popup template</h3>

<p>Open Admin → Popup Templates. Viewing needs screen:view; saving needs screen:manage. Select on the left, edit centrally and preview on the right. Switching prompts for unsaved changes.</p>

<ol>

<li>Click New and enter a unique Template Name. System Code is derived from the name and previewed in a read-only field.</li>

<li>Under Structure, arrange categories, subcategories, groups, and signal items. Enter actual signal suffixes; runtime combines PLC name, DiagnosisControl prefix, and suffix.</li>

<li>In Module Settings, enable alarms or trends and configure the corresponding scope. Save the whole template after closing the module dialog.</li>

<li>Live Preview shows structure and sample states without field writes. Verify actual Tag, alarm and trend bindings in runtime.</li>

<li>Click Save at the top, wait for confirmation and the Unsaved marker to clear, then reselect the template to check persistence.</li>

<li>Open a runtime equipment object using this template and verify its actual Tags, alarm scope, and trend results.</li>

</ol>

<p class="doc-step-result"><strong>Expected result</strong> Check the saved template’s object bindings and data in the runtime screen.</p>

</article>

<h3 id="screens-item-5">Popup template files and edits</h3>

<p>Each template is a local JSON file. POPUP_TEMPLATE_PATH specifies its directory; remove any .json suffix to get the directory path. Windows defaults to config/popup-templates/ under the installation root.</p>

<ul>

<li>Template names must be unique; keep System Code and template ID consistent.</li>

<li>After changing structure or module settings, click the top Save button to write the file.</li>

<li>Preview uses sample states; verify alarm and trend scopes separately in the running equipment context.</li>

</ul>

</article>

<h3 id="screens-item-6">Move an existing popup template to another project</h3>

<p>Back up destination templates and stop Web/App during maintenance. Copy complete JSON files to its configured template directory, restart Web/App and refresh the list to update the process cache.</p>

<ul>

<li>Check for an existing template ID or System Code before copying to avoid replacement.</li>

<li>Signal suffixes and alarm/trend scope must match Device and Tag codes in the destination project.</li>

<li>After migration, inspect the structure in the editor, save any needed adjustment, and open the popup from the actual runtime screen.</li>

</ul>

</article>

<h3 id="screens-item-7">Screen popup and alarm scope</h3>

<p>A Mingcedar Studio export can declare popup and alarm scope in JSON. Full Tag and group references include their Device Code; plcCodes contains the Device Code alone. Verify the actual scope at runtime.</p>

<ul>

<li>showWindow controls whether the page permits an alarm window.</li>

<li>tags lists full Tag codes, such as PumpPLC.Pressure.</li>

<li>plcCodes lists Device codes only.</li>

<li>functionGroupCodes, deviceGroupCodes, and signalGroupCodes use Device Code.group code.</li>

<li>An empty array adds no filter for that dimension; other page and template settings still affect the effective scope.</li>

</ul>

<span class="line"><span style="color:#005CC5"> "showWindow"</span><span style="color:#24292E">: </span><span style="color:#005CC5">true</span><span style="color:#24292E">,</span></span>

<span class="line"><span style="color:#005CC5"> "plcCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "functionGroupCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "deviceGroupCodes"</span><span style="color:#24292E">: [],</span></span>

<span class="line"><span style="color:#005CC5"> "signalGroupCodes"</span><span style="color:#24292E">: []</span></span>

</article>

<h3 id="screens-item-8">Verify the runtime page</h3>

<p>Open the menu in the runtime portal and inspect its entry file, assets, live values, popups, and login access.</p>

<ul>

<li>The menu opens the intended HTML, with images, styles, and scripts loading successfully.</li>

<li>Tag values agree with Tag Test quality and time, and popup objects bind to the intended Device.</li>

<li>Alarm and trend scopes include the target points, and Login required behaves as configured.</li>

</ul>

</article>

</div>

<strong>Figure 1: Screen Files</strong>

<p>The page shows directories, file or folder selection, Pending Files, and Publish. The selected directory has no pending files or history in this screenshot.</p>

</figcaption>

</figure>

<strong>Figure 2: Menus</strong>

<p>Primary-menu editing shows Name, Target, Sort Order, Enabled, Login required, and icons. Check the menu URL at the top.</p>

</figcaption>

</figure>

<strong>Figure 3: Popup Templates</strong>

<p>Edit template structure and alarm/trend modules, then inspect the current template in Realtime Preview.</p>

</figcaption>

</figure>

</div>