Array

Array properties

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.

Block template

Create a UI component

Next, build a matching component in your application to render the list of links:

type Props = {
  links: {
    title: string;
    url: string;
  }[];
};
 
export const LinksList = ({ links }: Props): JSX.Element => {
  return (
    <ul>
      <p className="font-semibold">Links:</p>
      {links.map((item) => (
        <li className="list-disc text-blue-500 underline" key={item.title}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
};

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.

Block template

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.

Rendered array

On this page