How to Handle a List of Things Using Repeating Groups in Your Bubble.io No Code Web App

Not Sure How to Get the Right Data Out of a Repeating Group in Your Bubble.io No Code Web App?

A Repeating Group is the Element you will use to show a list of “things” in your Bubble.io no code web app. So if your no code app deals with real estate or cars or books or users, etc, you’re going to be dealing with a list of those things all of which are stored in Bubble’s database for you.

For a Repeating Group to get the right data you want to show, you need to select what type of data you want to use in each Repeating Group instance. For example, if you have a no code app for Teachers and Classes, you’ll probably want to show the list of Teachers teaching a specific Class or the list of Classes a particular Teacher is teaching. A Repeating Group is the Element to use for showing the list of Teachers or the list of Classes.

Figuring out How To Constrain a List of Things in a Repeating Group Can be Challenging – But Let’s See How Easy It Can Be

Using the Teacher and Class example, let’s assume your app has lots of Users that are either a Teacher or a Student. You will want to set-up your Bubble.io no code web app’s data structure to easily determine different types of users. It’s beyond the scope of this post so check out this post and related video for setting up different user types.

When you want to use a Repeating Group to only show the list of Teachers you’re going to need to add a Constraint. Let’s see how this is done by referring to the image below where you see the Element popup for the Repeating Group called “RepeatingGroup User”. The “Type of content” is “User” because Teachers are of Data Type “User” in the app. Later you’ll see what a “Type of content” for a Data Type called “Class” looks like. Now that Bubble knows the Repeating Group will have User data you need to “send” data to the Repeating Group from Bubble’s database using “Data source”.

PRO-TIP: Setting up “Data source” is an important step – not setting up “Data source” correctly will prevent Bubble from sending the data you want into the Repeating Group. If you are not getting the data you expect in the Repeating Group, check how you have “Data source” set up.

In the “Data source” below you see “Search for Users” which opens a second popup where you add “Constraints” used in the search criteria.

By clicking the “Add a new constraint” button you can add a new Constraint. In this example the Constraint is “Type of User = Teacher”. This tells Bubble that for this specific Repeating Group you want to search for all Users in the database that also have the value “Teacher” in the “Type of user” Data Field. Then Bubble will provide the data on all Users that are “Teachers” in “RepeatingGroup User”

A Second Example – Using Custom Data Type as a Search Constraint

Now let’s take a look at a Repeating Group (“RepeatingGroup Class”) which will show all of the Classes taught by the Current User. In this example the “Type of Content” is a Custom Data Type called “Class” (not “User” like above). You see the “Data source” is another search but this time it’s “Search for Class” since you’re looking for “Class” data and not “User” data in the Repeating Group.

The Constraint in this Repeating Group is for all “Classes” that have a “Teacher” who is the “Current User” (person currently logged into your Bubble.io no code web app). So if the person currently logged into you app is teaching 3 different Classes, then the data for those three classes will be available for you in the Repeating Group. The Class data might be “Name of Class”, “Textbook” used in the class, etc.

Using Repeating Groups for Lists is Very Common in Bubble.io No Code Web Apps

As you can imagine, you will be creating a lot of list data in your Bubble.io no code web app. And using Repeating Groups is the right tool for getting the list of data out of the Bubble database so your Users have access to it. Here are three take-aways:

1. Setting up the “Data source” field correctly is very important
2. Repeating Groups can be used on any Data Type, not just User
3. Constraints are important so you get the right data in a Repeating Group

For more details on setting up Constraints in your Bubble.io no code web app, check out the video below which also has a BONUS – see how to use a Dropdown as Constraint input.

And please subscribe… Thanks in advance!

FREE ACCESS to this Bubble.io design when you join our email list!