Layout Components
Layout components are containers that organize child components and page structure.
This reference lists definition, custom configuration, data configuration, action configuration, and limitations. Shared Design fields: Design Panel.
General
Containers provide one or more sub-canvases. Children follow the parent’s layout and alignment.
Components overview
| Component | Clients | Data tab | Action | Pattern |
|---|---|---|---|---|
| View | Web, Native App | — | ✓ | Basic container |
| List | Web, Native App | ✓ | List item only ✓ | Repeat render |
| Tab View | Web, Native App | — | Tab page only ✓ | Tab switching |
| Conditional View | Web, Native App | — | Branch only ✓ | Conditional branches |
View
Definition
Basic layout container — group components, Flex alignment, local scroll, hover styles.
⌨️ Shortcut: F
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Edit state | enum | Normal / Hover | Hover Web only | Separate Normal and Hover styles. |
| Convert to Conditional View | — | — | All | Converts this View to a Conditional View at the end of the layout flow. |
Action configuration
Triggers: On click, On hover, On enter viewport, On scroll in viewport. See Trigger List.
List
Definition
Repeats one List item template per record — product lists, comments, messages. Supports vertical/horizontal layout, grid, carousel, load more, and pull-to-refresh.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Direction | enum | Vertical / Horizontal | All | Scroll axis; editor adjusts aspect when switching. |
| Columns | integer | 1 | Vertical, carousel off | Items per row. Fixed uses value; Auto computes from container width, item width, column gap. |
| Rows | integer | 1 | Horizontal, carousel off | Items per column. Auto from height, item height, row gap. |
| Row gap | integer (px) | empty | All | Vertical spacing between items. |
| Column gap | integer (px) | empty | columns > 1 | Horizontal grid spacing. |
| Header | boolean | false | All | Sticky header sub-canvas (single instance, not repeated). |
| Carousel | boolean | false | All | Carousel mode; locks columns/rows to 1. |
| Autoplay | boolean | false | Carousel on | Auto-advance slides. |
| Loop | boolean | true | Carousel on | Wrap from last to first slide. |
| Indicators | boolean | true | Carousel on | Dot indicators. |
Load settings
Open via the gear icon under custom configuration.
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Scroll to bottom on refresh | enum | Never / Always / Manual refresh / Auto refresh | All | After refresh, scroll to bottom (chat, logs). |
| Reverse load | boolean | false | All | Load more when scrolling up (history from bottom). |
| Preserve child state | boolean | false | All | Keep inputs inside items across data refresh. |
Data configuration
On the Data tab.
| Property | Type | Default / options | Description |
|---|---|---|---|
| Data source | dataset | empty | Table query/subscription with filter, sort, dedupe, limit. Subscription disables pull-to-refresh and load more. |
| Filter | expression | empty | Filter logic; empty filter variables may return unfiltered data. |
| Sort | enum | empty | Sort order. |
| Dedupe | boolean | false | Show one row per duplicate key; sort field should match dedupe field. |
| Limit | integer | empty | Max records per request. |
| Load more | boolean | true | When limit > 0, append next page at scroll end. Requires fixed list height (not fit-content). |
| Pull to refresh | boolean | false | Native App pull gesture to reload. |
List pitfalls:
- Load more: List height must be fixed (px or %) — fit-content has no scroll region.
- Missing filter values: If a filter depends on an empty variable, you may get unfiltered rows (e.g. one arbitrary city when city is unset).
Row key: At runtime, the list assigns each row of data a stable, unique row key so list items can be identified and reused — for example, to tell which rows still exist and which are new after a refresh. The row key comes from the data source:
- Table query/subscription: uses each record’s id by default. Record ids are generated when the record is created and are stable and unique, so no extra setup is usually needed.
- Third-party API: uses the unique identifier field you select in the API query configuration. Choose a field that is genuinely unique and never changes, such as a product code or order number.
- Local data / static arrays: each data object must carry its own unique id field.
Missing or duplicate row keys break how list items are identified and reused, which can show stale or mismatched content after an update and let temporary state such as input values leak between rows. With Preserve child state enabled, the list reuses items by row key across refresh and refetch to keep temporary state, so every row should carry a stable, unique id. The rendering mechanism uses keys to identify and reuse list elements — missing or duplicate keys corrupt list item state and updates; see Rendering Lists in the React documentation.
Action configuration
The list container has no action configuration. Configure List item (and children) for clicks, navigation, modals — use list item and index context.
Sub-components
List item
Template canvas — design once, repeat per row.
Binding:
| Field | Meaning | Example |
|---|---|---|
| List item | Current row object | list item.name, list item.price |
| Index | Zero-based row index | index + 1 for display row number |
Auto layout: With Auto columns/rows, runtime computes fit; Fill remaining width/height stretches items to fill the row/column.
Header
Optional sticky top area — filters, column titles, batch actions. Binds page variables or static content, not per-row fields.
Tab View
Definition
Switch between tab panels on one screen — order status, categories, grouped info. Each tab has its own sub-canvas.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Mode | enum | Default / Custom | All | Custom adds Selected/Unselected tab style sub-canvases. |
| Default tab index | integer | 0 | All | Active tab on load; bindable; invalid values fall back to 0. |
| Tabs | array | 2 initial tabs | All | Titles and order; first two cannot be deleted. |
| Preserve state on switch | boolean | true | All | Keep hidden tab input/scroll state. |
Action configuration
Parent has no action configuration. Configure Tab page sub-canvas or children inside.
Sub-components
- Tab page — content for each tab; only active tab visible.
- Custom tab styles (Custom mode) — Selected tab and Unselected tab appearance.
Conditional View
Definition
Mutually exclusive branches — logged in/out, roles, business states. One branch visible at a time.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Preserve state on switch | boolean | true | All | Keep hidden branch form/scroll state. |
Branches
| Setting | Type | Default / rules | Description |
|---|---|---|---|
| Branches | array | 1 normal + 1 init branch | Add, delete, reorder. Each normal branch has a sub-canvas. |
| Condition | boolean expression | normal default: always | When true, branch can show. Put specific conditions first. |
| Init branch | built-in | cannot delete | Shown while data/conditions are not ready; no condition field. |
Notes:
- Higher branches win when multiple conditions are true.
- Fit-content height follows the active branch.
- Use Switch conditional branch action on buttons to change branch programmatically.
Action configuration
Parent has no action configuration. Configure branch sub-canvas or children inside.
Sub-components
One sub-canvas per branch, including the built-in Init branch.