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:

Figure 1: Added Main Page Component

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

Figure 2: Added Container Component

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

Figure 3: Added Running Number Indicator Component

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

Figure 4: Added Grid Component

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

Figure 5: Added Text Input Components

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

Figure 6: Added Array Buttons Components

6. 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:

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).

Figure 8: Transaction Data Item - object

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

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:

Figure 9: Container Component

1. Click the Container component (1).

Result:

The Container component Properties section (2) appears:

Figure 10: Container Component Properties Section

2. Click the icon (3).

Result:

The Model main screen appears:

Figure 11: Connecting the Container Component

3. Click the object type transaction data item (4).
4. Click the OK button (5).

Result:

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

Figure 12: Running Number Indicator Component

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

Result:

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

Figure 13: Running Number Indicator Component Properties Section

6. Click the model (8).

Result:

The model changes location:

Figure 14: Connecting the Running Number Indicator to the Model

7. Input a dot (.)(9).

8. Connect the Text Input components to the Model:

Figure 15: Text Input Component

9. Click the Text Input component (10).

Result:

The Text Input Properties section (11) appears:

Figure 16: Text Input Properties Section

10. Click the icon (12).

Result:

The Model main screen appears:

Figure 17: Connecting the Text Input Component

11. Click the appropriate transaction data item (13).
12. Click the OK button (14).

Result:

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

Figure 18: Text Input Connected to the Model

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

Figure 19: Array Buttons component

Result:

The Array Buttons Properties section (17) appears:

Figure 20: Array Buttons Properties Section

15. Click the icon (18).

Result:

The Model main screen appears:

Figure 21: Connecting the Array Buttons Component

16. Click the object type transaction data item (19).
17. Click the OK button (20).

Result:

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

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):

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):

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.

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:

Figure 26: Array Items on Digital Process

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

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:

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).

Figure 29: Page Number Checkbox

Result:

The Page Properties section appears:

Figure 30: Page Properties Section

3. Click the model icon (2).

Result:

The Model screen appears: 

Figure 31: Model Screen

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

Result:

The PDF screen appears: 

Figure 32: Page Number Checkbox

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

Figure 33: Field Connected to the Model

8. 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:

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:

Figure 35: Complete and Email 

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

Result:

The Email Details window appears:

Figure 36: Attachments

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

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

Figure 37: Email and Attachment

Duplicating a PDF

(See Figure 38 to Figure 41)

Using EasySend's platform it is also possible to duplicate PDF pages displaying array items and to send each page as an attachment to relevant end-users. For example, the school onboarding digital process requires both parents to input personal details: 

Figure 38: Array Items on Digital Process (Parents)

And when that part is done, input children details:

Figure 39: Array Items on Digital Process (children) 

On the Preview page, the PDF displays the array items per page in a sequence - the first parent followed by the children and the second parent followed by the children:  

Figure 40: Array Items per PDF Page 

When sending the PDF forms as attachments as part of the complete stage output email, the parents array items will appear on different forms while the children information will appear on each form:

Figure 41: Array Items per PDF Page (Attachment)

How to Duplicate PDF Pages?

(See Figure 42 to Figure 45)

To duplicate PDF pages, perform the following steps:

Figure 42: Model Icon

1. Enter the PDF screen.
2. Click the Model icon (1).

Result:

The Model screen appears: 

Figure 43: Model Screen

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

Result:

The PDF screen appears and the form is connected to the Model (4):

Figure 44: Form Connected to the Model

5. Define and connect PDF fields to the Model, for example (5):

Figure 45: Field Connected to the Model

6. Repeat step 5 as necessary.

Receiving PDFs as Attachments

(See Figure 46 to Figure 50)

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

Figure 46: Workflow Manager Screen

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

Result:

The following screen appears:

Figure 47: Complete and Email 

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

Result:

The Email Details window appears:

Figure 48: Recipients

4. Under General, select the desired Deploy/Preview environment (4) and enter the mail recipient (5).

5. Enter the content of the email.

Figure 49: Attachments

5. Under Attachments, click the checkbox (6) of the desired form and click the checkbox that indicates that each recipient will receive a separate attachment (7).

Each receipt will receive an email with a copy of the PDF form:

Figure 50: 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