Skip to main content

How to Use the Repeating Group Element

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 2 months ago

Transcript

In this Quick Tip, we're going to learn about the repeating group element.

We use a repeating group when we want to display a list of things coming from a data source—like a to-do list or reviews on a product.

Let's add a repeating group to the page.

First, we need to set up what type of content the repeating group will be displaying. Then, we must set the data source to retrieve the list of this type of content.

So, if we want to show all the to-do's, we would define the type of content as To Do and then set our data source to find that list of to-do's. Usually, this is going to be the result of a search with the Do a Search for expression. But you can also retrieve this list from any of the data sources available that result in a list of things. You can pull from an external API or even a list on a data type.

Once this is set up, we build how the repeating group looks by drawing elements into the first cell—and only the first cell. When we do, watch as it repeats throughout the other cells to create our repeating group.

Each cell represents one thing from the list in our data source.

To display the name of one of our to-do's, we'll insert dynamic data and see a new data source available called Current Cell's Thing. In the case of our to-do example, Current Cell's Thing becomes Current Cell's To Do. And when we select it, we can display custom fields from the To Do data type.

For this text element, we'll set the text to Current Cell's To Do's Name.

When we preview, we see our repeating group display all of our to-do's in each cell, and we can see which to-do is which since we are displaying each to-do's name.

We can customize a repeating group by changing its rows and columns or layout styles, which you can find more information about in our Layout Styles video.

Keep in mind that repeating groups are usually showing lists from a search. And with searches, we can add constraints.

In the case of our to-do example, we'll add a constraint to show only the to-do's that are created by the current user. We can also sort this by created date, with descending set to yes, so the most recent to-do's show up top.

Now, when we preview this, we aren't seeing every to-do in our database—only the ones that we, the current user of the app, have created.

Repeating groups are the key element to making your app display a list of data, so experiment more by adding your own repeating group to your app.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.

Did this answer your question?