]`, which is how a raw server code such as `paid` becomes a readable label without a lookup table in the view.
### 6.22 Choosing the right table
| The screen needs | Use |
| --- | --- |
| Users type into every row, add and delete rows | `dynamicTable` |
| A read-only or lightly interactive grid over server data | `table` |
| Server owns paging, sorting and filtering | `table` with `lazyLoad: true` and `TABLE-POST` |
| Cards instead of rows | `listGrid` |
| A repeating block of fields rather than a grid of cells | `dynamicPanel` |
`table` never uses `column.rows`; its cells are `columnsConfig`, keyed by `key`. `dynamicTable` never uses `columnsConfig`; its cells are `columns`, keyed by `name`.
### 6.23 `table` property map
Grouped so nothing has to be guessed.
| Group | Properties |
| --- | --- |
| Data | `dataSource` `tableItemsPath` `tableTotalPath` `lazyLoad` `params` `orderClause` `orderDirection` |
| Columns | `columnsConfig` `showColumnSettings` `columnSettingsMode` `columnSettingsStorageKey` `columnSettingsDialogTitle` `columnSettingsDataSourceName` `columnSettingsDataSourcePath` `saveColumnSettingsDataSourceName` `resetColumnSettingsDataSourceName` |
| Paging | `pageSize` `pageSizeOptions` `paginator` `paginatorStyle` `paginatorVariant` `paginatorAlign` `paginatorMaxButtons` `showPageSizeSelector` `prevLabel` `nextLabel` |
| Search & filters | `showQuickSearch` `quickSearchPlaceholder` `quickSearchParamName` `quickSearchCondition` `quickSearchCaseMode` `searchDebounceMs` `showDetailedSearch` `detailedSearchCaseMode` `enableSavedFilters` `savedFiltersMode` `savedFiltersDataSourceName` `savedFiltersItemsPath` `saveFilterDataSourceName` `deleteFilterDataSourceName` `savedFilterIdKey` `savedFilterNameKey` `savedFilterCodeKey` `savedFilterDescriptionKey` `savedFilterPayloadKey` |
| Actions | `rowActions` `rowActionsDisplayMode` `rowActionsDropdownButtonStyle` `rowActionVisibilityPath` `rowClickActions` `rowExpandActions` `headerActions` `headerActionsPosition` `headerActionsDisplayMode` `headerMenuEnabled` `headerMenuActions` `headerMenuOptions` `headerMenuPlaceholder` `headerMenuDataSourceName` `headerMenuDataSourceItemsPath` `headerMenuItemsPath` `headerMenuLabelKey` `headerMenuValueKey` `actionsLabel` `showActionsHeaderLabel` |
| Selection | `enableSelection` `selectionKey` `selectionActions` `selectionActionsLabel` `selectionItemTemplate` `selectLabel` `selectAllLabel` `selectRowLabel` `autoSelectCondition` |
| Inline edit | `enableInlineEdit` `inlineEditStartMode` `inlineEditSaveDataSourceName` `inlineEditCancelOnReload` |
| Expand & details | `expandableRows` `expandedDisplayMode` `expandedColumnsConfig` `expandedDataSourceName` `expandedDataSourceItemsPath` `expandedItemsPath` `expandedTemplate` `expandedEmptyMessage` `expandedRowActions` `showExpandChevron` `alwaysShowExpandChevron` `expandLabel` `collapseLabel` `rowClickOpensDetails` `detailsPanelTitle` |
| Export | `showExport` `exportFileName` `exportUseColumnPicker` `exportAllPageSize` |
| Appearance | `tableStyle` `stickyHeader` `rowHover` `responsiveMode` `flatHeaderSurface` `flatFooterSurface` `showHeaderControls` `headerCenterElementsPosition` `headerTemplate` `rowTemplate` `rowTemplateName` `emptyMessage` `loadingLabel` `width` `tabletWidth` `mobileWidth` `hidden` `visibleIf` |
| Virtual scroll | `virtualScroll` `virtualScrollRowHeight` `virtualScrollViewportHeight` `virtualScrollBuffer` |
Column (`columnsConfig[*]`) properties:
| Group | Properties |
| --- | --- |
| Identity | `key` (required) `label` `showHeaderLabel` `mobileLabel` `type` `showInTable` `showInDetails` `detailLabel` `sortable` `width` `align` `visibleIf` |
| Formatting | `formatLocale` `dateFormatPattern` `dateIncludeSeconds` `numberMinFractionDigits` `numberMaxFractionDigits` `numberUseGrouping` |
| Element cells | `elementType` `element` `controlActiveIf` `controlEnabledIf` |
| Status cells | `statusRules` `statusShowIcon` |
| Templates | `template` `templateName` `templateFieldMap` |
| Filters | `filterControlType` `filterOptionsSourceType` `filterOptions` `filterOptionsJson` `filterOptionsPath` `filterOptionsDataSourceName` `filterOptionsDataSourceItemsPath` `filterOptionLabelKey` `filterOptionValueKey` `filterMultiValueDelimiter` `filterToggleTrueValue` `filterToggleFalseValue` |
| Inline edit | `editable` `editorType` `editorPlaceholder` `editorOptions` `editorOptionLabelKey` `editorOptionValueKey` |
| Cell actions | `cellActionsEnabled` `cellActions` `cellActionsDisplayMode` `cellActionsPlaceholder` |
Enumerations, exact values:
| Property | Values |
| --- | --- |
| `columnsConfig[*].type` | `text` `date` `dateTime` `number` `element` (legacy, still rendered: `boolean` `html` `status` `toggleSwitch` `singleCheckbox`) |
| `columnsConfig[*].align` | `left` `center` `right` |
| `columnsConfig[*].filterControlType` | `auto` `text` `number` `date` `dateTime` `boolean` `select` `multiSelect` `toggle` |
| `columnsConfig[*].editorType` | `auto` `text` `number` `date` `textarea` `checkbox` `toggle` `select` |
| `columnsConfig[*].filterOptionsSourceType` | `static` `datasource` |
| `statusRules[*].tone` | `neutral` `success` `warning` `risk` `primary` `danger` `info` |
| `tableStyle` | `default` `grid` `striped` |
| `responsiveMode` | `auto` `stack` |
| `rowActionsDisplayMode` | `dropdown` `iconButtons` `buttons` |
| `rowActionsDropdownButtonStyle` | `borderless` `default` |
| `headerActionsDisplayMode` | `buttons` `dropdown` |
| `headerActionsPosition` | `start` `center` `end` |
| `headerCenterElementsPosition` | `left` `center` `right` |
| `paginatorStyle` | `default` `compact` `segmented` |
| `paginatorVariant` | `full` `pager` `numbers` `simple` |
| `paginatorAlign` | `start` `center` `end` |
| `quickSearchCondition` | `%-%` `!%-%` `%-` `-%` `=` `!=` |
| `quickSearchCaseMode`, `detailedSearchCaseMode` | `caseInsensitiveLatin` `caseSensitive` `uppercase` `lowercase` |
| `columnSettingsMode` | `none` `localStorage` `dataSource` `host` |
| `savedFiltersMode` | `localStorage` `dataSource` `host` |
| `expandedDisplayMode` | `sidePanel` `inline` |
| `inlineEditStartMode` | `action` `doubleClick` |
| `orderDirection` | `asc` `desc` |
---
## 7. `dynamicTable`: editable repeating rows
`dynamicTable` is the editable grid: users add and delete rows and type into cells. Its cells are declared in its own `columns` array, where **each entry is a full element definition**.
```json
{
"pages": [
{
"name": "page1",
"rows": [
{ "columns": [{ "elementRef": "el1" }] },
{ "columns": [{ "elementRef": "el2" }] }
]
}
],
"elements": {
"page1": { "name": "page1", "label": "Invoice", "type": "page" },
"el1": {
"name": "el1",
"label": "Invoice lines",
"type": "dynamicTable",
"addRowButtonText": "Add line",
"emptyMessage": "No lines yet",
"maxRows": 50,
"disallowAddRows": false,
"disallowDeleteRows": false,
"disallowAddRowsIf": "{el2} >= 10000",
"disallowDeleteRowsIf": "{row.column4} > 0 && {index} == 0",
"confirmRowDeletion": true,
"confirmDeleteTitle": "Remove line",
"confirmDeleteMessage": "Remove this invoice line?",
"confirmDeleteConfirmLabel": "Remove",
"confirmDeleteCancelLabel": "Keep",
"hideRowIf": "{row.column5} == true",
"columns": [
{
"name": "column1",
"label": "Product",
"type": "select",
"strictOptions": true,
"options": [
{ "value": "p1", "label": "Widget" },
{ "value": "p2", "label": "Gadget" }
]
},
{
"name": "column2",
"label": "Qty",
"type": "number",
"min": 1,
"step": 1,
"defaultValue": 1,
"valueStorageType": "number"
},
{
"name": "column3",
"label": "Unit price",
"type": "number",
"step": 0.01,
"valueStorageType": "number",
"visualFormatEnabled": true,
"visualFormatMinFractionDigits": 2,
"visualFormatMaxFractionDigits": 2
},
{
"name": "column4",
"label": "Line total",
"type": "number",
"readOnly": true,
"valueStorageType": "number",
"expression": "{row.column2} * {row.column3}",
"logicExecutionMode": "onChange",
"useTotals": true,
"totalUseGrouping": true,
"totalFractionDigits": 2,
"totalLocale": "lt-LT"
},
{
"name": "column5",
"label": "Cancelled",
"type": "singleCheckbox",
"checkboxLabel": "Cancelled",
"defaultValue": false
}
]
},
"el2": {
"name": "el2",
"label": "Invoice total",
"type": "number",
"readOnly": true,
"expression": "{el1.column4-total}",
"logicExecutionMode": "onChange"
}
}
}
```
The rules that make this work:
- **Inside a row, other cells of the same row are `{row.columnX}`.** A bare `{column3}` reads a top-level form field with that name, not the cell.
- `useTotals: true` publishes a footer sum. That sum is readable elsewhere as `{el1.column4-total}`: the table name, a dot, the column name, `-total`. `totalToData: true` publishes the sum without drawing the footer row.
- `hideRowIf` is evaluated per row, also against `{row.*}`.
- `disallowAddRowsIf` is judged for the whole table: no new lines once the invoice total reaches 10 000. `disallowDeleteRowsIf` is judged per row: the first line cannot be deleted once it has a total, the others can.
- Column entries are element definitions, so any leaf element type and its own properties are valid there (`select` with `options`, `datepicker` with `format`, `text` with `maskType`, and so on).
Value shape: an array of objects, one per row, keyed by column `name`.
---
## 8. `dynamicPanel`: repeating groups, with nesting
`dynamicPanel` repeats a whole layout block. Its children live in the layout tree exactly like a `panel`'s, in `column.rows`. Each rendered entry gets its own copy.
```json
{
"schemaVersion": 1,
"settings": { "language": "en", "locale": "en-US", "width": "1000px", "widthUnit": "px" },
"pages": [
{
"name": "page1",
"rows": [
{
"columns": [
{
"elementRef": "el1",
"rows": [
{ "columns": [{ "elementRef": "el2" }, { "elementRef": "el3" }] },
{ "columns": [{ "elementRef": "el4" }] },
{ "columns": [{ "elementRef": "el5" }] }
]
}
]
},
{ "columns": [{ "elementRef": "el6" }] },
{ "columns": [{ "elementRef": "el7" }] }
]
}
],
"elements": {
"page1": { "name": "page1", "label": "Projects", "type": "page" },
"el1": {
"name": "el1",
"label": "Projects",
"type": "dynamicPanel",
"addRowButtonText": "Add project",
"removeRowButtonText": "Remove project",
"emptyMessage": "No projects yet",
"maxRows": 10,
"confirmRowDeletion": true,
"confirmDeleteTitle": "Remove project",
"confirmDeleteMessage": "Remove this project and all of its tasks?",
"panelPadding": "16px",
"panelRadius": "8px",
"panelBorderWidth": "1px",
"contentGap": "12px",
"resetChildrenOnHide": true
},
"el2": { "name": "el2", "label": "Project name", "type": "text", "required": true },
"el3": {
"name": "el3",
"label": "Status",
"type": "select",
"strictOptions": true,
"options": [
{ "value": "open", "label": "Open" },
{ "value": "done", "label": "Done" }
]
},
"el4": {
"name": "el4",
"label": "Tasks",
"type": "dynamicTable",
"addRowButtonText": "Add task",
"columns": [
{ "name": "column1", "label": "Task", "type": "text" },
{
"name": "column2",
"label": "Hours",
"type": "number",
"step": 0.5,
"valueStorageType": "number",
"useTotals": true,
"totalFractionDigits": 1
},
{
"name": "column3",
"label": "Rate",
"type": "number",
"step": 0.01,
"valueStorageType": "number"
},
{
"name": "column4",
"label": "Cost",
"type": "number",
"readOnly": true,
"valueStorageType": "number",
"expression": "{row.column2} * {row.column3}",
"logicExecutionMode": "onChange",
"useTotals": true,
"totalFractionDigits": 2
}
]
},
"el5": {
"name": "el5",
"label": "Project cost",
"type": "number",
"readOnly": true,
"expression": "{panel.el4.column4-total}",
"logicExecutionMode": "onChange"
},
"el6": {
"name": "el6",
"label": "Total cost of all projects",
"type": "number",
"readOnly": true,
"expression": "sumArray({el1}, el5)",
"logicExecutionMode": "onChange"
},
"el7": {
"name": "el7",
"label": "Open projects",
"type": "number",
"readOnly": true,
"expression": "countInArray({el1}, el3 == \"open\")",
"logicExecutionMode": "onChange"
}
},
"localization": { "defaultLanguage": "en", "languages": ["en"] }
}
```
Context rules for nested structures, in one place:
| Where you are | How you reach a value |
| --- | --- |
| Top level of the form | `{el1}` |
| Inside a `dynamicTable` row | `{row.column2}` for a sibling cell |
| Inside a `dynamicPanel` entry | `{panel.el3}` for a sibling field of the same entry |
| A `dynamicTable` column total | `{el1.column4-total}` at top level |
| A total inside a panel entry | `{panel.el4.column4-total}` |
| A specific panel entry from outside | `{el1[0].el4.column4-total}` |
| Across all entries of a panel | `sumArray({el1}, el5)`, `countInArray({el1}, el3 == "open")` |
| A runtime variable | `{__variables.tenantId}` |
| A table's own live state | `{__table.el2.selectedRows}`, `{__table.el2.totalRecords}` (see 6.5) |
| Host-supplied external context | `{__external.userName}` |
Inside collection functions the entry fields are written **bare and unquoted** (`el3 == "open"`), while anything outside the collection still uses braces (`role == {__variables.requiredRole}`).
Prefer one aggregate over repeated accumulation. `setValue({var1}, sumArray({el1}, el5[].column3))` is safe on every recalculation; `sumValue` adds again on every run and belongs in an action, never in an `expression`.
---
## 9. Data sources and runtime variables
### 9.1 Every source type
`dataSources[*]` is `{ name, title, type, params }`, where `params` differs per `type`. `type` is `rest`, `local`, `route` or `websocket`.
```json
{
"dataSources": [
{
"name": "ds1",
"title": "Customers (GET)",
"type": "rest",
"params": { "url": "/api/customers", "method": "GET" }
},
{
"name": "ds2",
"title": "Save customer (POST)",
"type": "rest",
"params": {
"url": "/api/customers/{id}",
"method": "POST",
"body": { "name": "{el1}", "segment": "{el2}", "tenantId": "{__variables.tenantId}" }
}
},
{
"name": "ds3",
"title": "Server-side table",
"type": "rest",
"params": { "url": "/api/customers/search", "method": "TABLE-POST" }
},
{
"name": "ds4",
"title": "Static options",
"type": "local",
"params": {
"localMode": "json",
"dataJson": "[{\"id\":\"LT\",\"name\":\"Lithuania\"},{\"id\":\"LV\",\"name\":\"Latvia\"}]"
}
},
{
"name": "ds5",
"title": "Options already in the form data",
"type": "local",
"params": { "localMode": "dataPath", "dataPath": "el9.items" }
},
{
"name": "ds6",
"title": "Resolved route data",
"type": "route",
"params": { "routeDataKey": "customer", "routeDataPath": "data" }
},
{
"name": "ds7",
"title": "Live feed",
"type": "websocket",
"params": {
"url": "wss://example.test/feed",
"protocols": "",
"message": "{\"subscribe\":\"orders\"}",
"messagePath": "payload",
"messageMode": "pushValuesInArray"
}
}
]
}
```
REST URL and body templates use **single** braces: `{el1}`, `{row.id}`, `{__variables.tenantId}`. Method is one of `GET` `POST` `PUT` `PATCH` `DELETE`, plus the special `TABLE-POST` for lazy tables.
### 9.2 Element-level `dataSource` and cascading selects
The element-level `dataSource` object is `IElementDataSource`: `name`, `useFor`, `optionValue`, `optionLabel`, `filterOptionsBy`, `params`, `refreshOnChange`, `refreshPaths`. Nothing else.
```json
{
"elements": {
"el1": {
"name": "el1",
"label": "Country",
"type": "select",
"showSearch": true,
"strictOptions": true,
"dataSource": {
"name": "ds1",
"useFor": "option",
"optionValue": "id",
"optionLabel": "name"
}
},
"el2": {
"name": "el2",
"label": "City",
"type": "select",
"strictOptions": true,
"disableIf": "isEmpty({el1})",
"resetIf": "isEmpty({el1})",
"logicExecutionMode": "onChange",
"dataSource": {
"name": "ds2",
"useFor": "option",
"optionValue": "id",
"optionLabel": "name",
"params": [{ "name": "country", "value": "{el1}" }],
"refreshOnChange": true,
"refreshPaths": ["el1"]
}
},
"el3": {
"name": "el3",
"label": "Warehouse",
"type": "select",
"strictOptions": true,
"dataSource": {
"name": "ds3",
"useFor": "option",
"optionValue": "id",
"optionLabel": "title",
"filterOptionsBy": "item.cityId == {el2} && item.active == true",
"refreshPaths": ["el2"]
}
},
"el4": {
"name": "el4",
"label": "Loaded name",
"type": "text",
"expression": "{__variables.recordData}.name",
"logicExecutionMode": "onChange"
}
},
"dataSources": [
{ "name": "ds1", "title": "Countries", "type": "rest", "params": { "url": "/api/countries", "method": "GET" } },
{ "name": "ds2", "title": "Cities", "type": "rest", "params": { "url": "/api/countries/{country}/cities", "method": "GET" } },
{ "name": "ds3", "title": "Warehouses", "type": "rest", "params": { "url": "/api/warehouses", "method": "GET" } },
{ "name": "ds4", "title": "Record", "type": "rest", "params": { "url": "/api/records/{__variables.recordId}", "method": "GET" } }
]
}
```
- `useFor: "option"` feeds the option list; `useFor: "value"` feeds the element's value.
- `params[*].value` resolves form fields, `{row.*}` and `{__variables.*}`; the resolved values also fill `{placeholder}` tokens in the source URL.
- `filterOptionsBy` filters the fetched list client-side. The candidate option is `item.*`; form fields stay in braces.
### 9.3 Runtime variables
```json
{
"settings": {
"language": "en",
"variables": [
{ "name": "recordId", "title": "Record id", "sourceType": "route", "source": "id" },
{ "name": "tenantId", "title": "Tenant", "sourceType": "external", "source": "tenantId", "fallbackValue": "" },
{ "name": "apiBase", "title": "API base", "sourceType": "constant", "constantValue": "/api/v2" },
{
"name": "isEdit",
"title": "Edit mode",
"sourceType": "expression",
"expression": "notEmpty({__variables.recordId})",
"refreshPaths": []
},
{
"name": "settingsData",
"title": "Settings",
"sourceType": "dataSource",
"source": "ds1",
"fallbackValue": {},
"includeInDataJson": false
},
{
"name": "draftName",
"title": "Draft name",
"sourceType": "manual",
"targetPath": "el1",
"includeInDataJson": true
}
]
}
}
```
`sourceType` is exactly one of `route` `external` `constant` `expression` `dataSource` `manual`. Read a variable anywhere as `{__variables.name}`, never as `{name}`. A `dataSource` variable needs an explicit `source`.
---
## 10. Expression cookbook
Every logic field is a **direct property of the element**. There is no `logic` wrapper. All of them take JEXL.
```json
{
"elements": {
"el1": { "name": "el1", "label": "Price", "type": "number", "valueStorageType": "number" },
"el2": { "name": "el2", "label": "Quantity", "type": "number", "valueStorageType": "number" },
"el3": {
"name": "el3",
"label": "Total",
"type": "number",
"readOnly": true,
"expression": "{el1} * {el2}",
"logicExecutionMode": "onChange",
"dependsOn": ["el1", "el2"]
},
"el4": {
"name": "el4",
"label": "Customer type",
"type": "radio",
"showInline": true,
"defaultValue": "person",
"options": [
{ "value": "person", "label": "Person" },
{ "value": "company", "label": "Company" }
]
},
"el5": {
"name": "el5",
"label": "Company code",
"type": "text",
"visibleIf": "{el4} == 'company'",
"requireIf": "{el4} == 'company'",
"resetIf": "{el4} != 'company'",
"logicExecutionMode": "onChange"
},
"el6": {
"name": "el6",
"label": "Discount %",
"type": "number",
"disableIf": "{el3} < 100",
"readonlyIf": "{__variables.isEdit} != true",
"logicExecutionMode": "onChange",
"validators": [
{ "type": "min", "value": 0, "message": "Cannot be negative" },
{ "type": "max", "value": 50, "message": "50% is the maximum", "applyIf": "{el4} == 'person'" },
{
"type": "custom",
"condition": "{el6} > 0 && isEmpty({el7})",
"message": "Give a reason for the discount"
}
]
},
"el7": { "name": "el7", "label": "Discount reason", "type": "textarea", "rows": 2 },
"el8": {
"name": "el8",
"label": "Starts",
"type": "datepicker",
"format": "YYYY-MM-DD"
},
"el9": {
"name": "el9",
"label": "Ends",
"type": "datepicker",
"format": "YYYY-MM-DD",
"minValue": "{el8}",
"validators": [
{
"type": "custom",
"condition": "notEmpty({el8}) && notEmpty({el9}) && dateDiffDays({el8}, {el9}) < 1",
"message": "End date must be after the start date"
}
]
},
"el10": {
"name": "el10",
"label": "Summary",
"type": "text",
"readOnly": true,
"expression": "getLabel({el4}) + ': ' + {el3} + ' EUR'",
"logicExecutionMode": "onChange"
},
"el11": {
"name": "el11",
"label": "Tags",
"type": "multiSelect",
"options": [
{ "value": "a", "label": "A" },
{ "value": "b", "label": "B" }
]
},
"el12": {
"name": "el12",
"label": "Has tag A",
"type": "singleCheckbox",
"checkboxLabel": "Tagged A",
"readOnly": true,
"expression": "contains({el11}, 'a')",
"logicExecutionMode": "onChange"
}
}
}
```
Operators JEXL supports: `&& || ! == != > >= < <= + - * / // % ^ in`, the ternary `a ? b : c`, and the Elvis `a ?: b`. It does **not** support `??`, `?.`, arrow functions or any other JavaScript-only syntax.
Built-in functions: `isEmpty` `notEmpty` `toNumber` `inRange` `len` `contains` `containsAny` `containsAll` `inArray` `collectValuesFrom` `sumInArray` `avgInArray` `minInArray` `maxInArray` `countInArray` `firstInArray` `lastInArray` `joinInArray` `filterArray` `mapArray` `findInArray` `existsInArray` `sumArray` `avgArray` `getFirst` `getLast` `flattenArray` `today` `now` `date` `day` `month` `year` `weekDay` `weekDayIndex` `isWeekend` `addDays` `dateDiffDays` `startOfWeek` `endOfWeek` `getVal` `getValue` `getLabel` `getElementProperty` `getProp` `translate` `currentLanguage` `setValue` `sumValue` `pushValue` `setVar` `sumVar` `pushVar` `setElementProperty` `runDataSource` `dbg`.
Validator objects accept exactly `type`, `value`, `message`, `condition`, `applyIf`. `condition` is the **failing** check: the error shows while it is `true`.
---
## 11. Actions and events
`events` is an array of `IElementActionConfig`. Same shape for `button.events`, `table.rowActions`, `table.headerActions`, `table.selectionActions`, cell actions and dialog footer actions.
```json
{
"elements": {
"el1": {
"name": "el1",
"label": "",
"type": "button",
"text": "Save",
"variant": "solid",
"tone": "primary",
"textColor": "var(--nvb-color-neutral-000)",
"icon": "save",
"iconPosition": "left",
"size": "normal",
"fitContent": true,
"events": [
{
"trigger": "click",
"type": "dataSource",
"dataSourceName": "ds1",
"validateForm": true,
"confirmEnabled": true,
"confirmTitle": "Save changes",
"confirmMessage": "Write these changes to the server?",
"confirmConfirmLabel": "Save",
"confirmCancelLabel": "Cancel",
"params": [
{ "name": "id", "value": "{__variables.recordId}" },
{ "name": "name", "value": "{el3}" }
],
"responseMode": "setValue",
"responseDataPath": "data.id",
"responseTargetPath": "el4",
"reloadOnReturnElementNames": ["el5"],
"showToastAfter": true,
"toastTitle": "Saved",
"toastMessage": "The record was stored",
"toastVariant": "success",
"toastPosition": "bottom-right",
"toastAutoHide": true,
"toastAutoHideMs": 3000
}
],
"menuActions": [
{ "label": "Save and close", "type": "submit", "validateForm": true },
{ "label": "Discard", "type": "navigate", "navigateTo": "/records" }
]
},
"el2": {
"name": "el2",
"label": "",
"type": "button",
"text": "Download report",
"variant": "outline",
"tone": "neutral",
"fitContent": true,
"events": [
{
"trigger": "click",
"type": "dataSource",
"dataSourceName": "ds2",
"responseMode": "download",
"responseFileName": "report.pdf"
}
]
},
"el3": { "name": "el3", "label": "Name", "type": "text" },
"el4": { "name": "el4", "label": "Saved id", "type": "text", "readOnly": true },
"el5": { "name": "el5", "label": "History", "type": "table", "columnsConfig": [] },
"el6": {
"name": "el6",
"label": "Segment",
"type": "select",
"options": [
{ "value": "a", "label": "A" },
{ "value": "b", "label": "B" }
],
"events": [
{
"trigger": "change",
"type": "setOptions",
"setOptionsTargetElement": "el7",
"setOptionsMode": "contextPath",
"setOptionsValue": "lookup.subSegments"
},
{
"trigger": "change",
"type": "reloadElements",
"reloadElementNames": ["el5"],
"condition": "notEmpty({el6})"
}
]
},
"el7": { "name": "el7", "label": "Sub-segment", "type": "select", "options": [] }
}
}
```
Action fields by `type`:
| `type` | Required / typical fields |
| --- | --- |
| `navigate` | `navigateTo`, `openInNewTab`, `beforeNavigateDataSourceName` |
| `dataSource` | `dataSourceName`, `params`, `responseMode` (`none` `download` `setValue`), `responseDataPath`, `responseTargetElement`, `responseTargetPath`, `responseFileName`, `reloadCurrentElementAfterSuccess`, `reloadOnReturnElementNames`, `reloadDataSourceNames` |
| `setValue` | `setValueTargetPath`, `setValueMode` (`contextPath` `template` `json` `expression`), `setValueValue` |
| `setOptions` | `setOptionsTargetElement`, `setOptionsMode`, `setOptionsValue` |
| `reloadElements` | `reloadElementNames` |
| `toast` | `toastTitle`, `toastMessage`, `toastVariant`, `toastPosition`, `toastAutoHide`, `toastAutoHideMs`, `toastShowIcon`, `toastIcon` |
| `dialog` | `dialogName`, `dialogOperation` (`open` `close` `toggle`) |
| `sendMessage` | `dataSourceName` (a `websocket` source), `messagePayload` |
| `validate` | none; validates the whole form |
| `submit` | none; validates, then fires `onComplete` with `{ isValid, data, issues }` |
Common to all: `trigger` (`click` `submit` `input` `change` `blur` `focus` `beforeLoad` `onLoad` `afterLoad` `always`), `label`, `icon`, `hideText`, `condition`, `validateForm`, `debounceMs`, `confirmEnabled`, `confirmOnDirty`, `confirmTitle`, `confirmMessage`, `confirmConfirmLabel`, `confirmCancelLabel`, `buttonVariant` (`filled` `outlined` `text`), `buttonTone` (`primary` `risk` `neutral`), `useCustomButtonStyle`, `showToastAfter` and the `toast*` fields.
Note the two different button vocabularies: a `button` **element** uses `variant` (`solid` `outline` `text`) and `tone` (`primary` `neutral` `success` `info` `warning` `risk`); an **action** rendered as a button uses `buttonVariant` (`filled` `outlined` `text`) and `buttonTone` (`primary` `risk` `neutral`).
---
## 12. Multi-page stepper
Several entries in `pages` become steps. Each still needs its twin in `elements`.
```json
{
"schemaVersion": 1,
"settings": {
"language": "en",
"locale": "en-US",
"width": "760px",
"widthUnit": "px",
"pageNavigationMode": "stepper",
"stepperPosition": "top",
"pageNavigationPosition": "bottom",
"allowStepWithoutValidation": false,
"actionButtonsPosition": "bottom",
"showSubmitButton": true,
"showValidateButton": false,
"showValidationIssuesModal": true
},
"pages": [
{ "name": "page1", "rows": [{ "columns": [{ "elementRef": "el1" }, { "elementRef": "el2" }] }] },
{ "name": "page2", "rows": [{ "columns": [{ "elementRef": "el3" }] }] },
{ "name": "page3", "rows": [{ "columns": [{ "elementRef": "el4" }] }] }
],
"elements": {
"page1": { "name": "page1", "label": "Applicant", "type": "page" },
"page2": { "name": "page2", "label": "Address", "type": "page" },
"page3": {
"name": "page3",
"label": "Review",
"type": "page",
"visibleIf": "notEmpty({el1}) && notEmpty({el2})"
},
"el1": { "name": "el1", "label": "First name", "type": "text", "required": true },
"el2": { "name": "el2", "label": "Last name", "type": "text", "required": true },
"el3": { "name": "el3", "label": "Street", "type": "text", "required": true },
"el4": {
"name": "el4",
"label": "",
"type": "customHtml",
"htmlTemplate": "Submitting as {el1} {el2}, {el3}
"
}
},
"localization": {
"defaultLanguage": "en",
"languages": ["en", "de"],
"texts": {
"en": { "submitButtonText": "Submit" },
"de": { "submitButtonText": "Absenden" }
}
}
}
```
---
## 13. Pre-return checklist for any of these
1. Every `elementRef` resolves; every `elements` key equals its `name`.
2. Every `pages[*].name` has an `elements` twin with `type: "page"`.
3. No element definition holds children (`rows`, `columns`, `children`, `items`); the exception is `dynamicTable.columns` and `table.columnsConfig`, which are cell definitions, not layout.
4. No column object holds anything besides `elementRef`, `rows`, `tabRows`.
5. `table` columns use `key`. `dynamicTable` columns use `name`.
6. `statusRules[*].condition` uses `value`; `rowActions[*].condition` uses `row.*`.
7. Action and element-datasource `params` are `[{ "name", "value" }]`; table request params are `[{ "paramName", "paramValue" }]`.
8. Runtime variables are read as `{__variables.x}`.
9. Logic fields sit directly on the element; validators use `condition` / `applyIf`.
10. Every type string matches the canonical list exactly, casing included.