Section 3 (Lesson 7/8): In this lesson, we’ll start to expand our database by creating a new data type to collect company-based data. We’ll also look at the relationship between the User and Company data type and learn to sign up a company-based user.

What you'll learn:

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

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

So in this lesson, we're going to sign Hana up, and we're also going to talk about the Company data type. And the Company data type is separate to the User data type because a User data type has a collection of user-based fields: Hana's Image, name, about, etc. But a Company needs to be a separate data type because that's a separate thing, a separate collection of data because the company has a location, name, logo, etc. However, we will be talking about how we actually link these together so we know how to find Hana's company in the expressions that we write in Bubble. Let's jump in.

So the first thing we're going to do is head over to the Data tab and the Data types section, and here we have our User data type. We're going to create a new one called "Company." We're going to come back later on and check this box that says, "Make this data type private by default." We're not going to do it right now, though. And if we think back to the form that we will be creating that I've previewed to you, we had a company logo, the name, the description, and the location. So let's just create these fields now. So "Logo," and that is of type image. Create. Company has a "Name" that is type text. It has a "Description" that is type text. It has a "Location" that has a field type from our Option Set, remember, this is where we're using the dropdown Option Set here, it points to Location.

Now we're going to do something a bit different here. Create a new field, call it "Employees," because we need to know that Hana is associated with this company. Now, we need to think logically about what I've just written here, this field name, "Employees." There is no data type called Employees, but this is just a label for me. I can call this group of users, whatever I like. But employees is simply a label for a list of users. Field type is User and that is a list, so check the box for "This field is a list (multiple entries)," and then create.

One more thing we need to do quickly is on the User data type, I'm going to create a new field. I'm going to call this "Company," and then, check this out! You know already that we can assign Option Sets as field types, we can assign basic types (numbers, dates, images, files, etc.) as field types, but we can also associate data types. So choose "Company" and click on Create.

So on a User type, we have a Company data type, so we've created a link between these two data types, and then on a Company, we have a list of employees because multiple people might sign up to this app and then we just have this list. And it just must be said at this point that when we create a list field, we don't really want more than 500 records here. So if it's a giant company, if it's Apple or Google, we wouldn't associate data in this exact way. Let's just stick to the basics for now.

So let's go to the sign-up page now and let's click the "Sign up" button. So step one is "Sign the user up." Fantastic. Now, we also need to, at this stage, capture if they are a company or a candidate. Okay, so on the "Sign the user up" action, I'm going to click "Change another field" and I'm going to choose "User Type," and then we know that the User Type is a state Option Set set at page level. So let's navigate to the page and let's find the User Type under Custom States ("sign-up's User Type"). I'm capturing the rest of Hana's details when they are directed to the company page.

Now we're going to create a new thing. And at the moment, we're just dealing with a company signing up, but we will be adjusting this logic and these workflows to dynamically know if a user is a candidate or a company, and we'll route them in different directions. But for now, just know that we're just going to start with a company.

We're going to click "Create a new thing..." after the "Sign the user up" step. We're going to create a company because I want to do the association between a user and a company and a company's employees at this stage. And we know what the company name is because it will be written in the input. So the type is Company and the Name field will equal "Input Company name's value."

(And I apologize if the naming of your input is slightly different. I think I may have updated the naming between lessons. I have "Input Company name," "Input Email," and I have "Input Password.")

So we've got the company name. Now we're going to set another field, and that's going to be "Employees." Now, check this out. This is a bit different because employees can't equal Current User because Employees is a list! So Bubble gives us these options here: add, remove, set list, add list, etc. And we'll go through all of these and actually use most of them in this course. But for now, we're just adding, and we'll add the Current User, so it will look like "Employees add Current User".

Okay, so with that out the way, remember that we also associated a company with a user on the User data type. So let's do that. So now we're going to click to add another action and go to "Data (Things)" and "Make changes to thing..." The thing we're making changes to is the Current User. And you might ask yourself, well, we've already got the Current User here, why not just add the company here? And the reason being is that the company doesn't exist. The company doesn't exist, so we're creating the company in step 2, and then in step 3, we're then saving it to the Current User. So here's the company and that it equals the result of step 2. Can't equal "Current Company" because there's no such thing, but Bubble does give us this "Result of step x" expression, which means at step 2, something's been created, and I'm going to now make that available to you to use in subsequent workflows. Don't be scared of this expression, all right? We'll be using this all over, the result.

