---
title: "Managing Arrays"
slug: "creating-arrays"
updated: 2024-11-27T16:57:43Z
published: 2024-11-27T16:57:43Z
canonical: "kb.easysend.io/creating-arrays"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://kb.easysend.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Managing Arrays

## Article Overview

This article describes how to manage arrays. Starting with how to create them, which components to drag and drop to the canvas, in which order, and how to connect them to the Model. The article also describes different methods for displaying array items on a PDF.

## What is an Array?

An array is used to duplicate fields for data input by end-users while using a digital process. For example, if end-users need to input information about their kids, they can add the appropriate number of fields by themselves instead of using pre-created static fields that were created beforehand.

### Array components

An array is created from the following components:

- Mandatory Components:
  - Container
  - Running Number Indicator
  - Array Buttons
- Other components such as: Text Inputs, Checkboxes, and Radio Questions.

### How to Build the Array Structure?

(See **Figure 1** to **Figure 6**)

To build the array structure, perform the following steps:

![Added Main Page Component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655807846729.png)

**Figure 1: Added Main Page Component**

1. Drag and drop a Main Page component (1) to the canvas of the Webflow.

![Added Container Component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-k5jxkxyp.png)

**Figure 2: Added Container Component**

1. Drag and drop a Container component (2) onto the Main Page component.

![Added Running Number Indicator Component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-2dgr3nuc.png)

**Figure 3: Added Running Number Indicator Component**

1. Drag and drop a Running Number Indicator component (3) onto the Container component.

![Added Grid Component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-3jxupz0s.png)

**Figure 4: Added Grid Component**

1. Drag and drop a Grid component (4) onto the Container component.

![Added Text Input Components.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673776641798.png)

**Figure 5: Added Text Input Components**

1. Drag and drop desired components such as Text Inputs (5) onto the Container component.

NOTEIn this example, four Text Input components are created.

![Added Array Buttons Components.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673776760110.png)

**Figure 6: Added Array Buttons Components**

1. Drag and drop the Array Buttons component (6) onto the Main Page Component outside of the container.

### 

### How to Build the Array Model Data Structure?

(See **Figure 7** and **Figure 8**)

To build the array structure, perform the following steps:

![Create an object type transaction data item. Check the isArray checkbox. Set the DefaultSize field.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1654520908934.png)

**Figure 7: Transaction Data Item - object**

1. Create an object type transaction data item (1).
2. Check the **isArray** checkbox (2).
3. Set the **DefaultSize** field (3).

NOTEThe default size indicates the number of array items that will appear initially when the Webflow is live.

![Create transaction data items under the object created in step 1.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1654520930104.png)

**Figure 8: Transaction Data Item - object**

1. Create transaction data items under the object (4) created in step **1**.

NOTEThe number of transaction data items must match the number of Text Input components.NOTEThe Path of every created transaction data item under the object will be written in the following format: object name[*] - transaction data item name (5).

### How to connect the Webflow Components to the Model?

(**Figure 9** to **Figure 22**)

To connect the Webflow components with the Model, perform the following steps:

![Click the Container component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1654520988145.png)

**Figure 9: Container Component**

1. Click the Container component (1).

*Result:*

The Container component **Properties** section (2) appears:

![The Container component Properties section appears. Click the icon.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655302902689.png)

**Figure 10: Container Component Properties Section**

1. Click the icon (3).

*Result:*

The **Model** main screen appears:

![Click the object type transaction data item. Click the OK button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-8dt3cjn5.png)

**Figure 11: Connecting the Container Component**

1. Click the object type transaction data item (4).
2. Click the **OK** button (5).

*Result:*

- The Container component is connected to the Model.
- The **Webflow** main screen appears:

![Click the Running Indicator Number component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1654521087568.png)

**Figure 12: Running Number Indicator Component**

1. Click the Running Indicator Number component (6).

*Result:*

The Running Indicator Number component **Properties** section (7) appears:

![The Running Indicator Number component Properties section (7) appears. Click the model.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655817919410.png)

**Figure 13: Running Number Indicator Component Properties Section**

1. Click the **model** (8).

*Result:*

The **model** changes location:

![Input a dot (.).](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655817939241.png)

**Figure 14: Connecting the Running Number Indicator to the Model**

1. Input a dot (**.**)(9).

NOTE

Inputting a dot (.) is the only way to connect the Running Number Indicator to the Model.

1. Connect the Text Input components to the Model:

![Click the Text Input component (10).](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1654521444430.png)

**Figure 15: Text Input Component**

1. Click the Text Input component (10).

*Result:*

The Text Input **Properties** section (11) appears:

![The Text Input Properties section appears. Click the icon.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655303065436.png)

**Figure 16: Text Input Properties Section**

