Array

The Array array component is an array field which contains one ore more field, it returns an array of objects.

Example

{
  "component": "array",
  "label": "My list",
  "name": "my_list",
  "layout": "vertical",
  "fields": [
    {
      "component": "two-columns",
      "name": "my_two_columns",
      "layout": "layout-1-1",
      "leftFields": [
        {
          "component": "input-text",
          "label": "First name",
          "name": "first_name",
          "fullWidth": true
        }
      ],
      "rightFields": [
        {
          "component": "input-text",
          "label": "Last name",
          "name": "last_name",
          "fullWidth": true
        }
      ]
    }
  ]
}

the returned value in the form payload will be something like

[
  { "first_name": "some name", "last_name": "some last name"},
  { "first_name": "another name", "last_name": "another last name"}
]

LetsForm DSL

The above example can also be defined with LetsForm DSL

<LfArray
  label="My list"
  name="my_list"
  layout="vertical"
  alignOffset={24}
>
  <LfColumns
    name="my_two_columns"
    layout="layout-1-1"
  >
    <LfColumn>
      <LfField
        component="input-text"
        label="First name"
        name="first_name"
        fullWidth={true}
      />
    </LfColumn>
    <LfColumn>
      <LfField
        component="input-text"
        label="Last name"
        name="last_name"
        fullWidth={true}
      />
    </LfColumn>
  </LfColumns>
</LfArray>

Reference

Property	Type	Description
component	string	= "array"
name	string	The name of the field and the key of the JSON
label	string \| i18n	Label of the field
hint	string \| i18n	Help text for the field (generally shown below the input box)
disabled	boolean	Disables and greys out the field
readOnly	boolean	Put the field in read only mode
hidden	boolean	Hides the field from the form
align	string	Vertical alignment of add / remove buttons. Values: "top", "center", "bottom".
alignOffset	number	Offset of the add / remove button from the top / bottom (depends on the alignment)
arrayType	string	Defines the result of the list component, "arrayOfString" and "commaSeparated" only applies if list field has only one field. Values: "arrayOfObject", "arrayOfString", "commaSeparated".