Introduction to Auto-Binding Fields In Bubble.io

Understanding Auto-Binding in Bubble.io

In a previous video, I've demonstrated how to create a workflow, where if you click on a button like this, you receive a pop-up which you can then edit a piece of content in the database by hitting save. You commit that change to your database as you've just seen there. But this video is going to show you how to do that using auto-binding. Auto-binding allows you to cut down on the number of workflows that you have to create and can offer a slightly better experience for your user.

Setting Up Auto-Binding for Name Editing

We're still going to focus on editing the name, but I'm going to put an input field here instead and enable auto-binding onto name. Auto-binding has to have an additional rule added in your privacy settings. Normally you'd have it set as the creator, but for this demonstration, just so it works, I'm going to say that everyone can edit the name through auto-binding. Let's hit preview and see what that does.

Demonstrating Auto-Binding Functionality

What auto-binding lets me do? I still have a workflow of some sort set up that sends you through to the profile page. I'm just going to get rid of that. That's from a previous demonstration. Let's try that again. So there you go. That highlights one of the trade-offs of auto-binding that if you're working with inputs, you can't edit the input, but also have the input as a button.

Auto-Binding in Action

What I was trying to demonstrate is I can now type in Tony Stark and then if I click off, that is now saved. You saw very quickly it went across and that is saved to my database. I'm refreshing the page to show that it has indeed saved. Same for here. And it's saved. So I've not had to create a workflow. I've not had to say when input is changed, do this write to database. No, I've just simply enabled auto-binding and you can activate an alert by dragging on the alert element.

UX Considerations with Auto-Binding

I think one of the UX disadvantages of auto-binding is you have to make it clear to your user that it has saved. For example, if we were to still use the pop-up, I could create this as an auto-binding element and then change this to a close button. But it wouldn't be very good UX to have this as an auto-binding element and then still stay save here because as soon as the user clicks out of that element, it saves it to the database with auto-binding.

Potential UX Issues with Auto-Binding

And so if the user wants to edit the text and then click off the pop-up or come back to the site at another stage, it's still been saved even though they haven't clicked the save button, which I would say is bad UX. You're not making the steps clear enough for your user what's going on.

Conclusion

But hopefully that's gone some way to demonstrating how auto-binding can cut down on the amount of UI you have to design and also the number of workflows you've got to work out.