Section 2 (Lesson 4/8): This lesson delves into the logic behind form interactions, especially the use of custom states in Bubble. Custom states are a powerful feature that let you create dynamic and interactive elements in your app like toggles, showing or hiding content based on user actions, and much more.

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

In this lesson, we're dealing with the logic of this particular form, and this will be split into three separate concepts. The first being custom states. That's going to allow us to set up the toggle functionality on the two buttons. Then we'll look at the form validation in terms of making sure that users are inputting the data correctly. And lastly, we'll look at the workflow to sign someone up. Let's dive in.

So the first concept is custom states, and earlier on the demo, I showed you that when someone clicks on this button, a selection is made. And that selection changes the button to black and the text to white. And then when the user clicked on "I'm a candidate," the same thing happened, except this button reverted back to its previous design. So this is enabled by really powerful logic called custom states, and I've created a demo to help demonstrate how it works.

So first, I'm going to show you some interactivity. Here, I've made four selections, and I can unselect these users as well. Custom states allow you to store data temporarily. And why would we want this? Well, in the instance of the functionality I've just showed you, often in a form, a user will need to make some selections, some multiple choice selections, some single selections. Maybe it would be checkboxes, radio buttons, or some toggles. Now, when this happens, often we aren't ready to actually save any data to the database. We first need a user to interact with these particular elements and then to save the data afterwards. And that's why we need custom states, because it allows this interactivity on the page.

So as I'm clicking these buttons, in the the background, Bubble is actually saving this data to the page, to my actual browser. And I'm using the data that Bubble is saving in the background, which is invisible to the naked eye, to change these buttons to checkmarks and to change the color to green. So then at a later stage, when the rest of the form is filled out, I can then grab that invisible Custom State data and save to the database. Let's head back to our Editor.

So before a user clicks "Sign up," we need to know if they are a company or if they are a candidate. And that's why we need custom states. So let's create the first one. Bring up the Property Editor for the "I'm a Company" button and then click to add a workflow. Now we want to click here to add an action. And we're going to scroll down the left-hand side to choose Element Actions and then move across to "Set state."

Now, states have to be attached to something. They can be attached to elements, inputs, whatever you like. We're going to set most of our states at page level because often a page will have lots of interactivity, therefore lots of states. We want to always make sure we know where these states are so we can reference them in workflows or we can edit them or delete them.

So the first thing we're going to do is select where we want to attach the state. I'm going to click on the dropdown and I'm going to choose "sign-up." So basically I'm saying, attach this custom state to the signup page, and I'll show you in a second how to then get back to that custom state to view it and edit it or delete it.

Now, Bubble is saying "Custom state," so I'm going to click the dropdown, and the message is "Create a new custom state." So in my example, my custom state was making checkmarks against users. So what I was doing is making a selection of users. And in our example, we need to know whether a person is a company or a candidate.

So before we go any further, we're going to head over to the Data tab and to Option Sets. I'm going to delete one of these that I've set up. I want you to please create a new option set and call it "User Type." Then hit the Create button. And now we're going to give two options here. The first one will say "Company." And the second one will say "Candidate." So this now means that we're able to access just this. It's two lines, basically, but we're able to access this data from anywhere in our app and use it in any way that we like. We can use it in custom states with buttons. We can use it in drop-downs and repeating groups, however we like. And later on, we'll be creating other option sets with a lot more data, such as locations, to be able to do the same thing: pull from a central location of a list that can be used anywhere in the app.

Let's head over to the data types, please. And under User, we need to set up some new fields. So we're asking the users before they sign up, what type of user are they? And we will save that to the database because that will determine how other logic will play out in our workflows. So we're going to create a new field. Let's call this field "User Type." And then under field type, we're going to basically select under Option Sets, and I'm just going to close the other one so it doesn't confuse you for the time being.

