Page variables, buttons, and Page Methods

The previous page was view-only. In this tutorial, AI turns it into a safe front-end simulator with Start simulation, Record package, and Stop simulation actions. You will learn how a button calls a Page Method and why page variables are not equipment state or durable data.

What you will accomplish

• Store temporary page state in globals
• Keep button behavior in named Page Methods
• Inspect structured action bindings
• Adjust one widget style yourself
• Verify interactions and refresh behavior in the runtime

Four concepts are enough for now

Concept	Purpose
Page variable (globals)	Temporary UI state for one page instance. It returns to its default after a refresh.
Page Method	Named interaction logic owned by the page. Buttons call it instead of embedding scripts in action fields.
Action	The structured binding between a widget event and a Page Method.
QX	The single runtime entry point through which Page Methods access widgets, page variables, objects, and queries.

This tutorial uses QX.globals because the count and running state are only a UI demonstration. Shared runtime state belongs in an App variable, a small value that must survive restarts belongs in a Saved variable, and real equipment state belongs on an Object.

Before you start

• Complete Build your first runnable app with AI.
• Stop the current app if it is running.
• Make sure pages/packaging-station.qxpage is saved and set as Home.

Step 1: Ask AI to add interactions

First note any existing workspace changes in Git or Task details. Then open AI Command Center, use @ to select qxpage, mention pages/packaging-station.qxpage, and send:

Goal: Turn the Packaging Workstation home page into an interactive, page-only simulation.

Page state:
- QX.globals.lineRunning, default false
- QX.globals.packCount, default 0

Interactions:
- A “Start simulation” button calls a named Page Method that sets lineRunning to true
- A “Record package” button is enabled only while lineRunning is true and increments packCount by 1
- A “Stop simulation” button calls a named Page Method that sets lineRunning to false
- Status and count widgets use expressions that read the page globals
- Each action provides a short, localizable operator message

Scope and constraints:
- Change only pages/packaging-station.qxpage and required i18n.json text
- Use the currently supported Page Method and structured action invocation contracts
- Do not put JavaScript in an action field and do not use a non-empty method-name string as an action
- Do not change variables.json, objects.json, graphs, C#, PLC, Pulsar, or Safety
- Label every control as a simulation control; it must not imply that it operates real equipment

Completion evidence:
- Validate the page and i18n.json
- Report the globals, Page Methods, each button-to-method binding, and the validation result

Main project output for this tutorial

This task should still change only:

• pages/packaging-station.qxpage
• i18n.json

Inside the page file, AI adds globals, methods, and widget actions. variables.json should not change because this tutorial does not create a shared App variable.

Step 2: Inspect the result in the editor

1. Open the packaging-station page.
2. Select empty canvas space and find Methods in the page Properties panel.
3. Confirm that named methods exist for starting, counting, and stopping. Their exact names may differ, but each responsibility should be clear.
4. Select each button and inspect its action in Properties. It should target the correct method.
5. Select the status and count widgets and confirm that their expressions read QX.globals rather than a hard-coded result.
6. Confirm that Problems has no errors.

The important design is this visible chain:

Button event → structured Action → Page Method → QX.globals → rendered update

Your manual adjustment: Emphasize the package count

Keep one small design decision for yourself:

1. Select the widget that displays the package count.
2. Open its style-related section in Properties.
3. Increase the font size by one step and choose an accessible emphasis color that differs from the title.
4. Save the page with Cmd+S or Ctrl+S.

This change does not touch behavior or data. It proves that the AI output remains editable through the visual editor.

Step 3: Run the acceptance check

1. Select Start in the title bar and wait for Running.
2. Open the runtime from App Hub.
3. Select Start simulation. The status should change to running.
4. Select Record package three times. The count should become 3.
5. Select Stop simulation. The record button should become unavailable again.
6. Refresh the runtime page. The status and count should return to their defaults.

The final behavior is expected, not data loss: QX.globals belongs only to the current page instance.

Safety boundary

warning

Page Methods are UI event glue. They must not own equipment batches, long waits, low-level communications, motion control, or safety interlocks. A real Start button should call an engineer-approved Object or Graph method instead of implementing the machine sequence on the page.

Do not connect these working buttons to field equipment. The next tutorial first creates a simulated Object and a debuggable Graph, then makes the page call that explicit capability.

Recovery guide

Symptom	Check and recovery
A button does nothing	Save and refresh the runtime. Confirm that the action is a structured binding with method, and that the target method still exists.
The count does not update	Check that the widget expression reads QX.globals.packCount and that the method changes the same key.
The count returns to zero after refresh	This is the intended page-global boundary. Do not hide it with browser storage. Redesign with Saved variables or business storage when persistence is required.
Problems reports an unknown QX.* reference	Mention the page and ask AI to repair it from the current diagnostics without adding a broad fallback.
AI appears to have changed a graph or object	Compare with the pre-task baseline and ask AI to explain. Revert only out-of-scope changes confirmed to come from this task.

You can copy this recovery prompt:

Analyze and fix only the current Problems diagnostics in @pages/packaging-station.qxpage.
Keep the existing layout and three simulation interactions. Do not add objects, graphs, C#, or persistence.
Validate again and explain the cause after the repair.

Next

The next tutorial upgrades the page simulation to a layered simulated device flow and uses breakpoints to inspect success and timeout paths: Simulated Object, Graph, and Debug.