Section 3 (Lesson 8/8): In this lesson, we’re going to focus on the company details form. We’ll build our workflows and logic to save the form data to the database and display the saved data back to a user via custom states.

What you'll learn:

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

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

So in the previous lesson, we set things' slug and we talked about what a slug is. In this lesson we're going to use the slug because I'm going to introduce you to a new concept called Page Data. Similar to a Current User, which is a nice short expression where we can grab a user's first name, last name, email address, etc., with Page Data, we also have a shortcut to our data. So I could say, "Current Company's logo," "Current Company's name," it makes it really useful, so it's a way to associate a page with a thing in the database.

So bring up your Property Editor on the company page and then change the type of content to "Company." When that happens, we can see that we have five issues now. Let's bring up the Issue Checker and we can see all of the issues pertain to "Go to page," and that's because we've now set page data and we always need to tell Bubble what data from the database we should be bringing down to this page. Very simple.

So if I click on the first issue, we can see this is a Group Navlink that needs updating and if I click on step one, Bubble's now saying "okay, you've set page data, so what data do you want us to send down to the page?" and it's basically going to be "Current page's Company." So we now have the Current User and the Current page's Company to write our expressions. Far, far simpler. So let's do it for all of these Navlinks, okay, so candidates, you can do it in any order just go through each one and select "Current page's Company" for "Data to send." Jobs, Current page's Company; Overview, Current page's Company; Settings, Current page's Company. Perfect.

Looks like we have one more, and this issue is actually on the sign-up page, aha! Because we are sending Hana after signing up, we send her to the company page, the company is expecting page data, and we can send page data because we created the company in step two of the sign up flow. So I'm going to click on this issue, and Bubble then takes me straight to the problem. Fantastic, and it's on step 5 on the workflow "Button Sign up is clicked" on the sign-up page. Where is the company data we need to send to the company page? Here it is here, the result of step two, and all of our issues have been fixed!

Let's go ahead now and create our company form. So I'm going to open up my Elements Tree and reveal Group setting. So I'm going to copy and paste this. For this time, I'm just going to use the option at the top, copy, paste. Here we are down here, going to double-click and just remove the "copy" from the Group's name, but with this Group Form highlighted, I'm also going to highlight the group above it because I need them in a row distribution, a row layout. So I'm going to right-click and "Group elements in" --> a "Row container." Fantastic. Now we can name this to "Group Forms" and on the Layout tab, I'm looking for 32 pixels of column gap.

You can see we have this extra space here now. So what we're going to do is let Bubble's responsive engine decide how wide or how narrow these form should be instead of having a max width. So I've highlighted both of the forms, I'm in the Layout tab, and I'm just going to actually remove the max width and watch Bubble then decide how the space needs to be evenly distributed.

Okay, so let's just change some details on the right-hand form. So this needs to say "Company details" instead of "Personal details." Subtitle, so "Complete these questions to start posting jobs to our pool of talent" should instead be "Complete your company information to start posting jobs to our pool of talent." Just keeping it nice and consistent. It would be strange if we had a title and subtitle on the left-hand side and then not on the right-hand side.

Okay, so we don't need a last name, so what I'm going to do is I'm going to remove some groups here. So I'm going to click on Group Inputs, I'm going to right-click, I'm going to say "Ungroup these elements." I'm going to grab the First Name, so the Group Label & input, drag it outside of this group so it's its own row, and once you've done that, you can delete the Last Name. Now, the Last Name is nested currently, there's a group behind it, so I'm going to right-click and "Select first parent" to get behind it first of all and then I'm going to scroll down to the bottom of the Property Editor of this Group Inputs and select "Delete."

So this needs to say instead of "First name," just "Company name." And let's change the the label here of the input to be "Input Name" instead of "Input Name first" - remember, we need to be able to identify this in the workflow area. Now the initial content, because we have page data set, we can change this expression to the "Current page's Company's Name." Lovely stuff. That will resolve to blue.

Okay, so in the "About," let's just change "About" to "Description" - no real reason, just making a distinguishing design choice here. And then "Input About" let's change to "Input Description," and initial content we're going to update to "Current page's Company's Description," and then on the Location, in parenthesis, we can add "Company" to the display name. Okay, so "Upload image" becomes "Upload logo," and this (the dynamic image) is going to be another state here, guys. So company's Avatar exists, so let's click the dropdown, bring up the page element, and let's go find the original state. Click on the "i" icon now at the top of the Property Editor and here we have a custom state. So we're going to create a new custom state, and we're just doing this a slightly different way just so you can see all of the options available to us. We're going to say "Logo" and the state type is "image," and then create.

