Section 6 (Lesson 4/9): In this lesson, we’re going to sign up Peter, our first candidate, for Workplace. We’ll refactor our signup workflow to accommodate a second user type and use custom events to split company-type users and candidate-type users into their respective workflows.

You’ll learn about:

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

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

I bet you're eager to sign up a user to test this checkmark functionality. So am I. So what we'll do is just finish off the workflow for the personal details, then we'll go back to the sign-up page and then look at the workflow, the difference between signing up a Company and a User. Little hint: signing up a User is far easier.

Okay, so everything is in place here, really. So we have the Current User's Name first, Curren User's Name last, About, Location, so we don't really need to change much. Let's have a look at the workflow, so let's click "Edit workflow." On the Save button, we're making changes to a User. Everything seems to be attached just fine and then we're showing the message. Perfect. Let's head back to the sign-up page now.

Actually, before we do that, one thing I did want to change that I've noticed on my little break there is if we bring back up Group Account, these buttons I want to change to the brand color because we're not dealing with a company that has a particular brand color. So I want to use the particular Workplace brand within the candidate dashboard. So I'm going to choose Primary Button there. Same with Work Preferences. There's no chance of clashing here because the candidate doesn't upload a logo or anything like that.

Okay, with that out the way, let's head over to the sign-up page because there's a new concept we're going to learn here called Custom Events. Click on the sign up button and edit the workflow. Currently, this workflow states that a User signs up and that the User Type matches the User Type. Great! But the problem with this button or this workflow is that it's going to be creating a Company, and it's going to set the Company's slug, and it's going to go to the page "company". And we don't want that, okay?

So what we want to do is we want to retain the same button. We don't want to show and hide different buttons. Minimal, DRY method, all right: Do not Repeat Yourself, nice and clean. Instead, we're going to use custom events and triggers to determine or split the workflow depending on if the user is a company or a candidate.

Click on this little empty box here that says, "Click here to add an event..." We're going to go down to "Custom" and we're going to create a custom event. We're going to call this custom event "company," and let's change the workflow color here to blue. I tend to use blue for my custom events. Then we're going to create another one. This one is going to be called "candidate". Change it to blue.

Now, let's go back to the workflow "Button Sign up is clicked" and let's change it to green. I'd like you to click on this arrow between Step 1 and Step 2, and then go down to Custom Events and choose "Trigger a custom event". Now Bubble is asking: which custom event? So when a person clicks on Button Sign up, we need to sign them up, and then we're going to actually push them into either this candidate or company custom event, and within each of those will be the unique workflows. So we'll have those workflows ready to go and we just route the user off to their respective custom event.

So for the first one, for the company, this will run, but we need an Only when statement here. So we're going to say only when "Current User's User Type is Company," because after signing up, they become a Current User. Then in the company custom event, we're going to move the workflow steps here.

Go ahead, right-click, copy and paste that workflow step, and now in the newly copied over Step 3, let's change a custom event to route through to the "candidate" custom event, and change Only when "Current User's User Type is Company" to be Only when "Current User's User Type is Candidate." Pretty cool!

Now, let's move these workflows to the company custom event. I'm going to right-click, cut, click the custom event company, and then right-click, paste. Okay. Back to the Button Sign up workflow, click the "Make changes to User," step, right-click, cut, navigate to the company custom event and right-click, paste into step 2 of the custom event. And now we've broken this expression, so I just want to reconnect the Result of step 1, okay, so we're creating the company and then making changes to the Current User, adding the Company to the User.

"Set a thing's slug..." needs to be moved to the company workflow as well. Right-click, cut, and right-click, paste. Again, a thing to change is the Result of step 1, which is the creation of this Company. Looking good. And then right click again on step 4 of the sign up button workflow, cut, since that "Go to page company" needs to belong to the custom event for company. Paste. And which data, which company are we sending to the company page? The result is step one with the v equals "settings".

Okay, so you're probably thinking, wow, this is awesome, so we can create all these custom events and then route people through all these different workflows depending on what type of user they are. And yes, that's what we can do! So these custom events are super, super powerful. Start to investigate and figure out how they can be used in other instances. They're super flexible.

What about the candidate now? So let's have a look. So we're going to sign the user up, and we're doing the usual stuff, capturing the email, password, setting the type of user, and then we're going to send them off to the candidate customer event. And there's nothing else we really need to do here, aside from, navigation, "Go to page," and now we can select our new candidate page we've just created. There's no need to send data because you're just referencing the Current User. There's no page data, but we do need to set the view, so check the box to "Send more parameters to the page." Choose v equals "account," all lowercase or it won't work.

So it's a really nice way to basically chop our workflows and neatly sort them into their respective consecutive steps that they need to be. They're all together, all the company flows on this custom event and the user flows on this other event. And in real life, with the applications that I've built, I've sometimes had three or four different types of users, and that would go to a custom event, and then that custom event would then trigger another custom event for a reusable piece of logic that I use in other parts of the app as well. So it's really exciting the amount of power that Bubble gives us to be able to create these unique logic experiences!

All right, so let's go back to the design. A person clicks, "I'm a candidate" that should hide this now. So the company name, let's head over to the Layout tab and I'd like you to check that this input is not visible on page load and that it's collapsed when hidden. And we're only going to show it on condition that the state on the signup page, this User Type is "Company." That's when it's visible. So if someone clicks on "I'm a company," then we can see the input. If they click on "I'm a candidate," that input will be hidden and collapsed.

All right, head over to your scratchpad page, please, and just preview your scratchpad page because I'd like to make sure that you're not logged in as anyone. Okay, I'm just going to click on the log out button so it routes me to the correct page, and then I'm going to go to sign-up, just checking my internal navigation. All right, so you can see that currently the company name input is hidden. If I click on "I'm a company" it brings it back. If I click on "I'm a candidate", it then removes it.

Okay, let's sign up as a user called Peter, so just type [email protected] for the email. I'm going to refer to Peter as his name, not as a candidate, just as Peter, so just follow along with this. So [email protected], any password you'd like. It's still not clickable so we're going to choose "I agree to the terms of service" and then we can click "Sign up." Here we go. v equals "account," and we can see what we need to see.

Now you can go ahead and check these boxes. Have a look at that! Very cool. So yeah, so make some selections here, folks. We're not actually going to use this for anything, it's just to to teach you how to work within state lists. Go ahead and click "Save," and then we can see the "Successfully saved" alert.

Let's get Peter's name in here. Peter's last name is "Hudson". For the About, let's just type anything you like here. So I said "I'm looking for tech jobs in New York. I have a background in Data Science and AI." So let's say that his location is also in New York then and save. Fantastic. Last thing we need to do is upload Peter Hudson's image from your resources folder. And then let's just save one more time.

Let's check out the database. I've clicked on the All Users view in the App data tab, and let's click on the pencil icon so we can see our Work Preferences: Peter Hudson, About, Image, and yeah, so Bubble will always show us all of the fields attached to a User. He doesn't belong to a Company, and therefore, nothing needs to be in there.

All right, really happy with that lesson. Good place to stop, and I'll see you in the next one!