Sub-Form

12 column container component with optional repeating.

Demo

Basic example

{ "type": "subform", "label": "Sub-form", "value": "{{any}}", "extraSettings": { "multipleEntries": true, "layoutDefinition": { "rows": [ { "cols": [ { "type": "text", "value": "{{txt}}", "label": "Text inside a sub-form" } ] } ] } } }

Attributes

Attribute	Type	Description
type	string	Type expected is subform

See section Common attributes.

Extra attributes

Attribute	Type	Description
layoutDefinition	Object	Definition with rows and cols as for a form
multipleEntries	boolean	If true layoutDefinition can be repeated for multiple different inputs (often rows)
showBorder	boolean	It shows a border around the Sub-Form
showAddButton	boolean	When multiple entries is true, it will show/hide add button
showDeleteButton	boolean	When multiple entries is true, it will show/hide delete buttons
minItems	number	When multipleEntries is true, it requires to have a minimum number if items
maxItems	number	When multipleEntries is true, it requires to have a maximum number if items
collapsible	boolean	Allows the content to be collapsed by a button in the title
collapsed	boolean	Defines if the content is collapsed by default. NOTE: Only as initial state due to user has the ability to change the state manually.
addButtonText	string	Custom text for the ADD button shown when multipleEntries is true
minItemsErrorMessage	string	Custom error message for minItems validation
maxItemsErrorMessage	string	Custom error message for maxItems validation

When to use it

Use a subform when you want:

• all the components in the subform to be bound relative to an attribute in the payload (value should point to that attribute)
• to edit a list of elements of the same type (multipleEntries = true)

If you just need to group some components together, use a Panel component.