The way to think about repeating groups is an element that repeats data.

Now why does it do this? Well, if you think about what an application does, it collects data, inserts it into rows in the database, and then we display that data back. That’s it in a nutshell.

So a repeating group allows us to pull data out of the database and display it in a list format, but also to manipulate how the data is displayed. So what I’ve chosen to do is grab the data from the database — these three projects — then design a card layout so the cards are next to each other, and then display the data vertically inside these cards.

And this is a great use case for a repeating group.

Let’s jump into the editor to see how I configured this.

So on the left-hand side, I'm clicking on my repeating group. Okay, and my repeating group is in a parent group called main — that’s not too important. Let me click back on the repeating group.

Let’s scroll to the appearance tab. We can see that Bubble asks us, “What type of content would you like to display in this repeating group?” And Bubble AI went ahead and did this for me — thank you!

And the type of content is project. And then Bubble is saying, “What is the data source?” Or in other words, “Where do I find this data?” And that’s where we construct the search — search for projects.

Now what other options do I have in here? Well, I have user, project, reminder, task. If I jump into my database, I can see that my data types are user, project, reminder, and tasks, so it matches.

So all I need to do is set the type of content to project, and then use this expression to search for projects.

I'm going to clear this expression so we can build it again.

So currently we have no data source. We have changed the type of content to project, and now we need to go find the projects in the database — because we have actually quite a few options, and we'll look at a few of those.

So I'll be doing a search for. Okay, because I have to go look in the database — do a search — Bubble’s going to return the four data types that exist in my database. Obviously, if I'm trying to display a project, well then I'm going to click on the project data type.

And this is the important part, because if we are building, for instance, a SaaS application where many different teams can work with this SaaS software — well, all of that data will sit in your database. Teams that aren't related. And it’s the constraints that allow us to make sure that the right people have access to the right information.

So currently I’ve just started building this app, so I don’t have teams at the moment — I just have users. So let’s assume that all users belong to the same company or team. But the constraint I’m going to use is that I’m browsing — I want to see my projects, where I am the owner.

So I’m going to click on owner = current user. And then I’m the person holding the mouse, so that must be me here — current user.

So when I’m looking at projects, I’ll be seeing my own projects.

Okay, let’s just double check the database that this is clear. Click across to the data tab. If I go to Data types > project, I can see in here that I have a user-type field and I've typed an owner here. So we've been linking all of the projects to an owner — Bubble AI went ahead and did that for me.

If I go to App data > projects, I can see that we have an owner column here, and I’m currently logged in as the user Z. So — one, two, three projects.

Okay, now if I actually remove the search constraint — just going to remove it for a second — let’s refresh the page. Can you see that we have now all of the projects from the database showing?

And maybe that’s what I want — that’s okay. But the likelihood is, with your particular app, you would never just search for data. You would always set constraints.

So let’s set up the constraints again to make sure that owner = current user.

Now, how do we actually display data inside the repeating group?

Well, it looks like Bubble AI added a card, and it would have done this because there are more layout options in a particular card. So the card takes up all the available space. I can see padding around the card.

But what’s important here is that the card has a type of content as well, and that type of content is referencing the current cell's project.

So whenever you put a container — such as a group — inside a cell of a repeating group, you’ll always have the data source option to grab the current cell. Okay?

And in this case, the type of content is project. And because we've done that, any element we now place inside this container or this group will have access to the parent group’s project.

And then we can select whatever we like here. And Bubble AI already took care of this for me.

So we can see a cascade of data:

So it’s almost three element layers that pass information through to the final element — which in this case is the text.

Now, going back to the repeating group, we have other options here. We have formatting options — how we would like it to be displayed. So this is currently set up to be a card.

Okay, I'm not going to get into the design too much at the moment, but we have many options at our disposal to design these exactly how we would like.

We can even change the background style to a flat color. We can add borders, border roundness. We can add shadows.

On the layout tab, we have all sorts of layout options as well.