Configure Repeatable Sections

Use repeatable section controls to display multiple copies of a set of controls in your web form. You can use repeatable section controls to create dynamic content for your web form.

To configure a repeatable section control:
  1. From the Advanced Palette, drag and drop a repeatable section control onto the canvas.
  2. Select the control and edit its properties on the Properties pane's General tab.
    Field Description

    Name

    An internal identifier that you will use to identify the control.

    Label

    Specifies the control name that displays to a user.

    Binding

    Defines a link between the control and a data attribute.

    Label Binding

    Allows you to define a dynamic label. To do this, you can use a data attribute listed in the Data definition pane.

    Users can Add/Remove Rows

    Allows users to add or remove rows to the repeatable section.

    Multiple Selection

    Allows users to select multiple rows of the repeatable section.

    While using a repeatable section with multiple-selection enabled to define dynamic behaviors or computed values, the options available (specific to multiple selection) in the Event or Computed Value window under the Which? field are listed here:
    • For Each Selected: Use to retrieve a value from another control to apply to each selected row of a repeatable section.

    • All Selected: Use to retrieve values from all selected rows of a repeatable section to apply to another control.

    Similarly, in a repeatable section with two controls in a row, you can use these options to apply values from one control to another on occurrence of an event. In this case, when you chose to apply an action to each selected row (by selecting the For Each Selected option), an additional option is available to chose the value source:
    • Current Iteration Row: Use to retrieve the value from one control of the current selected row and apply to another control in the same row.

    Use Data from Connector

    Allows you to populate the repeatable section from a REST connector defined for the application.

    Specify the connector settings in the Connector, Resource and Operation fields and map response settings. See Work with Connectors.

    Events

    Specifies events that trigger actions and conditions. You can customize the repeatable section control’s behavior by configuring events. See Add Dynamic Behavior to Forms.

    Note:

    While configuring events for a repeatable section, you can now add a condition based on number of rows present within the section using the Row Count property.
  3. On the Styling tab, edit the control's styling properties.
  4. Drag and drop individual controls from the Basic or Advanced Palette into the repeatable section control.
  5. Configure general and styling properties for the controls inside your repeatable section control.

    See Configure Basic Controls and Configure Advanced Controls.

    Note:

    If you delete the repeatable section control, all the controls grouped under it get deleted.
  6. Click Preview to try out using the control.

Some Useful Event Actions for Repeatable Sections

This section lists a few useful actions that you can apply to a repeatable section through the event window. To create an event action, see Specify Actions.

  • To retrieve a value from another control and apply it to each row of the repeatable section, use the For Each option under the Which? field.

  • In a repeatable section with two controls in a row, to copy values from one control to another (for each row) on occurrence of an event, use the For Each option along with an additional option called Current Iteration Row that is available to choose the value source. The Current Iteration Row option allows you to retrieve the value from one control of a row and apply to another control in the same row. The following figure shows an event action configuration for a repeatable section with two controls in a row. The value of control2 is copied into control1 for each row of the repeatable section on occurrence of the specified event:

    Description of foreach-rs.png follows
    Description of the illustration foreach-rs.png