Subform table

Tips & examples

An editable grid of related records inside a parent form — the way to manage a one-to-many relationship without leaving the page.

When to use

Editing the many side of a relationship in place, such as the lines of an order, where rows are added and removed alongside the parent record.

What you need

Binds to a field path on a parent Form that holds an array of rows. Rows are saved with the parent record, not independently.

Examples

Order lines edited together with the order header.
Contact phone numbers managed from the contact form.

Avoid

Using it to display related records that are never edited — a read-only Table is lighter and supports paging.
Expecting to lay out the row yourself: the columns come from the field configuration, not from child elements.

Use instead

Table — Use instead for read-only related data, or when the list needs paging, sorting and its own filters.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Required

Data SourcerequiredSettings group: Where this element loads its data (view, query, connector, or element).
Default: {"elementId":"","fieldPath":[]}
FieldsrequiredList of Settings group: Configuration for fields.
Default: []

Optional

Default ValueoptionalStructured JSON or Custom expression: Configuration for default Value.
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Default: none

Inside dataSource: (dataSource)

Element IDrequiredNumber or Text: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or Number: Path into the source element’s data (property segments).
Default: []

Inside `fields.$item`: (Each list item) ↕

General TyperequiredSettings group: Configuration for general Type.
Default: none
I18nrequiredSettings group: Configuration for i18n.
Default: none
NamerequiredText: Configuration for name.
Default: none
NullablerequiredYes / no: Whether the field may be left empty.
Default: none
TyperequiredText: Discriminator selecting which configuration variant applies.
Default: none

Inside `fields.$item.i18n`: (i18n) ↕

EnrequiredSettings group: Default: none

Inside `fields.$item.i18n.en`: (en) ↕

TitlerequiredText: Configuration for title.
Default: none

Inside `fields.$item.generalType`: (generalType) ↕

Is ArrayrequiredYes / no

Configuration for is Array.

Default: none

TyperequiredOne of: text, uuid, number, numberHighPrecision, dateTime, date, time, json, boolean, fallback, geo, interval

Discriminator selecting which configuration variant applies.

Choices

text
uuid
number
numberHighPrecision
dateTime
date
time
json
boolean
fallback
geo
interval

Default: none

Sizing

Minimum size: 3 × 3 grid cells (width × height).
Default size when dropped on a page: 4 × 3.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.mySubFormTable.<property>

value Array<object> Current input value of this control. elements.mySubFormTable.value.length

When All nested rows as currently edited. Read `.length` to show a count that updates as rows are added.

errors any Field-level validation errors after submit or blur. elements.mySubFormTable.errors

touched boolean Map of fields the user has interacted with. elements.mySubFormTable.touched

disabled boolean True while the control is locked and cannot be edited. elements.mySubFormTable.disabled

selected object Currently selected row(s) in the table. elements.mySubFormTable.selected

When The nested row the user has highlighted, for driving a detail panel beside the grid.

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.mySubFormTable.selected

Replace mySubFormTable with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Placement notes

Form — Saved as part of the parent Form; there is no separate save for the nested rows.

Sample configuration

Minimal example — required fields only ↕

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "fields": [
      {
        "name": "name",
        "type": "type",
        "i18n": {
          "en": {
            "title": "title"
          }
        },
        "generalType": {
          "type": "text",
          "isArray": false
        },
        "nullable": false
      }
    ]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "disabled": false,
    "nullable": false,
    "defaultValue": {},
    "fields": [
      {
        "name": "name",
        "type": "type",
        "i18n": {
          "en": {
            "title": "title"
          }
        },
        "generalType": {
          "type": "text",
          "isArray": false
        },
        "nullable": false
      }
    ]
  }
}