Managing Arrays
    • PDF

    Managing Arrays

    • PDF

    Article summary

    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.

    Figure 1: Added Main Page Component

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

    Added Container Component.

    Figure 2: Added Container Component

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

    Added Running Number Indicator Component.

    Figure 3: Added Running Number Indicator Component

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

    Added Grid Component.

    Figure 4: Added Grid Component

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

    Added Text Input Components.

    Figure 5: Added Text Input Components

    1. Drag and drop desired components such as Text Inputs (5) onto the Container component.
    NOTE
    In this example, four Text Input components are created.

    Added Array Buttons Components.

    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.

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

    Figure 8: Transaction Data Item - object

    1. Create transaction data items under the object (4) created in step 1.
    NOTE
    The number of transaction data items must match the number of Text Input components.
    NOTE
    The 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.

    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.

    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.

    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.

    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.

    Figure 13: Running Number Indicator Component Properties Section

    1. Click the model (8).

    Result:

    The model changes location:

    Input a dot (.).

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

    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.

    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.

    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):
    NOTE
    Verify that the component is connected to the model without an asterisk (*).

    The Text Input component is connected to the Model.

    Figure 18: Text Input Connected to the Model

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

    Click the Array Buttons component.

    Figure 19: Array Buttons component

    Result:

    The Array Buttons Properties section (17) appears:

    The Array Buttons Properties section appears. Click the icon.

    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.

    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.

    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.

    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.

    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.

    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.

    Figure 26: Array Items on Digital Process

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

    Array Items per PDF 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:

    Array Items per PDF Page (Attachment).

    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.

    Figure 29: Page Number Checkbox

    Result:

    The Page Properties section appears:

    The Page Properties section appears. Click the model icon.

    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.

    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.

    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.

    Figure 33: Field Connected to the Model

    1. Repeat step 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.

    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.

    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.

    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.

    Figure 37: Email and Attachment

    Duplicating a PDF

    (See Figure 38 to Figure 41)

    NOTE

    The PDF duplicate feature is available on environments with version 20.11.0 and above. 

    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: 

    Array Items on Digital Process (Parents).

    Figure 38: Array Items on Digital Process (Parents)

    And when that part is done, input children details:

    Array Items on Digital Process (children).

    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:  

    Array Items per PDF Page.

    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:

    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:

    Click the Model icon.

    Figure 42: Model Icon

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

    Result:

    The Model screen appears: 

    Click the desired object type data item set as an array. Click OK.

    Figure 43: Model Screen

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

    Result:

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

    PDF screen appears and the form is connected to the Model.

    Figure 44: Form Connected to the Model

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

    Define and connect PDF fields to the Model.

    Figure 45: Field Connected to the Model

    NOTE
    Notice that after connecting a defined field to the Model, the full path is displayed, for example: parentsDetails[*].firstName.
    1. Repeat step 5 as necessary.
    NOTE
    In our example, to display the children array items per PDF page, connect the relevant page to the Model as described in the Displaying Array Items on Separate PDF Pages section.

    Receiving PDFs as Attachments

    (See Figure 46 to Figure 50)

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

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

    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:

    Click Complete. Add a new email or click the Edit button of an existing email.

    Figure 47: 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 General, select the desired Deploy/Preview environment and enter the mail recipient.

    Figure 48: Recipients

    1. Under General, select the desired Deploy/Preview environment (4) and enter the mail recipient (5).
    NOTE
    To be able to send the email with the attachments to multiple recipients, use the full path of the data item: for example: parentsDetails[*].email.
    1. Enter the content of the email.

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

    Figure 49: Attachments

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

    Email and Attachment.

    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

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

    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? 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? 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? section


    Was this article helpful?