Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

The mistake everyone makes with Auto-Binding in Bubble.io

In this Bubble.io tutorial we demonstrate the very common mistake that people make when using auto-binding to save data in their Bubble apps.

Here is what a lot of people miss when working with auto binding in Bubble. Auto binding is fantastic because it allows you to save data to your database without having to even add a workflow in. Here's an example.

Auto-binding example

This is a repeating group of contacts with a name field, and I'm going to change Eve to Adam. And then just by clicking out of the repeating group, you see the Bubble loading bar go across the top of the page, and that means it's saved. If I refresh the page, we can see now that the first entry is called Adam. But this is where I see a lot of people spending hours getting frustrated with auto binding in Bubble.

That is that auto binding can only look one level up to identify the data that it's binding to. So in this instance, we have a repeating group and then this represents one cell. And so our input is related directly to the cell. So it is auto binding to parent elements thing, name. Now, an easy way that this can just get confusing and can cause a headache is if we just change a few things. So instead of a container fix, because that needs all sorts of design and responsive issues, I'm going to say make it a row.

And then because I might want to put more than one element in here, and I want to be able to give uniform padding, I've got this group now. So this group is in the cell, and I'll make this 100 % width. And just to illustrate what I mean by putting in a bit of padding, it can really help with that. Right. Now, this group is of data type contacts, current sales contacts. So we've got our repeating group, we've got our single cell, and the data source that we're auto binding to is being passed all the way down to the input. Now, if I built that in a slightly different way, I might have ended up with this, which is that now the parent element doesn't have any data in it. Remember, auto binding will only bind to the data contained in the parent. So let's try that. We're going to get some error or it's not going to work. In fact, it's not even putting the data through. So to correct it, I make sure that my parent that my input is in has... And you can fetch this from going up the elements tree, or you can link directly to another source of data.

But we just have to make sure that the parent element for our input that we're using to auto bind has got the data in it. Let's refresh. And we're back to it working. So they have it really quick. But this is something that I've noticed in the Bubble coaching that I do where I help people one to one with their Bubble issues and to accelerate their app development. This is something that just gets people stuck because you just need to know that it's there. So that's why I've created this video. We have even more videos on our website. You can head over to plantnocode.com. Where we've got videos exclusive for our members. And also you can learn more about Bubble coaching where you can get one to one support with someone like myself. And we can help you accelerate and build your SaaS app, build the web app of your dreams.

 

Latest videos

lockcrossmenu