Populate an Array input

Populating an Array input#

Without additional configuration, default Array inputs become misconfigured when empty.

In default Array inputs, CloudCannon will clone the last entry in the Array to add a new entry. This method is not possible with an empty Array. You can configure the entry input type or create a structure to avoid this issue and support empty Arrays.

Entry input type#

The entry input type defines what type of input CloudCannon should use to populate an Array or Object. Defining the entry input type for an Array input allows the Array to be empty without becoming misconfigured. All new entries added to an Array input will match the input type specified by the entry input type.

Array inputs with a defined entry input type avoid the issue of becoming misconfigured when empty. Because you have specified which input type to use in the Array, CloudCannon can repopulate the input if you delete the contents of the Array or create a new instance of that input.

You can configure the entry input type for your Array input under the _inputs key. To specify future entries within a particular Array, use the key name of the Array followed by the [*] characters. Define the type of input for those entries with the type key.

_inputs:
  gallery:
    type: array
  gallery[*]:
    type: image

{
  "_inputs": {
    "gallery": {
      "type": "array"
    },
    "gallery[*]": {
      "type": "image"
    }
  }
}

Structured Arrays#

A structured Array allows your team to select a predefined template to populate the inputs.

Structured Array inputs appear similar to the default input. However, unlike the default Array input, when you click the + Add button to add a new array entry, CloudCannon will prompt you to select which structure to use.

Structured Array inputs avoid the issue of becoming misconfigured when empty. Because you have configured at least one structure and linked it to your input, CloudCannon can repopulate the input if you delete the contents of the Array or create a new instance of that input.

You can configure an Array input using the structures key. Define the structures key under options within your input key name. The value of the structures key can be a string or an object.

If you have defined your structures elsewhere under the _structures key, you can reference it by using the key name as the value (i.e., _structures.key_name).

_inputs:
  staff:
    type: array
    options:
      structures: _structures.staff_members

{
  "_inputs": {
    "staff": {
      "type": "array",
      "options": {
        "structures": "_structures.staff_members"
      }
    }
  }
}

Alternatively, you create an Array called values to define your structures directly within your input configuration.

_inputs:
  staff:
    type: array
    options:
      structures:
        values:
          - label: Manager
            icon: face
            value:
              name: 
              job_description: 
              profile_picture: 
              url: 
          - label: Employee
            icon: support_agent
            value:
              name: 
              job_description: 
              profile_picture: 

{
  "_inputs": {
    "staff": {
      "type": "array",
      "options": {
        "structures": {
          "values": [
            {
              "label": "Manager",
              "icon": "face",
              "value": {
                "name": null,
                "job_description": null,
                "profile_picture": null,
                "url": null
              }
            },
            {
              "label": "Employee",
              "icon": "support_agent",
              "value": {
                "name": null,
                "job_description": null,
                "profile_picture": null
              }
            }
          ]
        }
      }
    }
  }
}

Options#