Section 5 (Lesson 7/8): In this lesson, we’ll build our job display page. This page will contain and reference page data, plus contain our SEO-friendly slug to make sure that the page is optimized for search engines.

You’ll also learn about:

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

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

Okay, let's dive straight in. So to demonstrate what we're building, I'm going to scroll down to this Product Developer job by Bubble in the demo app, just because this is one of the jobs where I have a job description in the database. So if I click the link, we can see that we now go to a job page, and that has a slug "bubble-product-developer." Great for SEO. We have Bubble, the company name, we have the position, and we know that it's a job.

Okay, so fairly simple design, but we will be using page data, and the clue for page data is the fact that we're using a slug to reference this particular job. So header section at the top. Similar card design, which we'll just copy paste from the search page and repurpose, and then we just have a little text element here that will grow as much as it needs to to display the text within.

Let's get started. So let's add a new page, please, and call it "job". Let's double-click on the page, add a page title - now, actually, before we add a page title, I want you to scroll down and the choose type of content as "Job," because everything on this particular page load is being pulled from a single row in the database. And then that gives us access to all of that information. So now we can make this title dynamic. We can say "Current page Job's Title" and then I'm going to type a space and add "| Workplace". Just a personal preference with how I set up.

Over on the Layout tab, I'm going to select a column layout. I'm going to use 1400 px for the default builder width, and I'm going to leave the page height as is. Of course, the first thing we need to do is add the navigation bar and the footer. So scrolling down to reusable elements, Navbar, click once, click again. And I'm just going to... yeah, everything here is fine. We'll add the footer last.

Okay, so remember from the previous parts of the section with the search page, we always need to add a Group Section first. So I'm going to go find a group in the container section, drop it on the page. Group A, change this to "Group Section." No min width, no min height, and I am going to remove the checkmark for "Fit height to content." Then I'm going to use top margin of 80 px and I'm going to change this style to a Section. There you go! So very useful that we created a Style in one of the previous lessons for this, and all of the conditionals are baked in to change the padding below 992 px.

Okay, we need another group. Drop that inside the Group Section. This is called Group Container. Over on the Layout tab, let's make the max width 992 px. Sometimes with jobs, or this kind of data, it's better to have it slightly narrower. Just a creative choice, but it would look strange if there was... because it's quite text-heavy, it wouldn't look great if there was a lot of text all the way across the page, especially like Body Medium text. You want that more centered. So let's try 992 px first. Going to remove the min width, I'm going to remove the min height, and I'm going to uncheck "Fit height to content." Lastly, I'm going to horizontally align this group in the center.

Okay, so now we need our Title! So let's look for a text element. There is there, and we're going to insert dynamic data, and we're going to say "Current page Job's Title." We have page data. Let's add a canvas placeholder. Let's say it's "Senior Engineer." I'm going to change the style. This will be a h1, but I'm going to change it to a h3 because that's the visual style I would like. But this will be indexed by Google. It's a public-facing page and it needs a h1. You always have one h1 per page.

Let's add a little bit more to this Job title. Let's also type, comma, space, and then insert dynamic data, Current page Job's Company's Name, so we can dive into the Company data type and extract the name. So it will read "Senior Engineer, Bubble". (It's actually going to read Product Developer, but that's fine. We're just doing some design work.)

Now we need a bit of information about the company. So I'm going to click on the text element and I'm going to drop that in. I'm just going to type the word "About." So let's jump into the Data tab, please. Click on Company, and here we have Description. So the description we're looking to add for Bubble, if we click on App data, All Companies, and then open up, find Bubble, open that up, we don't have a description just yet. And that's because our Company user Hana is actually from a company called Orbit. Now we're dealing with Bubble, and I wanted to deal with Bubble just because it's fun and more relevant.

So in terms of the Description, feel free to dive into the demo app. You can find it if you go to the job page on the demo app and then type "/bubble-product-developer". Another way to find it is through the search page, and if you're asked for username or password, username is "username" and the password is "password". In order to send data to the page, you can also just open up the search page, look for "Product Developer," click on "Product Developer," and it'll take you to this page. So this is the data I want you to copy (directly under the job title and company name). We could have also typed it out, I guess. Let's go back to our Editor, and now I'm going to paste this into the Description field for the Bubble Company record. Then save, and got it.

Okay, that means on the Design tab, we can now pull through the Current page's Job's Company's Description, because we're currently in the Job data type. I'm not going to add a placeholder because it's too long. Body Medium is fine for this. On the Layout tab, remove both min widths and then the min height.

Okay, so let's group these two together. Right-click, "Group elements in" --> a "Column container". I'm going to call this "Group Header," and on the Appearance tab, I want to add a color, so we're going to choose flat color and surface, consistent with what we've done elsewhere in this app. Let's add a border style of solid. Choose the border color, and let's choose a roundness of 12 px. Let's now add some padding to this as well. Let's add 20 px all the way around and have a quick look. Yeah, I like that. Obviously, we need a bit of gap spacing in this Group Header, so I'm going to do that now. Let's add 12 px.

Okay, just like our search page, I don't actually want all of this text to span edge to edge. So I'm going to highlight both. Right-click, "Group elements in" --> a "Column container". Again, this is going to be called "Group Title & subtitle," and it's within here that I'm going to add back this 16 px of row gap. We're doing this so that we can add a max width, so the current max width is 992 px. Let's try 768 px, and that will just read slightly nicer.

Okay, so we have our Group Container, so we need the card on the left and the text on the right. So let's go back to our search page. Going to click on Group Sponsored and I'm going to click on the Edit button on the top menu and click "Convert to a reusable element." We're going to say "Job card" for the Element name. I'm aware that the repeating group also has a Job card, but that's okay, that won't be a reusable element. And this Job Card, if we click on the Appearance tab, make sure the type of content is set to "Job."

Okay, now that you've done that, head back to the job page and let's go find it in the Reusable Elements section, Job card, and there we go. So, we are going to detach this basically because it's not a sponsored job, I'm just after the design work I've done here. So I'm going to right-click and "Detach reusable element," which means I can now just delete this Text Sponsored job and let's change the design slightly.

So this Link Apply is currently a link, why don't we switch this out for a button? So right-click and click "Replace the element type," and let's go find a Button and replace. Now let's choose our Primary Button because it's a primary action it's the one thing we do want people to click. Good stuff. Okay, back on Group Container, we need to sort out the gap spacing. Let's try 48 px.

Now for the text on the right-hand side and to achieve that, of course, we're going to have to set up a row container. So I'm going to grab a text element, first of all, and just drop it on the page for now. Let's just get the dynamic data sorted in the Appearance tab, so it will be the "Current page's Job's Description" - mega easy. Then on the Layout tab, going to remove the min width and remove the min height. Now, you don't currently have a Job description, I will allow you to copy that from my app shortly, but let's first highlight this text for the description and the Job Card, then right-click and "Group elements in" --> a "Row container." We'll call this "Group Content" and on the Layout tab, I want you to add 48 pixels of column gap and 24 pixels of row gap because this text will drop beneath this Job card. Both will span 100% edge to edge.

The thing about text elements is that it is just that - it's just a text element that can receive text. Now, that text is going to be dynamic in our instance. It's going to be quite long, and the text element will just grow to accommodate the amount of text being pulled through from the database. But of course, we have control over how much we want this text element to grow if we want it to grow at all. But with our current setting, it will grow as much as it needs to to accommodate the text.

Okay, so you can jump into my demo app, into the Editor of the demo app, which I've done now, and head over to the Data tab. Now, you can't add or you can't do anything to this app because I have a setting, and that setting says "Everyone can view," but no one can edit, etc. I've also disabled all the buttons, okay, so please don't try to create data because you won't be able to!

I want you to look for "Bubble" under All Jobs and the Product Developer. Click on the pencil icon. And now, I'm just going to type command+A on my Mac, and then command+C to copy. You can also just drag down with your mouse to copy everything. Then I'm going to head back to my Editor. I'm going to jump back into my Data of my own app, find Jobs, find the Bubble job that says Product Developer, this is important, then paste it in. Click Save. And there we go!

If you don't want these cells to be so tall because we're viewing descriptions, what we can do is actually click on the pencil icon in this left-hand side, we can create another view. I can say I'm going to uncheck the description, but I'm going to check the title because that's more important to me. Now, if I click Save, we've got a sub-view, and we can delete this view if we want, all we're doing is deleting the view, not the actual data type. But this is much better and much more easy to read. Now, I can also take this column and bring it across to the left. So now this is better. Product Developer at Bubble.

Okay, now we need to go back to our search page because I'd like you to click on the Product Developer link and now we're going to choose the job page as a destination, and now we need a data source because we have page data set, type of content is a Job on the job page, so we're going to send the Parent group's Job. And let's make sure that the parent group has the data feeding through correctly, so I'm going to "Select first parent" to get to the Group Text, and I can see Job as its type of content and "Parent group's Job" as its data source, so the data is feeding through correctly.

What we'll do on this Link Apply is do the same thing: we're pulling through a single job at random, where Sponsored = yes. I'm going to click on Link Apply and I'm going to say that the destination page is the job page, and the data source is the "Parent group's Job." We can choose to open this in a new tab, or we can just navigate in the current tab, which I'm going to just decide to do for this.

Okay, let's try this out! So head to your search page. (That would also be Browse Jobs. This could say search, but I like to have the word "jobs" in here.) Now you need to find the Product Developer link, which I've done. Let's click it, let's see what happens.

So if we look at the URL, we have "/job" and "/product-developer". We've got that in the slug. That's perfect! This is dynamic: "Product Developer, Bubble," this Company description is also dynamic, and the Job description is all dynamic. Can you see how the text element grows to accommodate the text? Obviously, we need the Footer down here, and we've got a data problem here with the Job card. Let's go back to the Editor.

So, the data source in Job card just needs to be the "Current page's Job," that will resolve all of the issues there. And we need our Footer, so scroll down to the reusable elements section, grab your Footer, drop it in. This has been dropped into a group by mistake so I'm going to reposition this above Group Section first in the Elements Tree, and then, on the Layout tab, click "Make last." Just a small quirk we have to work through there.

I can see that this Group Section is having a few problems. So first of all, on Group Container, in the Elements Tree, go find your Group Container and then check "Fit height to content". Then after that, go to the Group Section and choose "Fit height to content," and the spacing problems have now been resolved.

Okay, let's sort out the responsive design! So, we can double-click on this Job card and let's have a look. We copied across from the reusable element a condition which says, when "Current page width < 992," the min width is 100%. Let's do the same for this text element that contains the job description. I'm just going to right-click, "Copy special," "Copy conditional expressions." On the text element, right-click, "Paste special," "Paste conditional expressions."

Let's see what it looks like in the responsive tab. There's 992 px, still looking fine. And then 768 px, we now have the Button Apply at the top, which I think is great because it's not too tall, and then the longer description at the bottom. And then 375 px, looking good. I also want to add a condition on this text up here. So double-click on "Senior Engineer, Bubble," this is a h3, so let's edit the style and apply a condition which says When "Page width < Tablet (992 px)" to remain consistent with our other conditions, then the font size is going to go from 48 px, it's going to incrementally take it down to 40 px. Slightly smaller change this time because the text is becoming smaller naturally.

Head over to the Responsive tab, and look at that. Very, very nice. And obviously, because we're using our Section style, we can see that this Conditional on Group Section is greyed out, but we know that that style has an associated condition, and that works automatically for us. Let's refresh the page again, and there we go. There is our job!

Okay, if you currently have a problem in the navbar, you might be fine, but I can see that this line stops. It's because the groups inside are overflowing. So I'm just going to fix that, I'll let you watch me fix it, but I suspect you might not have this problem.

I'm going to find my navbar (I can also get to my navbar through this section here), and it's these three groups. I'm just going to bring up my Property Editor, I'm going to highlight all three groups (Group Brand, Group Links, and Group Buttons). On the Layout tab, I'm just going to remove the min height here and then I'm going to vertically align them in the center. Okay, that's all I'm going to do. What was happening is that these groups are too tall for the particular height of the navbar. So back on a job, you can see that this beautiful line works perfectly. One more look in the frontend, and there we go. Absolutely perfect.

Why don't we inspect the page? So I'm going to right-click --> "Inspect." I'm on Chrome. If you're using Safari, it might be a bit different or a non-chromium browser. Yep, I love the use of the padding, smaller padding with more real estate here.

We're almost done! I'm just going to spend one more lesson just tidying up a few things around this app because it's been a slightly shorter section. Let's just come back, fix a few things, and then draw a line under this section. See you then.