Appearance
Page Designer reference
A page is a routable screen made of rows, columns and items (blocks, forms and links). This page documents the Explorer node Pages and the Page Designer: how to create a page, arrange it, set its route and menu entry, make variants for different roles and devices, and publish it. The model behind it is in How a screen is built; the available blocks are in the Block catalog.
Where to find it
Workspace > Pages lists the pages. Opening one opens the Page Designer. Pages that belong to an application or feature also appear under it. A page can also be edited in place while it runs, with the live editor (see below).
Page list
| Control | Description |
|---|---|
| New page name | Required. |
| Describe the page | A sentence or two. Generate with AI drafts the layout and blocks, using your own entities and data services, and opens the draft for review. |
| List | Pages with name, version and status. |
Designer layout
| Area | Content |
|---|---|
| Toolbar | Back, page name, chip with version, status and revision, autosave state (Draft · saved, unsaved changes, or Save conflict — someone else saved this page; resolve before continuing.), Undo, Redo, Save draft, Publish. |
| Left | The Component palette of blocks, forms and links, with search. |
| Centre | The Live canvas: the page rendered with sample data, with design handles. Select a row, column or item to edit it. |
| Right | The Properties sidebar with tabs Properties, Theme and AI. |
| Bottom dock | Problems, Translations, History, and others. |
| Top tabs | Overlays, Template and variants, Theme, Settings. |
Arranging
| Level | Settings |
|---|---|
| Row | Layout (columns or grid), Align, Edge spacing, Sticky, Defer mount, Width expression, Background (color, gradient, image URL), Spacing (padding Y and X), Border and corner rounding, Shadow, Animation, Content width, Height, Visibility. |
| Column | Name, Visibility, span out of 12 at each breakpoint, and Display as card with Max width, Padding and Elevation. |
| Item | The block, form or link; its name; its properties; events; visibility. |
Rows and columns can be given a name that appears only in the designer and the layout list.
Layout modes
| Mode | Behaviour |
|---|---|
| Simple list | Items in order. |
| Grid layout | Rows, columns and items with spans. |
| Free canvas | Items placed freely (x, y, width, height, stacking order, locked). A page uses exactly one of rows or canvas for its own content. |
Responsive
Arrange the smallest screen first, then switch breakpoint (sm, md, lg, xl) to change spans or visibility. A breakpoint can be given its own independent arrangement instead of rearranging the base. A node that exists only above the smallest size is not allowed.
Properties sidebar
For the selected item the Properties tab has these tabs: General, Layout, Appearance, Data, Events, Visibility.
| Tab | Content |
|---|---|
| General | Block name (optional), Variant. For a link: Target route, Link label key, Icon. For a row or column: its name. |
| Layout | Span at each breakpoint, row layout options. |
| Appearance | Style properties of the block. |
| Data | The block's properties from the block definition. Each property has a Source: static (a fixed value), binding (Scope, Key and Scope key) or expression. Which sources a property accepts is listed in the Block catalog. Complex values have structured editors, for example the grid column editor. |
| Events | Action chains for the block's events (see below). |
| Visibility | shown or hidden, or an expression; per breakpoint (inherit), shown, hidden. |
Copy block and Paste block move blocks between pages through the Studio clipboard.
Events and actions
Each event of the selected block can have an action chain. Steps, their configuration and the error handling options are described in How a screen is built. The page itself has an On load chain in Settings.
Settings tab
| Setting | Description |
|---|---|
| Title key | The translation key of the page title. |
| Render inside the module's app shell | Shows the page inside the module's persistent sidebar and header instead of standalone. |
| This page IS the module's app shell | The page is chrome only, with a content slot, and is never navigated to itself. |
| Access | Authenticated (default) requires a valid session. Public renders with no session, for a login or landing screen. |
| Use as login page | The runtime's authentication gate redirects here. Pair it with Public access. |
| Data source | The page's data providers and services: Data Services, Data Views, Providers, Entities. For a grid, the Query endpoint path and an optional Update endpoint path (enables inline edit). |
| Route pattern | Starts with /. Parameters: Name, Type (string, number, boolean, date) and Required. A required parameter must appear in the pattern as :name; an optional one is a query parameter. |
| Navigation | Add to navigation creates the menu entry: Area, Group, Menu label key, Icon (optional), Order (optional), Menu visibility. Remove from navigation deletes it. |
| Breadcrumb | Breadcrumb label expression and Parent route (optional). |
| On load | An action chain that runs when the page loads. |
Overlays
Modal and drawer surfaces declared on the page. Each has an id, a kind (modal or drawer), a title key, its own rows, and whether it can be dismissed. Open and close them with the openDialog and closeDialog actions.
Template and variants
| Part | Description |
|---|---|
| Template | A reusable page skeleton with slots; the page fills the slots. Wizard templates have steps. |
| Variants | A rule-selected override: Device class (mobile, tablet, desktop, or any), Role (optional), Param equals (JSON, optional) such as {"mode": "compact"}, and a Template override. The first matching variant wins. A variant must declare at least one of role, device class or param. |
| Variant layout overrides | The arrangement used when a variant applies. |
Theme tab
| Field | Description |
|---|---|
| Token set | The theme token set for this page, or the platform default. |
| Token overrides (DTCG JSON, optional) | Overrides for this page only. |
Problems that block publishing
| Message | Cause |
|---|---|
contractVersion must be 1 | The definition's contract version is wrong. |
id must be a dot-namespaced id (e.g. sales.order-detail) | The page id is not dot-namespaced. |
version must be semver | The version is not a semantic version. |
publisher is required, title is required (a translation key) | Missing required metadata. |
a Page's own content must be authored through exactly one of rows/canvas | Both or neither of rows and canvas. |
item "<id>" is declared twice | Duplicate item id. |
item "<id>" is kind "block" but declares no block config (also form, link) | Item content missing. |
link item "<id>" must declare a target route / must declare labelKey | Incomplete link. |
route.pattern must be a string starting with "/" | Bad route. |
route param "<name>" appears in the path pattern so must be required | A path parameter marked optional. |
route param "<name>" is required but does not appear in the path pattern | A required parameter that is not a path segment. |
route pattern names path param ":<name>" which is not declared in route.params | A path segment without a declared parameter. |
route param "<name>" is declared twice, unknown parameter type | Parameter list errors. |
menu.area is required, menu.group is required, menu.labelKey is required | Incomplete menu entry. |
breadcrumb.labelExpression is required | Incomplete breadcrumb. |
overlay "<id>" is declared twice, has unknown kind, must declare titleKey | Overlay errors. |
variant "<id>" must declare at least one of role/deviceClass/paramEquals | Variant without a rule. |
access must be "public" or "authenticated" | Invalid access value. |
| Block property problems | A block property with an unknown name, a missing required property, an invalid binding or a source the property does not accept. |
A page never mounts partially: if anything in its resolved tree is invalid, all problems are reported together and nothing is shown.
Live editor
Authorised authors can edit the page a tenant runtime is currently showing, in place. It uses the same inspector and command journal as the designer, selects by clicking on the live page, and moves rows with Move up and Move down instead of dragging. It edits top-level rows only: slots, overlays and variants are edited in the designer.
Publishing and versions
A draft autosaves with an optimistic-lock revision. Publish freezes a version; users only ever see published versions. History restores an older version into a new draft. A page shipped by a plugin shows an owner chip and is read only; use Customize an installed plugin to change it.
Permissions
Designing pages is an authoring action on the page artifact type. Opening a page at run time is governed by its Access value and by Screen Permissions (page:<name>, view). Blocks can be hidden or disabled by Widget Permissions.
API and CLI
/api/v1/authoring/pages (drafts, publish, versions), POST /api/v1/authoring/pages/ai-generate. erp artifact list|get|create|update|publish --type pages, erp plugin validate, erp page check <route> (renders the page in a real browser and reports errors), erp blocks list. Schema: Reference: page.
Related
How a screen is built, Block catalog, Form Designer, Build a page, Make a plugin work on desktop, tablet, and mobile.