Create Pages and Components
A Page is an HMI screen that an operator ultimately uses, with the .qp extension. A Component is a reusable visual module inside an App, with the .qpc extension. Both can switch between Design / Preview / Source.
Which one to use
| Need | Use |
|---|---|
| Home Page after sign-in, equipment overview, alarm, or recipe screen | Page (.qp) |
| Status card, button group, or station area reused by several Pages | Component (.qpc) |
| General visual capability already supplied by a package | Package Component |
| A small layout used on only one Page | Keep it directly in that Page |
A Component is not a standalone runtime entry. A Page can be set as home or opened through navigation.
Where to start
- Open the context menu under Resources → Pages and select New Page.
- Enter a clear, stable, unique name such as
overvieworstation-detail. - For reusable content, create a Component under Components.
- Compose visual elements in Design and use Source for precise logic and styling.
- Save, check the Page in Preview, then run Build and complete runtime acceptance.
Select Set as Home Page from a Page context menu to choose what the Runtime root and Player open by default.
Design, Preview, and Source
| Mode | Best for | What it does not do |
|---|---|---|
| Design | Add Components; adjust geometry, properties, styles, and events; inspect different content sizes | It does not perform real Object calls or replace runtime acceptance |
| Preview | Check layout, input, navigation, animation, and live data bindings in the editor | It does not Build, Deploy, or Start, and does not include unsaved drafts |
| Source | Edit Page structure, styles, state, and complex event logic | It does not update an existing deployment automatically |
Preview uses the deployed App on the currently bound Runtime target. It reuses the same App only when it is already Previewing; otherwise it enters Previewing from Stopped on demand. Preview does not reuse Running or Debugging, which must be Stopped first. If the target has no deployment for this App, Preview asks you to Build first.
Real Object calls in Preview reach the current Runtime target. After equipment is connected, Preview is not a side-effect-free static canvas. Outputs, motion, and production actions require the site's test authorization and acceptance procedure.
Design a Page
1. Define the information hierarchy
Start with the operator's three recurring questions: What is the current state? What can I do next? How do I recover from failure? Keep primary state and actions on the first screen, and put diagnostics or infrequent settings in a secondary area or separate Page.
2. Build the visual structure in Design
- Drag a Component from an installed package or the App's own
.qpcfrom the Palette. - Select an element and use the right Inspector for Geometry, Layout, Spacing, Typography, Appearance, events, and bindings.
- Use multi-select, alignment, and distribution tools for consistent spacing.
- Double-click an App Component instance to open its
.qpc; nested Components can be opened the same way. - Use undo / redo to inspect each visual change, then save before switching to Preview.
A Page has one top-level visual root. A normal canvas gives that root the Page dimensions and background, then arranges content inside it. Do not infer real dimensions from editor zoom; Design, Preview, and runtime all use the Page's own CSS layout.
3. Reuse consistent behavior with Components
Extract a repeated visual unit into a Component when it should be maintained consistently. Give it clear inputs, user actions, and default styling, then reuse it across Pages. Role controls are in the Inspector's Permissions section. Keep account switching accessible, and remember that hiding UI never replaces authorization for a sensitive operation.
Ordinary reuse can stay in Design and Inspector. When you need to code Component inputs, events, the root element, or permission forwarding, continue with Advanced: Page source development.
Connect App capabilities
Objects and QG
A Page can call Objects configured in the current App. Use Source completion to choose the exact instance and method instead of copying device addresses or protocol details into the Page. Equipment sequences, waits, timeouts, and recovery branches belong in QG or a business capability; the Page should express intent and display the result.
Design does not perform real Object calls. Preview, Start, and Debug calls depend on the current Runtime target and its state, so accept at least the normal, timeout / fault, and repeated-action paths.
Queries, Variables, and navigation
Maintain App-level Queries, Variables, and navigation centrally in Settings, then use them through Page bindings or configured capabilities. Do not duplicate external-service addresses and authentication across Pages. Use the project's approved persistence capability for values that must survive a restart rather than temporary Page state.
Localization
Maintain locales and messages in Settings → I18n, then use the corresponding text in the Page. Before delivery, verify the default locale, switched layouts, long-text truncation, and missing-message behavior.
Images and 3D models
Place images, fonts, GLB / GLTF files, and other read-only assets under assets/**. Use workspace-root-relative paths such as assets/logo.png or assets/models/cell.glb. The same path works in Design, Preview, and Runtime. Mutable runtime data must not be written back into assets/**.
Current App user
An App user represents the operator for role-controlled content inside a Page. Add the CurrentUser Component when a Page should display or switch the current operator, and keep it outside any restricted region that could hide itself. See App users, roles, and runtime-page sign-in for configuration and Advanced: Page source development for source usage.
Recommended path from editing to runtime
- Complete the change in Design and Source, then save it.
- Review live markers for the current file and resolve obvious Page-source and type issues.
- Open Preview and check visuals, input, navigation, and interactions without equipment side effects.
- Stop the current runtime instance, then run Build. Resolve errors from this Build in Problems.
- Use Start for normal acceptance or Debug for breakpoints and failure paths.
- From the Runtime root or Player, verify the home Page, sign-in, display resolution, and long-running behavior.
Live editor markers and Problems are different results: live markers follow the open document, while Problems contains diagnostics for saved project files from the latest Build.
Acceptance checklist
- Page names are unique, and the configured home entry refers to an existing
.qp. - Dimensions, text, colors, and interaction agree across Design, Preview, and Runtime.
- Reused
.qpcinstances have correct props, events, and styles on every Page. - Keyboard use, focus, contrast, touch targets, and each supported locale have been checked.
- Assets use
assets/...paths and are present in the target environment. - Object calls show loading, success, failure, and recovery without presenting a fault as a normal result.
CurrentUsershows the App user, and role branches are accepted on a real runtime Page.- After Build succeeds, Start / Debug and Player use the same deployed version.
Common issues
Online documentation or an old project shows another Page extension
Current Pages use only .qp, and reusable Components use only .qpc. Do not create compatibility copies or continue in an old format. Move the content into the current files and update every reference.
Preview says a Build is required
The current Runtime target has no usable deployment for this App. Save changes, make sure the running instance is stopped, then run Build. Preview never Builds or Deploys on its own.
Preview or Runtime still shows previous content
Confirm that the editor tab has no unsaved marker, Build succeeded, and the intended Runtime target is selected. Preview, Start, and Debug do not read unsaved drafts.
Content is visible in Design, but an Object action does nothing
Design does not perform real Object calls. Switch to Preview, and confirm that the target has the current App deployed, the Object configuration is valid, and the call cannot cause an unauthorized site action.
A Component does not resize or accept Page styles correctly
First check the Component's root layout, size constraints, and conflicting outer styles. When you need to inspect the source root or attribute forwarding, see Advanced: Page source development.
An image or model is missing on the target
Confirm that the file is under assets/**, source uses a forward-slash assets/... path, and Build ran again. Do not reference a development-machine absolute path or an editor-only temporary URL.