Array

Array of items of the same type.

Specification

spec

• Describes the data structure of array items.

• Parameters inside spec use the syntax of the regular parameters.

• Available types:

Type	Specification
array	The output will be an array of Objects.
object	The output will be an array of primitive types. If the object contains a name, it will be ignored.

Primitive array

{
	"name": "tags",
	"spec": {
		"type": "text",
		"label": "Tag"
	},
	"type": "array",
	"label": "Tags"
}

Complex array

{
	"name": "contacts",
	"spec": [
		{
			"name": "email",
			"type": "email",
			"label": "Email"
		},
		{
			"name": "name",
			"type": "text",
			"label": "Name"
		}
	],
	"type": "array",
	"label": "Contacts"
}

When no spec is provided, the array will behave as a primitive array of strings. However, the preferred approach is setting the spec to {"type": "text"}.

validate

• Type: Object

• Collection of validation directives.

• Available parameters:

Parameter	Type	Specification
maxItems	number	Specifies maximum length that an array parameter can have.
minItems	number	Specifies minimum length that an array parameter can have.
enum	array	Array of allowed values in the array.

mode

• Type: String

• If editable (or editable.enabled) is set to true , you can use this option to set the initial mode of the field.

• Allowed values are edit and choose.

labels

• Available parameters:

Parameter	Type	Specification
add	string	Default: Add item. The text which is displayed on the adding button.
edit (deprecated)	string	Default: Edit item. The text which is displayed on the item edit button.
field (deprecated)	string	If no spec is provided, this field can be used as a label for the text input.

editable (deprecated)

• Type: Boolean or Object

• If set to true , the user can map the value of the array.

• Available parameters:

Parameter	Type	Specification
enabled	boolean	Defines if the value can be mapped or not.
help	string	An alternative help text which is shown only when the editation is turned on.

Examples

Primitive Array

The primitive array is an array of simple variables, like numbers or strings.

Appearance

Example of Primitive Array

Source

[
	{
		"name": "tags",
		"spec": {
			"type": "text",
			"label": "Tag"
		},
		"type": "array",
		"label": "Tags"
	}
]

Output

["old", "new"]

Complex Array

The complex array is an array of complex objects - collections.

Appearance

Example of Complex Array

Source

[
	{
		"name": "contacts",
		"spec": [
			{
				"name": "email",
				"type": "email",
				"label": "Email"
			},
			{
				"name": "name",
				"type": "text",
				"label": "Name"
			}
		],
		"type": "array",
		"label": "Contacts"
	}
]

Output

[
    {
        "name": "John Doe",
        "email": "[e-mail]"
    },
    {
        "name": "Foo Bar",
        "email": "[e-mail]"
    }
]

Complex Array with labeled collections

Appearence

Example of labeled array

Source

```json
[
	{
		"name": "contacts",
		"spec": {
			"type": "collection",
			"label": "Contact",
			"spec": [
				{
					"name": "email",
					"type": "email",
					"label": "Email"
				},
				{
					"name": "name",
					"type": "text",
					"label": "Name"
				}
			]
	},
		"type": "array",
		"label": "Contacts"
	}
]
```

Output

[
    {
        "name": "John Doe",
        "email": "[e-mail]"
    },
    {
        "name": "Foo Bar",
        "email": "[e-mail]"
    }
]

Amount of Items

You can use the validate object to set minItems and maxItems to control the minimum and/or maximum amount of items in the array.

Appearance

Error Message after Attempt to Save the Module

Source

[
	{
		"name": "members",
		"type": "array",
		"label": "Members",
		"validate": {
			"minItems": 1,
			"maxItems": 4
		}
	}
]

Mode

When the array is editable , you can set the default state by using mode.

Appearance

Mode Edit

Source

[
	{
		"name": "choose",
		"type": "array",
		"label": "Choosable array",
		"mode": "choose"
	},
	{
		"name": "edit",
		"type": "array",
		"label": "Editable array",
		"mode": "edit"
	}
]

Custom Labels

You can customize the button labels using the labels object.

Appearance

Custom Labels per Item

Source

[
	{
		"name": "labels",
		"type": "array",
		"label": "Customized array",
		"labels": {
			"add": "Add an item to my array"
		}
	}
]

Editable Array (deprecated)

Since Apps platform version 2, all arrays are mappable(editable) by default.

When editable is set to true , you can map an array from another module to the array parameter.

Appearance

Example of Editable Array

Source

[
	{
		"name": "items",
		"type": "array",
		"label": "Items",
		"editable": true
	}
]

Editable Array with Help (deprecated)

Since Apps platform version 2, this can be achieved by using the mappable directive and looks exactly the same using the mappable.help . It is not needed to set enabled to true anymore because that is set by default.

By setting help inside the editable object, you can set the help text which is shown when the mappable toggle is turned on. Don't forget to set editable.enabled to true .

Appearance

Example of Help under Array with Editable Set

Source

[
	{
		"name": "items",
		"type": "array",
		"label": "Items",
		"editable": {
			"enabled": true,
			"help": "You can map your own array here."
		}
	}
]