How to use the Repeater widgets in Connect App Builder
Repeating grids can be used to present a dynamic design by cycling through the content in a data source. Before you begin adding a repeating grid to your app, consider how you want your design to operate.
A repeating grid is used to repeat a design that can be either static or connected to data.
If the repeating grid is connected to data, it can display text, images, and some other data widgets unique to each cell on the grid. Also if the repeating grid is data connected you can choose to cycle through your content over time as well.
The repeating grid 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.
If you know what data you want to display in the repeating grid, start by clicking on data in the left hand panel.
Next select your data connection from the menu that appears or click create connection. Learn more about using the left hand panel in the Creating your first connect app from scratch
Once the data is selected click and drag onto the canvas one of the data values shown in the data connection record.
A modal window will appear where you can choose between a repeating grid, a slide or on its own. Choosing a repeating grid or slide will add in a repeating grid with multiple cells or a single cell repeating grid.
After placing the repeating grid on your App Builder canvas, double click on any cell to edit the repeating grid.
To add items into the repeating grid 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.
You can add other components such as text, photos and shapes to the repeating grid from the left menu. Any text photos or shapes added to the repeating grid that are not from your data source will be the same in each cell of the repeating grid.
If your data source includes hosted image links or is a manual table with images uploaded a preview will appear in the right hand properties panel. The images can be added by dragging and dropping them into the repeating grid cell you are editing.
TIP: If you are using a source that can be updated such as a google spreadsheet, changes to image links on your spreadsheet will change in the repeating grid on the update interval chosen.
Click Done Editing repeating grid at the bottom of the window when you are finished editing the widget.
With the repeating grid 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 repeating grid 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 repeating grid 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 repeating grid cell. To add a widget to a repeating grid, double click on a repeating grid cell to edit the repeating grid. 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 repeating grid.
The widget will now match the information in each cell for each item in the collection.
A repeating grid can also be added to the canvas without data connected.
Click on Widgets in the left menu in App Builder. Click on repeating grid to add a repeating grid 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 repeating grid 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 repeating grid 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.
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
