little robot

I spend my days raving about no-code (which I’m sure my co-workers find very endearing), and I build 99% of my apps without writing a single line of code. However, one of the best things I’ve discovered about Bubble is that by pairing no-code with an itty bitty amount of JavaScript you can instantly add powerful functionality to your app.

I was building an app that used a repeating group to display multiple homes owned by a person. The information about the homes could be edited by the user and saved, however in order to save the changes, a button would have to be pushed in each repeating group cell. This isn’t ideal UX (user experience), so I needed to find a way to save all of the info with one button press.

I read about some plugins that may be able to help with this, and some clever hacks that could also mimic what I had in mind (ie. creating duplicate hidden fields), but I needed a solution right away. Luckily, I work with a group of incredibly brilliant software developers and with one snippet of code that they gave me I was able to solve my problem in an instant. Let’s talk about how it works.

(For the sake of simplicity in this post I am using the example of an invoice workflow.)

In the image below you see a basic invoice system where a user can enter Item, Quantity and Cost info in each cell. Basic Bubble functionality would require you to save each cell individually, however a single save button like the one at the bottom makes a lot more sense to a user.

To make this single save button work:

1. Install two plugins: Toolbox (enables the ability to add javascript) and Classify (enables the ability to add classes to elements).
2. Add a button to the repeating group

3. In the ID attribute, give it a class. I gave my button the class “targetSave”

4. Set up the desired workflow for your button. The image below shows an example of doing this

5. Change the size of the repeating group button to 1x1 and remove any background colour and text to make it invisible.
   ‍Note: doing this will hide it visually but may introduce accessibility issues as a screen reader will still see it. I am working on addressing this concern and will update accordingly.
6. Create your single save button outside of the repeating group

7. Set up the following workflow for the single save button:
   ‍When this button is pressed → Run javascript
8. Add the following code in the script field:
   const els=document.getElementsByClassName("targetSave")
   for (const el of els) {el.click()}

You’re done!

Now, when the single save button is pressed, it will tell all buttons with the class of “targetSave” to run their workflows.

⚠️ Some important things to keep in mind with this:

• Remember that you are triggering one single workflow inside each of the repeating group’s cells. If a cell is not visible (if you’re using pagination for example), it will not trigger.
• This technique worked very well for me with a repeating group that had a limited number of cells. For example, for an invoice that has 50 or less lines with a few inputs in each line it works great, but if your repeating group has many cells this can trigger so many workflows that it can make the app very sluggish, potentially miss some workflows, or even time out.

Thanks for reading this article - we hope you found it helpful! If you have any feedback on this solution or have any tips of your own that you’d like to share, we’d love to hear from you! Shoot us a message or join us at our weekly No-code Developers Coffee Break. We look forward to sharing and learning more with you all on our Little Robot adventures.

‍