The array field.
Properties
| Title | Array Field |
| Description | Field for list of items with same data type or structure. |
| JSON Schema Type(s) | array |
| Field Type | array |
| Base Field Type | None |
Schema
| Property | Type | Default | Description |
|---|---|---|---|
| default | any | The default value to be assigned for this property. If the data for the field is empty or not provided, this default value will be plugged in for you. Specify a default value when you want to pre-populate the field's value ahead of time. | |
| dependencies | array | List of property dependencies. | |
| description | string | Detailed description of the property. | |
| disallow | array | List of disallowed values for the property. | |
| format | string | Data format of the property. | |
| items | object | Schema for array items. | |
| maxItems | number | Maximum number of items. | |
| minItems | number | Minimum number of items. | |
| readonly | boolean | Indicates that the field is read-only. A read-only field cannot have it's value changed. Read-only fields render in a grayed-out or disabled control. If the field is rendered using a view with the displayReadonly attribute set to false, the read-only field will not appear. | |
| required | boolean | Indicates whether the field's value is required. If set to true, the field must take on a valid value and cannnot be left empty or unassigned. | |
| title | string | Short description of the property. | |
| type | string | array | Data type of the property. |
| uniqueItems | boolean | Item values should be unique if true. |
Options
| Property | Type | Default | Description |
|---|---|---|---|
| actionbar | object | ||
| actionbarStyle | string | top | The kind of actionbar to render for each item in the array. Either 'top', 'bottom', 'left', or 'right'. |
| animate | boolean | true | Up and down transitions will be animated |
| collapsed | boolean | Field set is initially collapsed if true. | |
| collapsible | boolean | Field set is collapsible if true. | |
| disabled | boolean | Field will be disabled if true. | |
| dragAndDrop | boolean | If true, drag and drop is enabled for array items. | |
| fieldClass | string | Specifies one or more CSS classes that should be applied to the dom element for this field once it is rendered. Supports a single value, comma-delimited values, space-delimited values or values passed in as an array. | |
| focus | checkbox | true | If true, the initial focus for the form will be set to the first child element (usually the first field in the form). If a field name or path is provided, then the specified child field will receive focus. For example, you might set focus to 'name' (selecting the 'name' field) or you might set it to 'client/name' which picks the 'name' field on the 'client' object. |
| form | object | Options for rendering the FORM tag. | |
| helper | string | Field help message. | |
| helpers | array | An array of field help messages. Each message will be displayed on it's own line. | |
| helpersPosition | string | below | Defines the placement location of the helper text relative to the control (either 'above' or 'below') |
| hidden | boolean | Field will be hidden if true. | |
| hideInitValidationError | boolean | Hide initial validation errors if true. | |
| hideToolbarWithChildren | boolean | true | Indicates whether to hide the top toolbar when child elements are available. |
| id | string | Unique field id. Auto-generated if not provided. | |
| label | string | Field label. | |
| lazyLoading | boolean | Child fields will only be rendered when the fieldset is expanded if this option is set true. | |
| legendStyle | string | button | Field set legend style. |
| optionLabels | array | An array of string labels for items in the enum array | |
| readonly | boolean | Field will be readonly if true. | |
| showMessages | boolean | true | Display validation messages if true. |
| toolbar | object | ||
| toolbarPosition | string | top | Location of the top-level toolbar to render for the array field. Either 'top' or 'bottom'. |
| toolbarSticky | boolean | If true, the array item toolbar will always be enabled. If false, the toolbar is always disabled. If undefined or null, the toolbar will appear when hovered over. | |
| toolbarStyle | string | button | The kind of top-level toolbar to render for the array field. Either 'button' or 'link'. |
| type | string | array | Field type. |
| validate | boolean | true | Field validation is required if true. |
| view | string | Allows for this field to be rendered with a different view (such as 'display' or 'create') |
Example 1
Array field for an array of text items.
Example 2
Array field with options for sticky toolbar, min items, max items etc.
Here we use the hideToolbarWithChildren option to keep the top-most button available to add new items
to the list. We also hide the add button in the action bar for each row.
Example 3
Array field with array default value.
Example 4
Array field with string default value.
Example 5
Array field with item type as object.
Example 6
Nested array field.
Example 7
Array field name. Here we set the toolbarPosition option to bottom to position the toolbar below the array.
Example 8
Nested Array field name.
Example 9
Array field with an extra "clear" button in each item's action bar.
Example 10
Array fields support toolbar and actionbar options for defining custom actions. Actions are
rendered by the view into the form and usually appear as a button bar.
For the toolbar, Alpaca assumes and auto-populates a single button - add.
For the actionbar (per item), Alpaca assumes and auto-populates the following buttons:
addremoveupdown
Any properties you define for these actions will override the existing presets. Any new actions you define will be
added to the overall set. You can explicitly enable or disable actions via the enabled property.
Disabled actions are removed from display.
By default, the array field keeps labels turned off. If you want to turn labels on, use the toolbar.showLabels
and actionbar.showLabels options.
Example 11
Array field rendered in display-only mode.
Example 12
An array field with four levels of nesting.
Example 13
An array field with nested radio elements.
Example 14
An array field with unique items enforced.
Example 15
An array field with radio selection embedded.
Example 16
An array field with dragAndDrop enabled.
Example 17
A nested array field with dragAndDrop enabled.