Repeating groups
This section covers the container type repeating group, used to display lists of things such as records from the database
The repeating group is a container type used to show a list of things such as records from the database by repeating the content of the group one time for each entry.
To show a list of things, you can also use the table element. You can read more about the table element and how it's different from a repeating group in the article below:
Article: The table element Article section: The difference between repeating groups and tables
We explored in the earlier general section about groups that you can load data into a group and allow its child elements to reference that data. Repeating groups work much in the same way, except that they are set up to work with a list of data rather than a single record.
For example, let's say you want to display a list of users in your app and include information like their name and email address. By adding text elements to a repeating group showing that information, the content of the group will be duplicated for as many users are in the list. If the list contains five users, every element that you add to the Repeating Group will be repeated five times.
Let's explore a few different ways in which you can use repeating groups to set up flexible lists of data in creative ways:
List design
In the example below there are some key things to note about how repeating groups work:
We have set the Type of content to User, meaning the repeating group will accept a list of users as its data source
In the Data Source we are using the Do a search for command to load a list of users
In the repeating group you can see that the text element inside is repeated once for each row. Each row is called a cell.
We can reference the user in each cell by including Current Cell's X in the expression. In the example below that makes it the Current Cell's User since our Type of content is set to user. From referencing the current user, we can fetch their first name.
Let's see how that would look in the live app:
Card design
As we saw in the previous example, repeating groups can be used to set up simple lists such as a list of contacts in a or products in a product inventory system.
But they can also be used in powerful ways to set up lists that are designed in other ways such as product cards:
In the illustration above, the white card with the shadow is a regular group placed within the cell of the Repeating Group. We've styled it with a white background, rounded corners and a shadow and placed an image, a few text elements and a button to complete the design.
From a database perspective, the products we are looking at would include fields for Name (text), Price (number), Image (image) and Description (text) that we can then load and display for each cell of the Repeating Group.
Masonry design
With Bubble's responsive engine, you can use Repeating Groups to set up a fully responsive masonry design.
Try our interactive tutorial below or scroll down for the text version.
To use the masonry design, you need to complete a few steps:
The masonry layout requires that you use the responsive engine.
In the for the Repeating Group, make sure you have both Set fixed number of rows and Stretch rows to fill vertical space unchecked:
Set Scroll Direction of the Repeating Group to Vertical.
Check Display items as masonry grid
When the masonry grid settings have been set you can adjust the gap between each cell in pixels by changing the Row cell gap and Column cell gap settings.
Other ways to learn
Last updated
