How to use the Repeater widgets in Connect App Builder
Repeater widgets can be used to present a dynamic design by cycling through the content in a data source. Before you begin adding a repeater widget to your app consider how you want your design to operate.
Use the repeater to repeat a design across a grid. If a data connection is established with a repeater widget, the repeater widget can display text, and images that can be unique to each cell on the grid. You can cycle through your content using the repeater widget as well, displaying multiple items over time.
The Repeater widget can also showcase a design within a single frame. When connected to a data source you can cycle through your content displaying multiple items over time.
Click on Widgets in the left menu in App Builder. Click on Repeater to add a repeater widget to the App Builder Canvas.
Click and drag on the widget wireframe handles to manually manipulate the rotation and size of the widget wireframe on the canvas. The text and spacing in the widget must be resized from the widget properties menu on the right.
Change the background color of the entire widget by clicking in widget properties menu on the right then on the corresponding swatch next to Background. Change the cell color for all cells by clicking on the corresponding swatch to the right of Cell Color.
A color picker will appear when either swatch is selected. Adjustments to border color and width will affect the border of the cells in the repeater grid.
Alternatively, any color property can be dynamically driven using an external data source. Click on the lightning bolt next to the color swatch to connect to a data source. Follow this link to learn more about connecting to a single data point.
If you want to change the number of rows or columns in the repeater grid, click and enter the number of rows and columns below Rows and Columns. Alternatively, you can click on the arrows to the right of the values to increase or decrease the value. You also can add more or less of a gap between cells by adjusting the horizontal or vertical Row Gap.
Although repeater widgets can function without an attached data source, they work best when connected to a data source. Click on Connect to Data Source to connect to a data source. Follow this link to learn more about Connecting your data.
Once connected to data you should see the right hand properties panel change.
Double click to edit the repeater. Now the properties will have a preview of your data source content along with a few other options on how to handle your data in the repeater widget.
After placing the repeater widget on your App Builder canvas, double click on any cell to edit the repeater.
To add items into the repeater widget from your data source, click on the item and drag it onto the canvas over the cell you are editing. Once placed you should see the item change to reflect the corresponding data from your data source. Follow this link to Learn more about Connecting your data.
You can add other components such as text, photos and shapes to the repeater from the left menu. Any text photos or shapes added to the repeater that are not from your data source will be the same in each cell of the repeater.
If your data source includes hosted image links, you will see them in the preview in the right hand properties panel. The images can be added to the repeater by dragging and dropping them into the repeater cell you are editing.
Click Done Editing Repeater at the bottom of the window when you are finished editing the widget.
With the Repeater widget selected in the widget properties menu on the right you should see a few options listed below your data preview. Sort Data, Repeat Direction, Cycle Content, and Hide cells without data.
Cycling content will display all content from your data source by cycling through each record.
When you enable Cycle Content you will see a few more controls appear below in widget properties. Cycle Preview, Cycle Duration and Cycle Animation Style.
Click on the arrows to the right of Cycle Preview to review, on the canvas, how your content looks when it cycles.
Type in the value field to the right of Cycle Duration to set the amount of time in seconds before the repeater changes to the next set.
Click on the drop down below Cycle Animation Style and choose from a list of animations for the cells in the repeater when cycling.
Hide Cells without Data will hide cells if there are fewer data records than cells. In the example below the grid is 2X3 but there are only 9 records, hiding cells without data will hide the bottom row in this case.
Some data-connected widgets can be added to a repeater cell. To add a widget to a repeater, double click on a repeater cell to edit the repeater. Click on the widgets from the left menu, then choose the widget you want to add.
You can adjust the settings of the widget from the right hand properties panel. Click on the lightning bolt next to a value to choose a collection or column from the data source connected to the repeater.
The widget will now match the information in each cell for each item in the collection.
Click to learn about using Graphs in Connect
Learn how to connect your data Connecting your data
Not sure how to start? Get inspired Using pre-built Templates
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
