How to download data as CSV from a repeating group in Bubble.io

How to download data as CSV from a repeating group in Bubble.io

In of my last articles, I wrote how to create a custom CSV element to upload data in Bubble.io. Today, you will learn how to download data from a repeating group as a CSV file in Bubble.io. The reason why I’m writing this tutorial is that there is no tutorial yet existing about that topic. There are some plug-ins out there that will help you overcome this hurdle. However, you won’t need to install a plug-in and save money.

I guarantee you, it’s easy, you can make it. Let’s go.

Do I need to be an expert in Bubble.Io to understand this tutorial?

No, you don’t. But you will need to have an understanding of custom states. In this tutorial, we already touched on this topic.

The big difference is that we won’t use the Do Search functionality as a data source in the repeating group. We will use custom states. This custom state contains the data which is shown in the repeating group. This way we can easily filter the data somewhere on the page (e.g. dropdown or other input fields). The data can be changed dynamically by changing the state used by the repeating group.

First step – create custom states in Bubble.Io

One element on your page needs to have the custom state, which is used as a data source by the repeating group. In my case, I developed a filter element that contains all the different filter possibilities. The custom state calls „Search_Results“.

Custom State Search_Results for the filter element in Bubble.io
Custom State Search_Results for the filter element in Bubble.io

Second step – fill the state with data

One page load I set this state will a default set of search_results. After that, every time I changed something (filter input) data will be filtered with this input. This way I only need to have one database operation at the very beginning. I’m not forced to make a search in the database again. If you don’t feel comfortable using the filter possibility, you can still keep the „Do a Search for“ operation. The important aspect however is that you always set the custom state „Search_Results“ with the results.

Set a custom state with data
Set a custom state with data

Third step – Tell the Bubble.io repeating group to use the custom state as data source

In the next step, the repeating group showing the actual results needs to be adapted. You no longer need to have a „Do a Search for“ here. You are using the „Search_Results“ state, which can be changed from the outside with the different filter possibilities.

Use the custom state as a data source in the Bubble.io repeating group
Use the custom state as a data source in the Bubble.io repeating group

Fourth step – Place the download icon and use the custom state

Now, you have everything you need to place the icon or button to download the data from the repeating group. In my case, I use a download icon from the standard bubble.io icon set. Once clicked on the icon, I use the standard functionality to download the data as a CSV file. You can further customize which data should be hidden when downloading the CSV file. The most important aspect however is that you use the custom state „Search_Results“ as a data source.

Download data from the repeating group as a CSV file
Download data from the repeating group as a CSV file

This way, you always download the data as a CSV file, which is also shown in the repeating group.

Firth step – Be happy and continue developing

You see, it was easy, and you are now able to play around with the data without any extra plug-in.