By default, arrays in the data editor allow you to create new items. This is done by cloning the last item in the array and clearing out the data. This is convenient for simple arrays and basic objects. With this default behaviour, editors cannot delete the last item in the array, as this would give CloudCannon nothing to clone. To configure the array manually we use a term called array structures, giving CloudCannon more context about the array.
Array add values are defined under the key _array_structures. These allow you to define which keys in your data should be arrays, what data should be added when Add is clicked, and how the editor can decide what item to add.
The first step to configuring your array structures is to define which key is used. For this example we will use the example key. If _array_structures is already defined, add your key to that object. Key level config in array structures do not get merged; the latest defined key will be the only config. Below is the basic structure once your key is chosen:
_array_structures:
example:
# Configure example key in here[[_array_structures.example]]
# Configure example key in here{
"_array_structures": {
"example": {}
}
}For the first example we want editors to click Add and immediately have the following data added:
name:
description:
image:name = ""
description = ""
image = ""{
"name": "",
"description": "",
"image": ""
}For this we need to add our new structure under a value key inside an array called values:
_array_structures:
example:
values:
- value:
name:
description:
image:[[_array_structures.example.values]]
[_array_structures.example.values.value]
name = ""
description = ""
image = ""{
"_array_structures": {
"example": {
"values": [
{
"value": {
"name": "",
"description": "",
"image": ""
}
}
]
}
}
}Our editors can now add a new value to our array and remove every array item because we have moved our add instructions into the _array_structures config.
For the second example we want editors to click Add and be prompted for a choice of options. We are going to add the following structure to our array structures:
heading:
subtext:heading = ""
subtext = ""{
"heading": "",
"subtext": ""
}For this we need to add our new structure under our previous in the array called values. Now that we have more than one option, it is important to label our values. Labels are defined on the same level as the value key with the label key. Here is our new configuration:
_array_structures:
example:
values:
- label: 'First'
value:
name:
description:
image:
- label: 'Second'
value:
heading:
subtext:[[_array_structures.example.values]]
label = "First"
[_array_structures.example.values.value]
name = ""
description = ""
image = ""
[[_array_structures.example.values]]
label = "Second"
[_array_structures.example.values.value]
heading = ""
subtext = ""{
"_array_structures": {
"example": {
"values": [
{
"label": "First",
"value": {
"name": "",
"description": "",
"image": ""
}
},
{
"label": "Second",
"value": {
"heading": "",
"subtext": ""
}
}
]
}
}
}
There are a number of ways to change the way your array values look, just like the label key. These include the description, icon, image, and image_size keys. See the array structures reference for more details on these keys.