1. Click the icon (12).

*Result:*

The **Model** main screen appears:

![Click the appropriate transaction data item. Click the OK button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-3639krsv.png)

**Figure 17: Connecting the Text Input Component**

1. Click the appropriate transaction data item (13).
2. Click the **OK** button (14).

*Result:*

- The **Webflow** main screen appears.
- The Text Input component is connected to the Model (15):

NOTEVerify that the component is connected to the model without an asterisk (*).

![The Text Input component is connected to the Model.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655303115071.png)

**Figure 18: Text Input Connected to the Model**

1. Repeat steps **a** to **d** to connect the rest of the Text Input components to the Model.
2. Click the Array Buttons component (16).

![Click the Array Buttons component.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-2i721gk9.png)

**Figure 19: Array Buttons component**

*Result:*

The Array Buttons **Properties** section (17) appears:

![The Array Buttons Properties section appears. Click the icon.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655818047349.png)

**Figure 20: Array Buttons Properties Section**

1. Click the icon (18).

*Result:*

The **Model** main screen appears:

![Click the object type transaction data item. Click the OK button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-hsirt9mc.png)

**Figure 21: Connecting the Array Buttons Component**

1. Click the object type transaction data item (19).
2. Click the **OK** button (20).

*Result:*

- The Array Buttons component is connected to the Model.
- The **Webflow** main screen appears:

![Connected Webflow Components.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-m1g4ud94.png)

**Figure 22: Connected Webflow Components**

### 

### Array Example

**Figure 23** displays a live digital process with the array created in the previous sections. It contains the fields that will be duplicated (1) and the Add More button (2):

![A live digital process with the array created in the previous sections. It contains the fields that will be duplicated and the Add More button.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-xje0fa9c.png)

**Figure 23: Live Digital Process with an Array 1 of 2**

Once the Add More button is clicked, the fields are duplicated (see **Figure 24**):

![Once the Add More button is clicked, the fields are duplicated.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/creating-arrays-image-0c32p0bb.png)

**Figure 24: Live Digital Process with an Array 2 of 2**

## 

## 

## Array and PDF Pages

The following sections describe different methods of connecting PDF pages to the Model to display array items.

### Displaying Array Information on a PDF Page

When displaying array information on a PDF page the relevant fields must be defined and connected to the Model while specifying their array index. For example, to display information a customer inputs about their children you will define the PDF and connect its fields to the Model as follows:

- Each field on the first row (1) is defined according to its type (in this example the field type is text).
- Each defined field is connected to the appropriate transaction data item in the Model while the array index is set to 0, for example:  
**children[0].firstName** (2). For every additional row, the index offset will be +1.

![Each field on the first row is defined according to its type (in this example the field type is text). Each defined field is connected to the appropriate transaction data item in the Model while the array index is set to 0, for example: children[0].firstName. For every additional row, the index offset will be +1.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655817919448.png)

**Figure 25: Displaying Array on a PDF**

### Displaying Array Items on Separate PDF Pages

(See **Figure 26** to **Figure 28**)

It is possible to connect PDF pages to an array so each page will display one array item. For example, for a school onboarding digital process, end-users with a multiple number of children create an array item per child:

![Array Items on Digital Process.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673864435289.png)

**Figure 26: Array Items on Digital Process**

## 

On the Preview page, the PDF displays an array item per page:

![Array Items per PDF Page.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673863996391.png)

**Figure 27: Array Items per PDF Page**

When sending the PDF form as an attachment as part of the complete stage output email, each array item will appear on a different page:

![Array Items per PDF Page (Attachment).](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673865721747.png)

**Figure 28: Array Items per PDF Page (Attachment)**

## 

#### How to Display Array Items per PDF Page?

(See **Figure 29** to **Figure 33**)

To display array items per PDF page, perform the following steps:

1. On the **PDF** screen, locate the page that contains the array output fields.
2. Check the page number checkbox (1).

*![On the PDF screen, locate the page that contains the array output fields. Check the page number checkbox.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673866668667.png)*

**Figure 29: Page Number Checkbox**

*Result:*

The **Page Properties** section appears:

![The Page Properties section appears. Click the model icon.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673867298564.png)

**Figure 30: Page Properties Section**

1. Click the **model** icon (2).

*Result:*

The **Model** screen appears:

*![Click the object type data item set as an array. Click OK.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673867417618.png)*

**Figure 31: Model Screen**

1. Click the object type data item set as an array (3).
2. Click **OK** (4).

*Result:*

The **PDF** screen appears:

*![Uncheck the page number checkbox.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673867687025.png)*

**Figure 32: Page Number Checkbox**

1. Uncheck the page number checkbox (5).
2. Connect the defined PDF fields to the Model, for example (6):

