Array Field

The array field.

Properties

Title	Array
Description	Field for list of items with same data type or structure.
Field Type	array
Base Field Type	container

Schema

Property	Type	Default	Description
items	object		Schema for array items.
maxItems	number		Maximum number of items.
minItems	number		Minimum number of items.
uniqueItems	boolean		Item values should be unique if true.

Options

Property	Type	Default	Description
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.
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.
properties

Example 1

Array field for an array of text items.

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

Example 3

Array field with array default value.

{% raw %} {% endraw %}

Example 4

Array field with string default value.

{% raw %} {% endraw %}

Example 5

Array field with item type as object.

{% raw %} {% endraw %}

Example 6

Nested array field.

{% raw %} {% endraw %}

Example 7

Array field name. Here we set the toolbarPosition option to bottom to position the toolbar below the array.

{% raw %} {% endraw %}

Example 8

Nested Array field name.

{% raw %} {% endraw %}

Example 9

Array field with an extra "clear" button in each item's action bar.

{% raw %} {% endraw %}

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:

• add
• remove
• up
• down

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.

{% raw %} {% endraw %}

Example 11

Array field rendered in display-only mode.

{% raw %} {% endraw %}

Example 12

An array field with four levels of nesting.

{% raw %} {% endraw %}

Example 13

An array field with nested radio elements.

{% raw %} {% endraw %}

Example 14

An array field with unique items enforced.

{% raw %} {% endraw %}

Example 15

An array field with radio selection embedded.

{% raw %} {% endraw %}

Example 16

An array field with dragAndDrop enabled.

{% raw %} {% endraw %}

Example 17

A nested array field with dragAndDrop enabled.

{% raw %} {% endraw %}