So we have Option Sets, Data Types, and Basic Types. If we open the Option Sets, we're going to basically match it, okay, because we've just created the User Type, and that's the data I want to collect. And then I'm going to choose Create. Now, Bubble offers us another dropdown to say, "if no selection is made, what do you want the default to be?" But we're going to have form validation to make sure that a selection is made here, so we'll leave that empty. Whenever a user signs up, they will be one of these two types.

Now, Bubble has already created us an email field, and that is a built-in field, and that is a minimum requirement for signing up to this app. If a user wants to sign up with, say, a social account such as Facebook, or they want to sign up with Gmail, they can do, but we would also extract their email address so that we have the minimum requirement, which is an email address. And there is a hidden password field that we cannot, even as the app developers, access.

Let's head over to the Design again. So let's go back to this workflow, if we edit workflow, and bring up step one again. So now the custom state, we're going to create a new custom state. We're going to give it the name "User Type," and we're going to select the Option Set, okay? User Type. We're going to say Create. Now I'm clicking on "I'm a Company," so I'm going to choose from the dropdown the value "Company" because that is the button we've clicked on. Okay.

Head over to the Design tab again. Now we're going to do a similar thing for "I'm a candidate." We're going to add the workflow. Step one, we're going to go to Element Actions and Set state. Now we're going to choose "sign-up," and because we've already created the custom state, we can just tap into that's the same custom state. Click the dropdown and the User Type will appear. And now the value for this is going to be Candidate. So choose that option.

Now that sets up the workflow in the background, but that won't change the button color. That's something that Bubble actually gives us the power to design how we like. So let's do that. Over on the Design tab, we're going to go over to "I'm a Company." We're going to click on the Conditional tab. We looked at conditions earlier through section one, where we use conditions or page width conditions to change the design for mobile.

Now, we can use this Conditions tab for many, many things. And one of the things we're going to use it for now is just to change the color of this button. We're going to click here to define another condition. Then we're going to go find the custom state. The statement will read "When," and now I'm going to type "sign" just to bring up the page. Okay, not the button, but the page itself. Then at the very bottom, I have custom states, the ones that I have created or we have created. Select "User Type." Now we're going to choose the Operator "is," and then we'll choose "Company." So the statement reads: "When the sign-up's User Type is Company." User Type is the custom state, okay? And Company is the button I'm clicking on. Then, select a property to change when true. So first thing we're going to do is type Color. Just C-o-l. And that gives us the font color and the background color and the border color. So let's do all three. Font needs to change to white. Let's just choose our style here. Background color needs to change, let's use black for this, I don't want to interfere with our primary color, which needs to be on the "Sign up" button. Let's use color again. C-o-l for the border color, and let's choose black.

Okay, to save ourselves some time, I'm going to right-click on "I'm a Company," head over to "Copy special," choose "Copy conditional expressions", and then on "I'm a candidate," go to select the button, right-click, and choose "Paste special," "Paste conditional expressions."

But we do need to make a change here, guys. Otherwise, both buttons will change when "I'm a Company" is selected. We need to change the value from Company to Candidate. And that's it.

We've just created our first custom state. First, we set up the state. We attached it to the sign-up page. Then we set up a workflow to basically set the state and select either Company or Candidate. And then we went over to the conditional statement to change the design of these buttons when the selection is made. Otherwise, the user won't know that it has been selected. And that data is now saved to the page. It's invisible, but we are going to use it on the signup workflow.

But the next stage is to test this out. So go ahead and preview your page. Here we are. So check "I'm a company" or "I'm a candidate." So we won't set up a workflow to de-select like I showed you in my checkbox functionality because basically they need to be one of these two things. So at this stage, we leave it as is.

I did want to show you one final concept with custom states in that it's temporary data. If the page is refreshed, the custom state is reset back to its default. So go ahead, refresh the page and have a look. So I've just refreshed the page, and here I'm back to no custom state selected, and I can go ahead and make my selection again. Okay, so that's just something to be wary of with custom states.

Okay, I think this is a fairly good place to stop. Custom states are super important. We'll be using them throughout the app to enable this interactivity for the user and to give them feedback as they interact with our app. So let's continue the form in the next lesson. I'll see you then.