Repeating groups

This section covers the container type Repeating Group, used to display lists of things such as records from the database

Video lessons

We have multiple video lessons that cover different uses of Repeating Groups:

• Creating your first Repeating Group

• How to create a full list Repeating Group

• Using Repeating Group layout styles

• Horizontal and vertical scrolling Repeating Groups

  • Vertical scrolling ↑↓

  • Horizontal scrolling ←→

• How to create a fixed Repeating Group

• How to create a masonry grid layout using Repeating Groups

  • Youtube video

  • Interactive demo

• Searching for data

  • How to set the type of data to search for

  • How to use search constraints

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.

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:

1. We have set the Type of content to User, meaning the Repeating Group will accept a list of users as its data source

2. In the Data Source we are using the Do a search for command to load a list of users

3. In the Repeating Group you can see that the text element inside is repeated once for each row. Each row is called a cell.

4. 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:

By referencing the Current cell's User's Name we can display information about the relevant user loaded into each cell.

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 CRM 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 this example we're showing a Repeating Group of two cells. Inside of those cells we're combining Regular Groups and other elements to create a design that's very different from the list we created earlier.

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.

Looking at the elements in the Bubble Design Editor we can see that each element references the parent Group's data – the Product. The parent Group (the one with the shadow) in turn references the current cell of the Repeating Group.

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.

In this example we've set up a Data Type called Product and assigned a few fields that we can then show in the Repeating Group.

Masonry design

With Bubble's responsive engine, you can use Repeating Groups to set up a fully responsive masonry design.

Using the Display items as a masonry grid you can show the items in the Repeating Group in a dynamic size that automatically adjusts to every screen size.

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 Property Editor 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.