Repeaters

Applications often display collections of data with a "repeated" design and layout. This may include product listings, shopping cart contents, even contents of social media posts on services like Instagram can be seen as "repeating" layouts. The Repeater behavior described in this section enables an implementation of that type of layout. The Container and the Block components have an option to enable the Repeater behavior by clicking the Repeater checkbox when the component is selected:

When the Repeater behavior is enabled, the component treats its contents in the editor as a "template". When the page runs, the "template" is repeated for each element in the data model. For the behavior to work properly, the data model must contain a list of items.

Consider the following page which contains the Block component with Image and Text components. The Block component has the Repeater behavior enabled, also notice the Id of the component is myRepeaterBlock:

Repeater Data

There are several way to provide data (i.e. populate the data model) for a component with the Repeater behavior:

1. Data through Data binding
2. Direct assignment of the data

Data through Data Biding

With this approach data rendered by the repeater is passed through the data model used by the repeater component. In the sample page shown above, the Block component with the repeater behavior uses the Page data model. Data for the repeater should be placed into Page data model and will be "picked up" by the repeater. To establish the data binding for the repeater, switch to the Logic section by clicking the repeater component's logic icon and locate the Repeater Data Logic property. Enter a name for the property, for example myData:

Notice the property value comes from the Page Data Model. To set the data, use the following logic:

The data is a list of three objects. Each object has the name and image properties. The list is put into Page Data for the same property used by the repeater (myData). If you run the page at this point, you will see the repeater behavior in action, however, the data is not populated yet. In fact, the image component is not present at all since there is no default image to render.

The next step is to get the data to display in the Text and Image components. To do that you need to configure data binding for the components in the repeater template - Text and Image. Select the Text component and click the Logic icon. Locate the Content Logic property and enter name as the property name:

Notice the data binding is with a value in the myRepeaterBlock Item Data Model (the line under the Content Logic input field). When a component has the Repeater behavior, the child components' data model will be an individual object from the collection received by the repeater. Notice what an individual object looks like:

As you can see the object has the name property. This is the property the Text block's content is bound to.

A similar change needs to be made with the Image component. Return to the User Interface section, select the image component and click the logic icon. Locate the Source URL Logic property field and enter image as the property name. The rationale for the property name is the same as above - it is the property name in the object that will be in the data model:

Run the page in preview and you will see the repeater in action with all the data properly rendered:

Direct assignment of the data

With this approach data is assigned directly to a component with the repeater behavior. When a component on the page has the repeater behavior, the Logic section enables the following Codeless blocks:

The blocks become available in the Repeaters section in the UI Library category. The Set block assigns a data model to a repeater component:

The logic above sets the data for the repeater-enabled component. Rendering of the data still requires either data-binding or logic for the individual child components in the repeater template. The configuration process is the same as with the Data through Data binding approach.

Updating Repeater Data

There are several approaches for updating a repeater component data. If you used the Data through Data binding approach, the data can be modified in the data model which contains the data. Suppose the repeater data is set in Page data model as shown in the Data through Data binding section above. To modify the data collection, you could use the following logic:

The logic obtains the data model from Page Data and adds a new object to it. Alternatively, the following logic will produce the same result:

Notice the logic uses the Get Repeater Data of block. The block becomes available when your page has at least one component with the repeater behavior. The block returns the data assigned to the repeater. The logic retrieves the data directly from a repeater component and modifies it. This approach is available regardless how the data is set for the repeater.