How to Create a Workflow with Auto-Binding

In a previous video, I've demonstrated how to create a workflow where if you click on the button like this, you receive a pop up, which you can then edit a piece of content in your database by hitting Save, you commit that change to your database, as you've just seen there.

This video is going to show you how to do that using auto-binding. And 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. So 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. And then 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.

And let's hit preview, see what that does. Okay, and so what auto-binding lets me do... Okay, I still have a workflow of some sort set up that sends you through to the profile page.

Just going to get rid of that. That's from a previous demonstration. Let's try that again. So there we 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. So what I was trying to demonstrate is I can now type in Tony Stark, and then if I click off that is now saved. And 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 haven't had to create a workflow flow. I haven't had to say when input is changed, do this right to database. No, I've just simply enabled auto-binding.

Using an Alert to improve Auto-binding UX

You can activate an alert by dragging on the alert element. 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 safe here because as soon as the user clicks out of that element, it saves it to the database with auto-binding. And so if the user was 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. 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.