Array
Create multiple items with the same structure but different values.
Overview
The Array property is used to create multiple items with the same structure but different values. This is ideal for lists where every item follows a consistent format—such as checklists or collections of useful links.
Usage in a workflow
In a workflow, adding items to an array is as simple as clicking the + button next to the array title. Each added item conforms to the defined structure, and the order in which you add them determines their display order.
Usage in a block template
In a block template, you can define the array property like any other property. The properties to fill out are:
- Title: The title of the array shown in the block editor.
- Description: The description of the array shown in the block editor (optional).
- Type: Select array from the dropdown.
- Key: The key of the array of items. This key is used to access the array items in your application.
- Items: The individual items in the array. Each item can be any type except for another array.
Example implementation
In this example, we’ll create a list where each link has a title and a URL.
Create a block template
Create a block template with an array named links. Each item in the array includes a title and a url.
Create a UI component
Next, build a matching component in your application to render the list of links:
Here, Tailwind CSS classes style the list. You can customize the component to match your application’s design system as needed.
Use the component in a workflow
Now we can use the Links List component in a workflow. When the user enters the block, the LinksList component will render the list of links.
Result
Now you have a block that renders a list of usefull links. You can add as many links as you want and they will be rendered in the order you added them.
Last updated on