![Connect the defined PDF fields to the Model.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673867841901.png)

**Figure 33: Field Connected to the Model**

1. Repeat step **7** as necessary.

#### Receiving the PDF as an Attachment

(See **Figure 34** to **Figure 36**)

To receive the PDF as an attachment, perform the following steps:

![On the Workflow Manager screen, Click the Configure button of the relevant step.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673869639608.png)

**Figure 34: Workflow Manager Screen**

1. On the **Workflow Manager** screen, Click the **Configure** button (1) of the relevant step.

*Result:*

The following screen appears:

![Click Complete. Add a new email or click the Edit button of an existing email.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673869843305.png)

**Figure 35: Complete and Email**

1. Click **Complete** (2).
2. Add a new email or click the **Edit** button (3) of an existing email.

*Result:*

The **Email Details** window appears:

![Under Attachments, click the checkbox of the desired form.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673878949199.png)

**Figure 36: Attachments**

1. Enter the content of the email.
2. Under **Attachments**, click the checkbox (4) of the desired form.

When the email is sent the form will be received (see **Figure 37**):

![When the email is sent the form will be received.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1673879285668.png)

**Figure 37: Email and Attachment**

## Troubleshooting

**Table 1** describes malfunctions that may occur when trying to manage arrays. The table also describes the reason/s for the malfunctions and provides possible solutions.

**Table 1: Troubleshooting**

| **Number** | **Malfunction** | **Reason/s** | **Solution/s** |
| --- | --- | --- | --- |
| 1 | Some Components are missing, or their design is incorrect | The wrong theme is selected | Select the appropriate theme according to the instructions described in the [Building a Webflow](https://kb.easysend.io/docs/building-a-webflow) article |
| 2 | The components in the grid displayed in the wrong direction | The properties of the Grid component are not set correctly | Set the properties of the Grid component. Read the details described in the [Layout Components Properties](/v1/docs/containers-components-properties) article |
| 3 | The required Webflow components are not duplicating | - The required Webflow components are not placed onto the Container component - The Container component is not connected to the Model - The transaction data item connected to the Container component is not an object type - The IsArray checkbox of the transaction data item connected to the Container component is not checked - The Webflow components inside the Container component are not connected to the Model - The transaction data items of the components inside the Container component are not nested inside the object type transaction data item - The Array Buttons component are not connected to the Model | - Place the required components onto the Container component as described in the [How to Build the Array Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-structure) section - Connect the Container component to the Model as described in the [How to connect the Webflow Components to the Model?](https://kb.easysend.io/docs/creating-arrays#how-to-connect-the-webflow-components-to-the-model) section - Set the transaction data item type connected to the Container component to an object as described in the [How to Build the Array Model Data Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-model-data-structure) section - Check the IsArray checkbox of the transaction data item connected to the Container component as described in the [How to Build the Array Model Data Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-model-data-structure) section - Connect the Webflow components to the Model as described in the [How to connect the Webflow Components to the Model?](https://kb.easysend.io/docs/creating-arrays#how-to-connect-the-webflow-components-to-the-model) section - Move the transaction data items of the Webflow component to be nested inside the object as described in the [How to Build the Array Model Data Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-model-data-structure) section - Connect the Array Buttons component to the Model as described in the [How to connect the Webflow Components to the Model?](https://kb.easysend.io/docs/creating-arrays#how-to-connect-the-web-flow-components-to-the-model) Section - Locate the array buttons outside the Container component as described in the [How to Build the Array Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-structure) section |
| 4 | When the digital process is live The Running Number Indicator component displays # instead of a number | The Running Number Indicator component is not connected to the Model | Connect the Running Number Indicator component to the Model by inputting a dot (.) as described in the [How to connect the Webflow Components to the Model?](https://kb.easysend.io/docs/creating-arrays#how-to-connect-the-web-flow-components-to-the-model) section |
| 5 | The Array Button components are also duplicating | The Array Button components are also placed onto the Container | Place the Array buttons onto the Main Page component as described in the [How to Build the Array Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-structure) section |
| 6 | Two or more array items initially appear when the digital process is live | The DefaultSize field of the transaction data item connected to the Container is not set correctly | Set the number of the DefaultSize field of the transaction data item connected to the Container as described in the [How to Build the Array Model Data Structure?](https://kb.easysend.io/docs/creating-arrays#how-to-build-the-array-model-data-structure) section |

## Related

- [Documents Overview](/pdf-overview.md)
- [Creating and Defining a PDF](/creating-and-defining-a-pdf.md)
- [Model Overview](/model-overview.md)
- [Setting Up the Model](/setting-up-the-model.md)
- [Building a Webflow](/building-a-webflow.md)