Section 5 (Lesson 8/8): We’ll finish off this section with a short lesson on improving the user experience. Specifically, we’ll show the user a ‘no data’ component whenever a search returns no results.

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

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

Okay, final lesson, just tying up a few things. The major piece will be that we need to display a notice to a user when no results are found. Okay, and we've already done this on the Company for Hana (when she searched for a job and no results came up, then we showed just a little design group saying that no jobs were found). Let's do the same for the search page.

So open up the search page, please, and it's beneath this Repeating Group (and it will be hidden by default), where we're going to add a Group to show no data has been found or no results have been found. So we've done some of this work already. Why don't we head over to the company page and go find a piece of design work that we did? I'm going to open up Group Container, Group Jobs, and here we go: "Group No data". You can also search for "Group No data" from this dropdown. Let's click "Edit" and "Convert to a reusable element". Let's call this "No data." Another word for this is a null state, which you might hear other people refer to.

Okay, here we go. Nothing else we need to do here. Let's head back to the search page, and we have to drop it inside Group Content, okay? I'm going to scroll down to my reusable elements, find Group No data and just get it inside between the "12 results" and the Repeating Group. I'm then going to click "Make last."

Let's see what this says: "No jobs found for this search query." I think that's absolutely fine, I think that makes sense. Now, there's nothing dynamic in this reusable element, so we don't even need to detach it. Just leave it where it is. But we do need to say that on the Layout tab, it's not visible on page load, it is collapsed when hidden, but when do we bring it back? Well, when the Repeating Group's list of Jobs' count is smaller than one (or equal to 0, up to you). On the Conditional tab, When "RepeatingGroup Job's List of Jobs:count < 1," that's when we bring it back. I'm going to name this "No data job," and let's test this out.

We have some issues in the Issue Checker here. What are they? Ah, there was a conditional statement which has been copied into the reusable element., just remove that, we don't need it. It's not relevant, it's only relevant for the company page.

Okay, let's make sure this works. I'm going to refresh the page. I'm going to go back to Browse jobs for the search page. So we need to fix that as well. Okay, I'm going to just use my URL to find the search page. Okay, so we can just type in something arbitrary here, let's type "Figma". I can use my return key to search. No jobs found for this query.

One thing I've noticed is my Reset button is not visible. I think I might have overwritten - I did. Okay, so in one of the previous lessons, when we were in the Responsive tab and we were copying and pasting the min width 100% conditional to all of these buttons, what you need to know is if you use "Copy conditional expressions" and "Paste conditional expressions," it actually overwrites existing conditional expressions, unfortunately. So we have to rectify this now. But we do need this one as well, so we'll leave the one where it is.

Let's define another condition on Button Reset. This one says When "Input Search's value is not empty or Dropdown Term's value is not empty or Dropdown Location's value is not empty". If any of those three conditions is true, then we'll show it, and it's not visible on page load.

Okay, so that was a nice little lesson. I'm glad that mistake happened to me. I'm going to leave this in just because you can see that even I can make mistakes at times. Basic mistake to make. But if you're copying conditional expressions, be careful about overwriting existing conditional expressions!

Okay, that solves that problem. What I'd like to do now is for you to jump into the navigation bar, please. Let's edit the element. And on Link Browse jobs, I like the word "Browse jobs," but you could also say just search here, but let's do point it to the search page as the destination page on the Property Editor.

Okay, these aren't going to work; we don't have time to build up blogs and an About Us section. On the login, now Log in is currently a button and so is Sign up. Let's change these both to Links - it just helps Google to be able to navigate your app.

So I'm going to right-click on Button Log in and say, "Replace the element type." I'm going to choose a Link and replace. This is going to go to the login page, and the style is going to be a Secondary Button Link. Then on the Layout tab, for me, everything is as it should be: 44 px min height, "Fit width to content" is checked, we can use a fixed height here of 44 px.

Okay, let's do the same for Button Sign up over here. I'm going to right-click and replace the element type. I'm going to choose a Link element again. Replace. This will go to the sign-up page. And the style we're going to use is a Primary Button Link and it looks like it has ingested the rest of the settings. I'm going to use a fixed height of 44 px.

So we have lost some of the design here, I'm just going to have a quick look. So Secondary Button Link, let me edit the style here. Secondary Button Link. Please do the same. On the border style, please add a solid border and that needs to be a border color with a roundness of 8 px. And there we go, that solves that problem.

There is more work to be done in the navbar, such as when someone is logged in, we would hide this group and then show a user's avatar. Actually, we can just quickly do that now, but then we also need a little navigation, a little Group Focus, when we click on our avatar and then it drops down a little menu. That's called a Group Focus Menu. We're not going to create that in this section, we're going to create it in the next section, but we can start this process by just adding another group here called Group User, and then looking at the conditionality.

I'm going to take Group Buttons, and I'm going to copy and paste. This adds "Group Buttons copy" to the right-hand side, but we're going to rename this to "Group User." And let's first of all look at the Conditional tab. Now, when do we want to show the Group User? But we need to think about this smartly now because there are two conditions that we should see this group, which will contain the group avatar. Obviously, the person needs to be logged in. Otherwise, we're not going to show an avatar, there is no avatar. And the second one is we only want to see this group above 991, so 992 and above.

So what we'll do is there's an existing condition that says When "Current page width < Tablet (992 px)," we're going to just click on the operator and change it to the greater than or equal to sign because smaller than 992 px equals 991 px, so we need to include 992 px. Then we need to click on the more icon and choose "and" because two conditions need to be met in order to show this. So the page has to be wider than 991 px, and "Current user is logged in," that's when it's visible, so now check that box because it's unchecked.

Let's say by default, Group User is not visible on page load. So it's the opposite of Group Buttons. It's a complete opposite of this group. This group, we will leave visible on page load and we'll use a condition to hide it. Group User, which is now hidden, and I can get to it from my Elements Tree, Group User is hidden by default, but we will see it above 992 px on condition that the User is also logged in.

Okay, now grab an Image element, please, and get that image inside this Group User. This dynamic image is going to be the "Current User's Avatar." I'm going to rename this to "Image Avatar". Click "Zoom" for run-mode rendering just in case it's an odd-shaped image, I want it to zoom to fit the dimensions that I'm about to set. ALT tag - we don't actually need an ALT tag because this only exists when a user is logged in. Google cannot log into your app. Google can only see public-facing data.

But a Canvas placeholder, go ahead and upload one of the user avatars, either your own image or Hana. I've chosen to upload Hana's image. It's just a placeholder. And now on the roundness, I'm going to choose 20 px, and on the Layout tab, I'm going to say the width of this is 40 px and "Keep element aspect ratio fixed" one to one, so it's a perfect circle. When you've done that, you can actually go ahead and delete both of these links by holding shift, and I'm going to press the backspace on my keyboard.

Okay, good stuff! We'll test this out in the next lesson in the next section, but we'll also have some functionality where a User can click on the avatar to then bring up a Group Focus Menu, and then they can navigate through the app like they should as a User, because at the moment we're busy typing in the URL and we're previewing pages. But we'll build out this navbar over time because there are a few more things we need to configure.

That is this section done! We've done all the job related stuff: we've uploaded CSVs, we've looked at responsive design, it's been one of my favorite sections, I just love seeing that beautiful list of jobs. So we'll take a break here, and in the next section, we're going to sign up as a candidate! So, a new type of User will sign up, we'll need to that signup flow to make sure we understand if a user clicks on "I'm a candidate," slightly different workflow, slightly different data, slightly different dashboard. I hope you enjoyed this section, and I'll see you in the next one.