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“.
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.
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.
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.
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.
Ich bin Sarah und ich habe in meiner Zeit in der IT-Branche schon ziemlich viel erlebt. Ich habe gleich zu Beginn meiner Laufbahn als Beraterin das Gespür für die Bedürfnisse meiner Kunden entwickelt. Später habe ich als Leiterin von Software-Entwicklungsteams verschiedene digitale Produkte auf den Markt gebracht.
Entspannung finde ich tief unter Wasser. Ich bin leidenschaftliche Taucherin und schrecke selbst vor eisigen Bergseen nicht zurück.