In UI Builder, use repeaters to repeat one or more components with results from a data resource.

Before you begin

Role required: ui_builder_admin

About this task

The repeater component acts as a basic loop that repeats the data you provide in multiple components within UI Builder. Repeaters use an array or an array of objects. For example, the array [{"task": "A"},{"task": "B"}] repeats the content inside it two times. Repeaters enable you to bind values to a data array property. @item.value.{property_name} binds the values to the component inside the repeaters. If you want to bind a task, you can bind it as @item.value.task, and the repeater displays the correct value.

Components inside a repeater repeat the number of items in the data source, regardless of whether the component output is made dynamic or not. For example, say that you place a Header component inside a repeater with three data elements but don't change the Label field. Then you see three instances of the Header with the same output Label.

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.
  2. Open an experience or create an experience by selecting + Create.
    See Configure how users interact with your applications in UI Builder for more information on creating experiences.
  3. Open the editor for the page where you want to add the repeater.
    If you haven't created a page for your experience, see Create a page in UI Builder for more information on how to create a page.
  4. Connect a data resource to your page.

    For example, add the Look Up Multiple Records data resource to your page. See Add and configure data resources to a page for more information on connecting a data resource.

    1. Select the Look Up Multiple Records data resource.
    2. Configure the data resource to use the Incident table.
    3. In the Max results field, enter 5.

      The Look Up Multiple Records data resource is configured.

      Data resource configuration with Incident table selected, "opened" and "short description" return fields added, max results set to 5.
  5. Select an existing container or create a column layout.
    See Organize components in UI Builder pages for more information.
  6. Add the repeater component to your page.
    Arrow pointing to repeater component in the toolbox.

    For information about adding components, see Add and configure components.

  7. In the Configure tab, select None to configure the component manually.
  8. In the Configure tab, add an array that defines the data for repeated components.
    1. Point to Data array and select the Bind data icon (Dynamic data binding icon.).
    2. Under Data types, select Data resource.
    3. Under Pill view, select the look_up_multiple_records_1 pill.
    4. In the next column, double-click or drag results to add the @data.look_up_multiple_records_1.results output.
    5. Select Apply.

      The results from the data resource are bound to the repeater component. Within the repeater, one component represents each result.

      Data binding configuration with @data.look_up_multiple_records_1.results added
  9. Under the repeater that you added in the previous step, select Add component.
    Add component link in the content tree.

    For example, add a Heading component.

  10. In the Configure tab, select None to configure the Heading component manually.
  11. Configure the component you nested in the repeater.

    For example, bind the displayValue to the component. See Connect data to your components for more information.

    1. Move your cursor to the Label field and select the Bind data icon (Dynamic data binding icon.).
    2. Under Data types, select Repeater.
    3. Under Pill view, select the value pill.
    4. In the next column, select the number pill.
    5. In the next column, double-click or drag displayValue to add the @item.value.number.displayValue output.
    6. Select Apply.

      The displayValue is bound to the Heading component.

      Data binding configuration with @item.value.number.displayValue added
  12. Select Save.

    Only the first value of a data set displays on the stage.

    Heading component displays first set of data in the preview.
  13. View and test your page by selecting the Preview button.
    A tab opens to display the page preview with repeated data.

    Page preview displays all data from repeated components.