How to display data in your repeating groups in bubble.io?

How To Display Data in a Bubble Repeating Group

Working with repeating groups in your bubble.io application is one of the most important skills you need to learn. Therefore, it is no surprise that it is one of the most searched terms in search engines or YouTube playlists.

In this article, I will explain to you why repeating groups are so important. As I already did many videos for this particular topic, I will link them here as well.

Let’s go.

Why are repeating groups so important in bubble.io?

Every time you want to show your data (from your database or from your API) you will need to work with repeating groups. So basically every time you want to show more than one data object at a time, you will need to work with repeating groups.

Another example is that you know which kind of data you want to show (e.g. courses) but you don’t know which particular courses you want to show and how many of them. I guarantee you, if you are not building a static landing page, you will work with repeating groups rather sooner than later.

So every time you want to set and display data dynamically, you will find no way around repeating groups.

How to set and change data?

There are various ways how to set and change data in repeating groups. We will cover the most used scenarios.

Define what the users see without let him change the data

This is the easiest scenario. You build a page, create the repeating group and set which kind of data should be shown here. The user can’t change the data. By doing this you won’t need any additional workflows or other visual elements (e.g. buttons, drop-down menus).

The structure is always the same, you choose the type of content you want to show (e.g. data types, option sets, or default values) and you select the data source. The data source gives you a lot of flexibility. It needs to be a list of the selected type of content. So for example, if you select the type of content as a number, the data source must be a list of numbers. A single value is not sufficient.

In the following scenario, I have created an option set „hobby“, which contains a list of hobbies. The settings of the repeating group would look like the following:

Settings for repeating group with option set.
Settings for a repeating group with an option set

Of course, you could also choose some of the data types which you have created while setting up the database structure. In this example, I would have chosen the type of content „User“ and I only want to show users older than 7. The value 7 in this case could be changed dynamically if I would set a variable instead of a fixed number.

Settings for a repeating group with an data types
Settings for a repeating group with data types

If you are ready for the next step, you could also use an external API to show your data. Keep in mind that you would need to set up the API connection before displaying it in the repeating group. You can build a lot of nice examples with this method.

Settings for a repeating group with data from external API
Settings for a repeating group with data from external API

Of course, you have many possibilities to filter the data. You can set constraints, group them, sort them in almost any way you can think of.

Let the user filter the data in your repeating group

So far, we as developers were the ones who defined which data should be shown to the user. In reality, we will need to give the user some kind of filter possibilities. The most common filter option is drop-down menus. In the following example, I will show you to filter your data with three different drop-down menus. They should all be taken into account. By that, I mean the results in the repeating group should be filtered by all used drop-down menus.

We will have a list of users, in this case, school kids. They all have one age, belong to one school year and have one hobby. In the beginning, all school kids should be shown, but the user can then filter based on age, school year, or hobby.

List of school kids with filter options
List of school kids with filter options
List of school kids filtered by age and school year
List of school kids filtered by age and school year

In the example above, you see that both filter options need to be considered. I want to see all school kids which are 6 and in the first grade. Sometimes bubble.io users are struggling with that. It may happen that if they choose the second drop-down menu, the first selection gets overridden.

This setup is pretty simple. Whenever one drop-down menu is being chosen, you tell the repeating group to display a new list of school kids which takes the selected drop-down menu as a filter into consideration.

Bubble.io setup of drop-down values
Bubble.io setup of drop-down values
Bubble.io setup on how to display filtered data to a repeating group
Bubble.io setup on how to display filtered data to a repeating group

This is just one way on how to filter data. If you have a huge amount of data, you don’t want to make this database operation again. You will need to work with custom states and filter possibilities. This is advanced and will be touched on in a different tutorial.

More information about filter dynamically in repeating groups in bubble.io

How to change the data source of your repeating groups with filters

This was a very basic tutorial. Make sure to subscribe to our YouTube channel, with many more videos and tutorials about developing your own no-code and low-code application.

Need more help? We are no-code / low-code agency and love to build new digital products or internal applications. Contact us for more support.

Schlagwörter: