Section 3 (Lesson 4/8): Now that we’ve finished the floating group menu and navbar, let’s build our first page view. This group will hold our personal and company detail forms.

In this lesson, we focus on:

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

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

When I'm building applications, I usually build them according to user flows. So we've done our authentication flows to sign users up. But now what happens next? So we need to sign Hana up, which we'll do shortly. We need to send her to the company page. Again, we'll do shortly. But then, then what? Because there is nothing to view in terms of an overview standpoint, there aren't any jobs, there are no candidates. We don't just want Hana to arrive to an empty dashboard. Naturally, we need her to fill out her settings, fill out her name, company details, her image, logos, that kind of thing. So we're going to focus now on setting up the settings view for the rest of this section, okay? Quite a lot to do here, but let's dive in.

So back on the company page, let's grab a Group. Click the Group once and just draw in a basic shape anywhere. It's going to pull to the top. Let's name this "Group Container." And I want this container to sit to the right of this FloatingGroup menu, not underneath, and also beneath this FloatingGroup nav, so to the right of FloatingGroup menu and beneath FloatingGroup Nav, okay? Just going to grab my Group Container again.

So the first thing I'm going to do, because I can't see what's going on here, I'm just going to add some flat color and make it maybe this blue color at 10%. This will just help me visualize how it's been laid out on the page.

Now head over to your Layout tab and remove the min width, remove the min height - it's going to close right down - but then uncheck fit height to content so that it spans the full height of this page. Let's move it now to the right-hand side of FloatingGroup menu. So I'm going to use some left margin here, not the padding, folks, the margin above it. Choose 260. And now it starts to the right, much like our FloatingGroup Nav. Let's drop it beneath the Nav, so let's choose 80 on the top and now it's going to fill all of the rest of the screen real estate, just where we want it!

Now, I am going to add some more padding here because we're going to drop some content inside. We don't want that content ever just sitting naturally against the bottom of this nav or against the left-hand side here or right on the floor down here, okay? So we're going to choose top of 48. This is now the padding (not margin), bottom 48, and then left, right, 32 on each. Perfect. After you've done that, we can just switch back to flat color, primary contrast. Fantastic.

So the purpose of the container is just to fill all of the other space. And we've spoken about this at length. We don't just drop elements on the page. So we need the container to contain our stuff. Next, we're going to drop in the Group Settings view.

I'm going to find another group. I'm going to draw it inside the container. I'm going to name this "Group setting". Now, I do want a max width in Group setting, and in the past when I've worked for clients, some of them have wanted their data more centered in the page and then other clients have had real data-heavy tables and charts, and they just wanted more screen real estate. So it's a creative choice, the max width you want to set, but you most probably do want a max width because I'm on quite a big monitor and it would be difficult and quite jarring for data just to fill the entire screen. You do want a max width, and that's what we're using this container for, is to allow us to center this Group setting and then allow us to set a max width on this Group setting.

So let's change the background style to flat color so we can see what we're doing, and this time we can just use our surface color. Okay, so currently it's spanning edge to edge, aside from this 32 pixels of padding, left, right, and then top padding. I do want it to fill the rest of this Group, though, so I'm going to uncheck fit height to content and I'm going to remove the min height. We don't need any minimum width here either. Perfect. But I am going to say that I want a max width here. Okay, let's try 992 and have a look. Yeah, that looks pretty good. And now it can horizontally align in the center, and if I click back on Group Container, you can see there's a bit of space here because of this max width.

And for what we're trying to build, this max width that I tried it, and I thought it looked good. I also tried 1,200 and thought, that's not necessary. Let's contain it and it's faster to navigate and see our data. Okay, so we don't need any padding because the padding is set by Group Container.

Now on the Layout tab, guys, we're going to uncheck "This element is visible on page load" because we're going to be using URL parameters to decide which group is visible at which point. So "v" needs to equal "setting" for this group to be visible. The next thing we're going to do is just below that, we have "Collapse when hidden." We're going to check that as well because if we don't check "Collapse when hidden," then that vertical space will remain, and it'll be really difficult for users to scroll down the page and find these big empty vertical space areas. So whenever something is hidden, we collapse it so that it feels like it doesn't even exist.

But now we need to instruct Bubble in the Conditional tab of Group setting that we'd like to see it when v=setting. Okay, so we're going to define another condition. We're going to say "get" and select "Get data from page URL." The parameter name is "v", and then we're going to say "is", select that in the operator and then type out "setting". Perfect. Now, I click the dropdown and let's say "This element is visible" and Bubble has checked it by default. Again, not visible on page load, but is visible when the parameter v=setting is true. Fantastic.

Now, we can just change this back to a Standard Group. I'm just going to do that again. It's better to set styles where you can.

Okay, let's grab some text and just get I'm going to get the word "Settings" in there. I'm going to click on text, I'm going to drop it inside Group Setting. I'm going to type "Settings" and I'm going to choose probably a H4 here. I'm going to edit the style of this H4 and please do the same, and just make sure that we have 36 pixels. You might have 25 or something else. Just make sure you have 36 pixels and we're going to use semi-bold, okay? And then the text color needs to be our default color, which it will be by default. Looking really good!

Let's grab some more text, drop it in. And let's just type, "Here are your personal and company details," and we can remain on Body Medium style for that. On the Layout tab, let's just remove the min width and the min height. Okay, once you've done that, highlight both of them with the shift key. Right-click --> "Group elements in" a "Column container," and let's rename this "Group Header," and let's add some gap spacing of 4 pixels. Really good.

So just make sure on Group setting itself that you have "This element is visible on page load" unchecked with "Collapse when hidden" checked. And when you confirm that, let's actually preview the page. Let's refresh. So currently v=overview if I click across the settings, let's just see what's happened here, v=settings - here's a lesson: I spelled the parameter incorrectly! I typed 'setting', where it should be 'settings'. And I'm going to leave this mistake in here for you to prove the point that these parameters need to be named correctly. Okay, let's refresh the page again. My parameter still exists in there, and then we can go, there's the settings, and I can click away, and I can click back.

And guys, that's how we do dashboard navigation using URL parameters! I hope that was really useful, and I'll see you in the next lesson!