CnChildRecordsField

An editable table of the records of another schema that point at this one, inside a form: the lines of an order, the cost items of a request. It is the child-records widget of CnFormDialog.

The table offers Add row, inline editing of the columns it shows (string and number properties), an Edit dialog for the other fields, and Remove. On an existing parent it loads the first 50 children (those whose parentField names the parent) and says how many there are beyond that; editing hundreds of rows belongs on a list page.

The relation it reads

fieldsFromSchema gives a property the widget when it is an array whose items carry a $ref and the property carries inversedBy (the child's property that points back):

{ "lines": { "type": "array", "items": { "$ref": "order-line" }, "inversedBy": "order" } }

An explicit widget on the property wins, so a plain picker stays a picker. When the relation is not declared on the parent, name it: { "widget": "child-records", "schema": "order-line", "parentField": "order", "columns": ["product", "qty"] }. Without columns, the first four required properties of the child schema are shown.

Why children are saved after the parent

CnFormDialog keeps the children out of the parent's payload. After the host saves the parent and calls setResult({ success: true, id }), the dialog sends every new and changed row in one bulk save to the child schema (with parentField set to the parent id) and every removed row in one bulk delete. A single nested save is not relied on because nothing establishes that it updates a changed child or removes a deleted one. A row the server refuses is named in the result with the reason, and the parent stays saved. Each row is checked against the child schema's required properties first; a failing row blocks the submit and says which row and field.

See useChildRecords for the helpers.

Props

Prop	Default	Description
modelValue	[]	The rows (v-model).
config	required	{ schema, parentField, columns? }.
register	''	Register slug of the child schema.
parentId	''	Id of the parent being edited; empty when creating.
inputLabel (input-label)	''	Visible label.
disabled	false	Hide the editing controls.
error	''	Validation message under the table.
apiBase (api-base)	/apps/openregister/api	OpenRegister API base.
maxColumns (max-columns)	4	Most columns shown when none are configured.

OpenRegister reliance

heavy: this component cannot work without OpenRegister. 1 direct reference, 108 files reached through imports.

Through: CnAnalyticsReportPicker, CnAuditTrailCard, CnBookmarkPicker, CnCalendarEventCreate, CnCalendarEventPicker, CnCollectivePageCreate, CnCollectivePagePicker, CnContactPicker, CnCospendCreate, CnCospendPicker, CnDataTable, CnDeckCardCreate, CnDeckCardPicker, CnEmailPicker, CnFilesCard, CnFkResolveCell, CnFlowOperationPicker, CnFormDialog, CnIndexPage, CnMapPoiPicker, CnNoteComposer, CnNotesCard, CnObjectSidebar, CnOpenProjectCreate, CnOpenProjectPicker, CnPhotoAlbumPicker, CnPollPicker, CnResourceSelect, CnTagsCard, CnTalkRoomPicker, CnTasksCard, CnTimeTrackerCreate, CnTimeTrackerPicker, CnVersionHistory, CnXwikiPageCreate, CnXwikiPagePicker.

See the reliance overview for the filterable list.

Props

Name	Type	Required	Default	Description
modelValue	array		[]	The rows (v-model). Each saved row carries its id.
config	{schema: string, parentField: string, columns?: string[]}	✓	—	The relation: schema (child schema slug), parentField (the child property pointing at the parent) and optional columns (keys shown).
register	string		''	Register slug the child schema lives in.
parentId	string|number		''	Id of the parent being edited; empty when creating (no children to load).
inputLabel	string		''	Visible label of the table.
disabled	boolean		false	Hide the editing controls.
error	string		''	Validation message shown under the table.
apiBase	string		'/apps/openregister/api'	Base URL of the OpenRegister API.
maxColumns	number		4	Most columns shown in the table.

Events

Name	Payload	Description
update:modelValue	—	The rows changed (v-model).
loaded	—	The children as loaded from the server, so the form can tell what changed on save.
validity	—	The current row problems (empty when every row is valid).