GuidedProcessPage
A process walked one page per step: a dark column per step before it starts, then each step's fields with every step on a dark panel at the start or end edge of the page.
Master
Press Start in the first column, then walk the import: Continue moves on, Skip moves on and marks the step to look at again, Save writes the time in the footer, and Submit on the last step sends the batch. Cancel goes back to the columns. Side puts the steps panel at the end or the start of the page. Stage narrows the box: under 1024 the columns stack, the steps become a drawer opened by the 4 | 6 counter, the quieter footer actions fold into the More menu, and on a phone they are icon buttons.
Usage
Use GuidedProcessPage for a process of a few steps that each need a page, like importing usage, registering a supplier or setting up a billing run. It is a blueprint: it only places kit GuidedProcess parts and keeps no state of its own, so the screen owns whether it has started, which step is on, what has been saved and whether the steps drawer is open. view intro is before the process starts: pass intro, one GuidedProcess panel per step, with shade 1 to 5 along the way and the first carrying the process name, Start and Cancel; from 1024 of box width they stand as columns across the page and scroll sideways when there are more than fit, and under 1024 they stack. view step is once it has: pass a GuidedProcess part header as header, the step's fields as children (a kit Form, laid out in columns as the step needs), a GuidedProcess part footer as footer, and a GuidedProcess part steps as steps. side puts the steps panel at the end edge (the default) or the start edge from 1024 of box width; give the steps part the same side. Only the step scrolls; the footer stays under it. Under 1024 the steps leave the page for a drawer from the same edge: keep stepsOpen in the screen, open it from the header's onStepsOpen, and close it with onStepsClose, which the steps' own close button, the sheet behind it and Escape all call. It goes in the AppShell page without a page header and fills it edge to edge. See contracts/guidedprocesspage.json for the full contract.
Do's
- A process of a few steps done in order where each step is a page of fields.
- Work that can be saved and picked up again part way through.
Don'ts
- Do not invent WizardPage, StepPage, a steps panel or a footer bar of your own. The parts are GuidedProcess.
- Do not put a PageHeader over it. The header part names the step.
- Do not use it for a short flow; two or three fields belong in a Modal with Steps.
- Do not put page padding on it. It fills the AppShell page; read contracts/layout.json.
- Do not give the steps part a different side from the page.
- Do not keep whether it has started, the current step, the saved time or the open drawer in the pattern. The screen owns them.
<GuidedProcessPage side="end" />