This article describes the repeat container component and its properties.
The Repeat Container is used to automatically repeat components in rows and update the bindings accordingly. You can easily create a vertical list layout as is common in user interfaces.
Select Repeat Container from the containers category of the component library. Move the mouse cursor over the canvas and click at the position you would like to to add a repeat container to your project:
The behaviour and appearance of the repeat container are very similar to the single container. Refer to the how-to article on the container for information on its core functionality.
Repeat Container Properties
The Repeat Container properties consist of GENERAL and DYNAMIC VISIBILITY drawers. This guide will describe the general properties only; the dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found here.
The General properties of the Repeat Container are described below:
- Enable Scrollbars – Select the checkbox beside ‘Enable Scrollbars’ to allow scrolling within the container.
- Edge padding Size – Objects placed within the container gain a border around them that determines the positioning of the repeated components.
The XY positioning is used to set the component’s left and top “padding”; the edge padding is used to set the right and bottom padding of the repeated area.
- Override Bindings Data – Select the range containing the block of data that you want to drive the repeat container. The ‘Override Bindings Data’ property will create a new row of objects for each row in the range specified. Components placed inside the repeat container automatically have any bindings within this range updated. Properties bound to cells outside of the range remain unchanged.
In the example below we have bound various properties for the components to data in within the first row of the Override binding data range.
Select confirm and you can see the corresponding and repeating components have adopted the property value of each row of data in the spreadsheet.
This is the final look of the component after the bindings have been placed.