The next thing I want to do is this: add a new action and head to "Data (Things)" and then click "Set a thing's slug." Now, I know you have a picture of a big juicy yellow slug in your mind. I apologize for that. But a slug basically allows us to create really SEO-friendly, neat, tidy, and relevant URL structures. So instead of having some random numbers to associate page data with a company, we're going to set things' slug, which means in the URL bar, we can now say the word "orbit" instead of just some random ID. It's much, much neater. So it'll be the URL on the company page, it'll be /company/orbit, and then our parameters, ?v=settings. That's all the slug does.

Bubble's saying, which thing are we changing? Well, a slug needs to be associated with the company, so it's the result step 2. And then the slug is we're pulling from the input because it's the company name. And slugs have to be unique, can't have the same slug, and in the instance where someone else signs up with the same company name, hey, this happens, then Bubble will just increment it with a 1. So it'll be orbit will be the first one. The next one will be orbit-1, orbit-2, and so on.

It's at this stage, guys, that we can route the user to the Company Dashboard using a "Go to page" action. Okay, so destination is "company." And look at this: we're not only taking them to the Company Dashboard, we are also sending the parameters so that they land at the Settings page where we want them to land instead of an empty Overview section. So now we are sending more parameters to the page, with the key being "v" and it equaling "settings," all lowercase, remember?

Okay, I'm pretty happy with that. One more check through. So sign the user up, they will get an email, but we're not actually going to use a real email for Hana. User Type is being saved. Then we're creating the Company, adding Hana as an employee. Then we're making changes to Hana, adding the company to her User record. Then we are setting the slug for the Company, and then we're taking Hana to the Company page with the parameter v=settings.

Let's go ahead and preview the page and run this workflow! Now, please make sure that you sign out as your admin account. I think that was on the scratchpad page, so maybe we should go there first. And yes, I am logged out, so I'm just going to hit this button that will then take me to the login page, and I'm just following my internal navigation to the sign-up page. Perfect, guys. So let's sign up Hana! I'm a company, yes. Company name is "Orbit." The email, just say [email protected]. Any password you'd like. Agree to the terms and conditions, and let's sign up, folks. So what we're expecting to happen, remember, the data to be created, we're going to go to the Company page and v=settings will be set, and as such, we will see our form for our personal details. Go ahead. There we go, that worked like a charm, and we're currently at the settings.

Hana knows at this stage that she probably needs to fill out this form. So let's do it! We've got a placeholder image here. But let's go ahead. Hana Li. Type anything you'd like here in the About section. So I've typed, "I love helping early stage founders become better entrepreneurs." Okay, location, let's choose San Francisco. Now for the image, this is pretty cool. So the first thing I want you to do is upload an image that you don't want to use. So I'll do the same. So I've uploaded a picture of Raymond, and clearly that is not me, I've done that by a mistake. So that state has been set. Now I'm going to reset the state by clicking "Delete." Okay, now you can upload Hana's real image. And now when we click the Save button, we'll be saving that state. Let's go ahead. Successfully saved, nice and bold.

Let's go check out the database by going to the Data tab --> App data. Okay, let's inspect Hana's user record here. So there's the About, there's her avatar, Company is currently referencing the unique id. That's okay. Let's click "Change search fields", the tiny text beneath the Company's unique id. And for Company, instead of a unique id, this is just a view to help us in the database, lets change this to the Name of the company. And then Save. Here we can see the association between Hana and Orbit. She's from San Francisco, and she has a User Type of "Company." We can see the created date, modified date, and the unique id of Hana's User record.

Okay, guys, let's now jump over to the Company. Here is Orbit. And that's all we collected because we haven't created the next form, but we can see that Hana is now associated. And we can, when you have more users in the database, you can simply type in part of the email address and Bubble will return a user and you can add them, and you can also delete them out of your database as well. And earlier on in the user record where we saw a unique id, this is what the unique id was. You can also type in or paste a unique id when you're searching for stuff. You can search by anything here, though.

All right, folks. So that was a success! Really, really happy with that. And it's a good time to stop because when we get back, we're going to copy and paste the form for the personal details and then make the company details, sort out the workflows, which are partly done for us already, and then we're done with the section. I'll see you in the next lesson.