Creating Data Repeaters
  • 15 Dec 2021
  • 4 Minutes to read
  • Dark
    Light

Creating Data Repeaters

  • Dark
    Light

Article Summary

Overview

A Repeater Form Control, also known as a Data Repeater, is a custom user-defined Form Control that can be added to a Form to display or manipulate 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 aide of two Buttons components: Data Repeater Add Button and Data Repeater Remove Button. These components allow the end user to add another line item and remove the selected line item respectively.



Important Repeater Properties

Data Repeaters contain specific properties customized to the needs of Designers wishing to implement this component. The following subsection briefs each property listed in the screenshot below.


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 it's color changes to the assigned color when selected.
  • Line Number: Each line number added is successively numerated.

Is Read Only
Displays 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.
 keu.
Show Separator,
Enabled 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 Message
Allows 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.



Example

In this example, a Data Repeater Form Control will be created then added to a Form for display for the end-user. The example Data Repeater will populate a list of Accounts and give the end-user a visual representation of selected line items. It also allows end-users to add or remove accounts through the Form.

Create Repeater Control

  1. In a Designer Folder, select the Create Form button. 
  2. When the Create Form dialog appears, select the Data Repeater section on the left. 
  3. Choose Repeater Control, name the Form then select CREATE.


  4. In the Form Designer, locate the Form Data section of the Properties panel.
  5. Select PICK under the Input Type selector.
  6. Enter 'Account' into the search bar and select the top result.


  7. Select the Data panel on the left-hand side of the workspace.
  8. Expand Form Data.
  9. Locate the EmailAddress property, then drag it onto the Form.
  10. Select the option to define this property as a Text Box.
  11. Save and close the Form Designer.

Adding Repeater Control to Form

  1. In the Designer Project, select the Create Flow button. 
  2. Select Flow, name the Flow then select CREATE.

  3. In the Toolbox panel, navigate to Integrations > Internal Services >AccountService.
  4. Select the GetAll step drag and drop it into the workspace.
  5. Connect the Start step to the GetAll step.


  6. Select the Done outcome path of the GetAll step.
  7. In the Add After dialog, select the Show Form step in the Favorite Steps category. Select ADD.
  8. With the Show Form step selected, in the Properties panel select PICK OR CREATE FORM.
  9. Select CREATE under Create New. Choose Form, name the Form, and finally select CREATE.


  10. In the Toolbox, expand User Controls > [Existing User Controls] > [Current Folder].
  11. Click and drag the Data Repeater to a Grid section.
  12. Set the Data Name to 'Account Data Repeater'.
  13. In the Toolbox add the Data Repeater Add/Remove Buttons to the Form.
    These button controls allow the user to add or remove Account Entities in the Data Repeater Control input List.
    The added/removed Accounts are not automatically saved in the system. Additional logic will need to be added to the Flow in order to add/remove Accounts to the System. 
  14. Add a Button from the Favorite Components section of the Toolbox. Set the name of the Button to 'Submit'.
  15. In the Data Repeater Properties, navigate to the dropdown list for Selection Type. Pick Visual Indicator.
  16. Leave the Default settings for color and size as the default configuration.
  17. Under Input Data, select the corresponding Add/Remove buttons from each dropdown list.
  18. Save and close the Form Designer.


  19. In the Flow Designer, select the Show Form step.
  20. Under Inputs > select Account Repeater Control, set the mapping type to Ignore.
  21. Under Inputs > Account Repeater Control, select Pick.
  22. In the Pick Data for Input dialog, choose GetAll_Output.
  23. Connect the path from the Show Form step to the End step.

Debugging and Troubleshooting

For debugging purposes, it is helpful to provide an additional step to view the changed list of accounts. This will help users troubleshoot the Add or Remove buttons.

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.
  1. In the Toolbox, expand Data > List.
  2. Add an Add Items to List step to the 'Submit' path of the Show Form step.
  3. Select the Add Items to List step and navigate to its Properties tab.
  4. Under Inputs > New Items, select Pick. 
  5. Choose Account Data Repeater Data.All EmailAddress.
  6. Under Inputs > Original List, change the mapping type to Ignore.

  7. Select the Debug link located in the top toolbar.
  8. Select Start Debugging. The Form that holds the Account Repeater Control is displayed.
  9. Select the Submit button to apply the changes.
  10. Select View Input/Output Data on the Add Items to List step to see the new list of Emails.
    The Data Repeater automatically updates or refreshes when records are added individually.



Was this article helpful?