Properties Editor (Right Panel)
The Properties Editor is context-sensitive — it shows the configuration options for whatever is currently selected in the canvas or App Tree.
Context-Sensitive Panels
The Properties Editor has four distinct modes depending on what is selected:
| Selection | Properties Shown |
|---|---|
| Nothing selected / App root | App name, icon, access roles, navigation config, app variables |
| AppPage selected | Page title, route pattern, required roles, SEO settings |
| Pane selected | Layout type (grid/flex), columns, gap, padding, breakpoint overrides, pane type (normal/modal) |
| Widget selected | Widget-type-specific config, data binding, actions, layout position, visibility rules, Custom JS |
Widget Properties Structure
When a Widget is selected, the Properties Editor shows four tabs:
Config
Widget-type-specific properties. Each property field accepts either a literal value or a {{ token }} expression. A small "T" button next to each field switches to token mode.
Layout
Grid position and size — colStart, colSpan, rowStart, rowSpan — with per-breakpoint overrides.
Actions
Event-to-action bindings. Lists all events the widget can emit (e.g., onClick, onRowSelect). Click + Add Action to configure what happens.
Visibility
Role-based visibility rules: visibleTo (role list) and/or a visibility expression ({{ context.roles.includes('admin') }}).
Token Mode for Properties
Any property field can accept a {{ }} token expression instead of a literal value. To switch a field to token mode, click the "T" icon next to the field — the input changes to an expression editor with autocomplete for available tokens:
// Literal mode (default)
title: "Lead Detail"
// Token mode
title: "Lead: {{ route.id }}"
// Complex token
dataSource: "GetLeadById"
params:
id: "{{ route.id }}"
tenantId: "{{ context.tenantId }}"
Breakpoint Property Overrides
Properties in the Layout tab show the Desktop value by default. To override for Tablet or Mobile, use the device tabs at the top of the Layout section:
- A property with no override shows the Desktop value at all breakpoints
- A property with a Tablet override inherits Desktop → Tablet and Tablet → Mobile (unless Mobile is also overridden)
- Overridden values show a small device icon badge next to the field
Actions Tab in Detail
For each widget event (e.g., onClick), you can configure a single action or a chain of actions. The Actions tab shows:
- A dropdown to select the event
- A list of configured action steps (in order for chains)
- Per-action settings panel — specific to the action type (navigate target, workflow ID, variable name, etc.)
- A condition field:
if {{ expression }}— the action only fires when the expression is truthy
The Properties Editor validates all inputs as you type. Malformed token expressions are underlined in red with a tooltip explaining the issue. Missing required fields are highlighted before you can save. This prevents broken app definitions from being saved to the service layer.