Section 8 (Lesson 2/10): In this short lesson, we’ll clone the candidate dashboard and then refactor the existing designs for the admin dashboard.

We’ll adapt some menu items and update the relevant workflows so that we can navigate the internal views correctly.

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

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

And diving straight in, I'd like you to go to the Design tab and navigate to the candidate dashboard page. Once you're there, we're going to choose "Edit" and "Clone this Page". We're going to change this page name to "admin", and then Create!

Now, many applications have an admin page - pretty much most of them - and some people prefer to make their admin page names a little bit more obscure, such as admin-052b, something like that. The page is only accessible by you, so if you did want to do that, you can do that. We do, however, have redirects and privacy rules in place, where we will have on this page to fully protect it. But I thought I'd just mention that in case you wanted to add potentially a bit more obfuscation to your application.

Okay, page admin. We're going to sort out this left-hand navigation bar first. So FloatingGroup menu. Let's bring up a Property Editor by clicking on FloatingGroup menu. Let's change the background color to our brand color this time. Then let's do the same for the background of "Account," "Applications," and "Settings".

The navigation links we need are "Overview," "Users," "Jobs," "Applications," and "Settings". So we already have some of these, so let's just copy and paste two more. I'm going to use my keyboard shortcut, Command+C, Command+V, and one more time.

So the top one is going to be called "Group Navlink (Overview)". On the Conditional tab, I'm going to change "Get v from page URL is account" to "Get v from page URL is overview," and in terms of the background color once we have clicked and selected one of these navlinks, let's first of all choose our background color, and I'm going to make this a little bit lighter. I'm just going to drag it slightly to the left. I'm not going to make it a style because this is the only place in the application that I do this, and then I'm just going to copy this. Okay, so this becomes "Overview" instead of "Account" and the home icon works perfectly!

Next, we're going to have Users. So let's just go left to right, and then we'll rename the Group. So if I type in "group" in the Material Icons, I get to see my users and I'm after an outline icon here so I'm going to choose this one here. And I'm going to change the word "Applications" to "Users". Then I'm going to change the name of Group Navlink (Applications) and to Group Navlink (Users). And then finally on the Conditional tab, change "applications" to "users," and then I'm going to paste in the color that I copied to clipboard earlier on for the background color.

Okay, so "Settings" we need. So I'm going to bring this one up. On the Layout tab, I'm going to choose Previous and Previous. Let's go left to right. So here we need "Jobs". So for that, I think the briefcase icon would be useful. I'm going to type in "work" in the Material Icon search, find a briefcase. There it is there. So say "Jobs". And then for the Group name, let's call it Group Navlink (Jobs). (Just remove the "copy".) On the Conditional tab, change "account" to "jobs," and lastly, paste in the conditional color.

I'm going to click on Group Navlink (Settings) and just push that down in the Layout tab by choosing "Next". And then I'm going to go back. So after Jobs, we need Applications. So for this, I'm going to find an article icon. Choose the outline. Change the text to "Applications", and on the Group itself, change the title from Group Navlink (Account) to Group Navlink (Applications). On the Conditional tab, change "account" to "applications," all lowercase. And lastly, our conditional background color, I'm going to paste that in there.

Let's just fix up the workflows next! So on the Appearance tab of Group Navlink (Overview), click "Edit workflow". Step 1 needs to have v = overview. And I'm going to remain within the Workflow tab and just go through each one.

Find the "Group Navlink (Settings) is clicked" event and then just delete the Set states Avatar step (step 1); we don't need this for the admin section because we can just manipulate the database directly. But we do want the "Go to page admin" workflow step.

Okay, I'm going to find the "Group Navlink (Users) is clicked" event. This will have a step "Go to page admin" where v = users.

All right, after that, I'm going to find Group Navlink (Jobs) back in the Design tab, amd I'm going to click "Add workflow" in the Property Editor. For the first step, Navigation --> Go to page. I'm going to go to the same page (admin). I'm going to send more parameters to the page. The key is "v", and the value is "jobs".

Let's have a look at the demo app to see what we need for Users. With the Users section, we have an Avatar, we have a User Type, that's important, Name, Email address, signup date, and then an icon to view more. We also have this dropdown that says "Select user type," and that points to our Option Set.

Let's see what else we have here. If I open up the Jobs section and then go find the table (Group Table), we have the company logo, and this is very familiar, looks very similar to what we have on the company page, and then we also have our dropdown!

And then on the Overview section which we'll tackle next, it looks very similar to what we did on the company page as well, so we're going to copy and paste that across.

Okay, yeah, good place to stop and when we get back, we're going to work on this Overview section. We'll be uploading a CSV file with some transactional data, the data type we have yet to set up, and then we can start expanding on what's possible with charts. I'll see you in the next lesson.