Creating Data Repeaters
  • 03 Jun 2022
  • 3 Minutes to read
  • Dark
    Light

Creating Data Repeaters

  • Dark
    Light

Overview

A Data Repeater is a custom user-defined Form Control that displays or manipulates specified Input and Output data. A Repeater Form Control can be used in cases where the user needs to add or remove items from a list of entities shown on the Form such as an invoice or an inventory tracking Form. 

A Data Repeater functions with the aid of two Buttons components: Data Repeater Add Button and Data Repeater Remove Button. These controls allow the end-user to add another line item and remove the selected line item respectively.


Example

In this example, a Data Repeater Form Control will be created and added to a Form. The example Data Repeater will populate a list of Accounts with options to add and remove data.

Prerequisites
Must have basic knowledge on creating a Flow and a Form.
  1. In the Flow Designer, add a Get All step from the INTEGRATION > INTERNAL SERVICES > ACCOUNT SERVICES category. This step is going to populate the Data Repeater with existing information.
  2. After the Get All step, add a Show Form step from the FAVORITE STEPS category. Select PICK OR CREATE FORM and create a Form.
  3. In the Toolbox, navigate to the USER CONTROLS category. Drag and drop a Data Repeater, Data Repeater Add Button, and a Data Repeater Remove Button onto the Form.
  4. In the Properties panel of the Data Repeater, select PICK OR CREATE SOURCE. Select Create New and create a new Data Repeater control.

  5. In the Properties panel of the Repeater Control editor, navigate to FORM DATA > Input Type, select PICK. Search for and select Account.

  6. Open the Data panel on the left-hand side of the Designer. Expand FORM DATA, drag and drop Email Address onto the Control. 
  7. In the Email Address dialog select Text Box as the control type.  
  8. Save and Close the Repeater Designer. 

  9. Back in the Form Designer, in the Properties panel of the Data Repeater, select Visual Indicator for the Selection Type
  10. Under INPUT DATA > Add Button select DataRepeaterAddButton.
  11. Under INPUT DATA > Remove Button select DataRepeaterRemoveButton.
  12.  Under Common Properties, type "Account Email" for the Data Name.
    Data Repeater Setting NameDescription
    Selection Type

    Modifies the visual indicator that separates a selected line item from the unselected. It is highly recommended to use a Selection Type for easier reading of the Data Repeater by the end-user especially if the Designer anticipates large data.

    • None: No visual indicator separates the selected line item.
    • Visual Indicator: A bar to the left of the Repeater appears next to each item and its color changes to the assigned color when selected.
    • Line Number: Each line number added is successively enumerated.

    Is Read OnlyDisplays the data within the Repeater as an uneditable list.

    Auto Add New Row 
    Toggles automatic creation of a new line item once the end-user hits the Tab key on the specified component. This is most often used at the end of a line, but is not limited to that location.

    Insert Row on FocusOut FromSpecifies which component spawns new rows if the user enters the Tab key.
    Show SeparatorEnabled by default, this setting generates a line break between line items automatically when adding a new line item. Disabling this removes these line breaks.
    Override Required MessageAllows the Designer to customize the error text displayed when an end-user attempts to submit missing required data in the component.

    Short Key Set-Up 
    Promotes smoother navigation and accessibility of the Repeater by assigning hotkeys for movement between line items. Up and Down arrow keys are usually assigned for their respective movements.


  13. Save and close the Form Designer. Back in the Flow Designer, select the Show Form step. 
  14. In the Properties panel under INPUTS > Account Email, choose the output of the Get All step, "GetAll1_Output". Select Ignore for selected Account Email List.
  15. Select Debug in the top action menu. 

Debug

  1. Select Start Debugging. The Form that holds the Account Repeater Control is displayed.
  2. Practice adding and removing data. Select the Submit button to apply the changes.
    These added Accounts are not automatically saved in the system. The Outcome Data from the Data Repeater Control lives only within the current Flow execution and can be used for testing.
  3. Select View Input/Output Data on the Show Form step to see the list of Emails.
    The Data Repeater automatically updates or refreshes when records are added individually.



Was this article helpful?