Then click back onto this PictureUploader Avatar, change the name to "PictureUploader Logo," and now we can reference the dynamic image is going to be the state we've just created and that is the "company's Logo." So I hope that you're beginning to become familiar with states. If not, you've still got many, many hours to get through and by the end of it, you'll probably be tired of states, it'll be second nature.

When we click on Button Delete, we're going to go to Element Actions --> Set state, and we're going to reset the state called Logo at at the company page level. Leave that Value input empty.

Okay, so let's sort out the workflows, then we'll update the data, and then we're good to go. So on the Save button, which I'm now going to update to be called "Button Save (Company)," just because we have another save button, both called "Button Save." Add a workflow, and let's update the data, so "Make changes to thing...", remember, the company already exists, and the company is called Orbit, so we're not creating something, we're making changes to a thing that exists. Current page's company is where we can find it, and let's add all fields. We'll first of all remove "Employees" because we did that in step one. Let's go top to bottom. So "Input Description's value," for Description, the Location is the "Dropdown Location (Company)'s value," Logo is the state, remember, the state that's set at the company, so the company Element which is the page, there is the logo ("company's Logo"). And the Name, here it is here ("Input Name's value"), but it actually needs to be named a bit more clearly.

Anyway, okay so that takes care of that let's show the message that it's been successfully saved, the same message is absolutely fine, and now for this picture uploader guys, so let's run this from the workflow area. So "Click here to add an event...", that event is "An input's value is changed," okay, now we have to select the correct picture uploader. This time it's the logo (PictureUploader Logo). Just jumping around here a little bit so I apologize. We're going to go to "Element Actions" --> "Set state," we've created the state so let's just hook it up. State is at the company level, it's the Logo state we created earlier, and it's "This PictureUploader's value." Bubble knows because we're listening out for an event based on the PictureUploader's Logo. But we are going to reset inputs as well.

Now there is another thing we need to do. Remember, on this settings workflow (called "Group Navlink's (Settings) is clicked", remember we set a state of an avatar? So we have to do the same basically for the logo, and we actually can set multiple states on single steps. So click "Set another state" on that workflow's step, but this one is called "Logo," and once it's saved to the database, it will become the "Current page's Company's Logo," which is what you can add next to Value on the action.

Okay almost good to go. Let's just have another quick look around. Ah, this is what we need to update as well: so the default value on the Dropdown Location (Company) needs to be "Current page's Company's Location." And it's at this stage we can also set dynamic values here in the Image Logo next to the company name in the left corner. So I'm going to remove this dynamic image, I'm going to insert dynamic data, and I'm going to say "Current page's Company's Logo," and instead of "Rescale" for Run-mode rendering, because I don't know what shape they're uploading, I'm going to choose "Zoom."

Okay, and the other thing we can also do is this user's image here on the right-hand side can also become dynamic, okay? So this is the Current User's Avatar, and we're also going to Zoom to cut or to push the image into that shape that we would like to cut, which is a circle. But actually, is it a circle right now? I don't think it is, so it's currently 40 pixels so we need at least 20 on the roundness here for that to be a circle.

Okay, so I'm just going to check out the database, so All Companies (you don't need to do this), yeah so Orbit is a slug, so let's head over to the frontend and refresh the page. Okay, and I'm the Current User. I'm Hana, I'm logged in, and therefore the Current User's Avatar is showing. This company image on the left-hand side isn't showing, which makes me believe that if I reveal the URL bar, I can see that we have /company?v=settings. Check this out, after the company, and I'd like you to do the same, go "/orbit?v=settings." Ah, sorry, we haven't actually uploaded the image. So make sure that Orbit is up there, because we need page data, and naturally when Bubble asks or asked us on the sign-up page to basically send data to this page, we went back, remember, and we did that as the result of step two. So that has to exist in order to reference the Current page's Company.

So under the Description, I'm going to say "We're a productivity company helping users solve problems faster." Okay, and location could be anywhere. Why don't we say this location is in New York, and Hana works remotely and she's based in San Francisco.

Because we've reset the page as well guys, we've obviously we've lost this user image here. Naturally users won't just be refreshing pages, so that's not a huge problem, but for now I'm just going to upload the Orbit logo in the resources folder. There it is there, and if I hit "Save," you can see that now Orbit exists up here, and if I actually click on the settings again, the state will be reset, okay so that's fine. We could also set the state naturally on a page load, that's up to you, I decided to set it on the click of that Group Navlink (Settings).

Okay guys, this is looking really, really good. I'm pretty happy with this. Well done for coming this far, I think you've learned a lot in this section. A lot of new concepts! I think you're doing really well. Keep going, and I'll see you in the the next lesson.