Section 7 (Lesson 3/8): In this lesson, we’re going to be creating the candidate view by refactoring the job posts view. We’ll introduce functionality to shortlist job applications by clicking on a bookmark icon.

We’ll also learn about:

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

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

Let's spend this lesson to set up the candidate view in the company dashboard. Now, the layout and design will be very similar to what we've been building, we always want to keep a very similar design pattern, so we'll copy and paste, refactor, and then just change a few things such as the data source for the table, some of the columns, some of the wording as well. So let's make a start!

So open up your company page please, and then we can right-click on Group Container and click "Expand all children". Scrolling down. What I'm looking for is - actually, I'm going to close Group setting and then open up Group jobs. All right, let's view Group jobs.

Okay, so I'm going to choose "Edit" --> "Copy with workflows," because it might be that we want to include the search, it's not going to be a focus because we built it already, but I might include it in a bonus lesson later. But just so we do have some workflows, let's make sure to copy with workflows.

Okay, and I'm going to close Group jobs and I'm just going to click back into Group Container, and then I'm going to choose... actually, let me just hide Group jobs as well. So just make sure that you have the Group Container - actually, let me open up the Property Editor as well and I'm going to choose "Edit" --> "Paste special," "Paste with workflows".

In the Property Editor, let's change this to "Group candidates". On the Conditional tab, we're going to change from "job-posts" to "candidates". Okay, for this Text Job posts, in the Appearance tab, we can change this to "Candidates" as well.

For the subtitle, let's say, "Here are the candidates who have submitted job applications." In the Input Job filter placeholder, let's say "Search for a candidate". And let's delete this "New job" button.

Okay, clicking down on Table jobs. So, the type of content we're dealing with in this section, okay, is an Application or a job application. And we're going to search for Applications that match the Current page's Company, correct? And then any field contains the get query from page URL, that is when we search using this button. And again, we're going to ignore empty constraints because that search won't be populated at first.

Now, let's just review the different fields that we need here. I'm going to go to the demo app. So it looks like we have a candidate image, 40 px by 40 px. We have the Job title, the Name, Location, we have a Shortlist field -we're going to run a workflow to Shortlist - we have a Date field, and then we have this more_vert option here, and that is in fact going to push the candidate data into a popup. We're also going to build this little shortlist toggle feature. Okay, let's get started with our refactoring.

So we need one to the left, a column to the left-hand side. Job title will remain where it is. I'm going to right-click in the column header and choose "Add column to left". I'm going to grab an Image element, I'm going to click once and then drop it inside. This is going to be the Current row's Application's Candidate's Avatar for the dynamic image. That gives us all of the candidate data type information. Now we can choose to zoom so we can cut the shape. And let's choose a roundness of 20 px. Over on the Layout tab, we're going to choose 40 px for the width and then check "Keep element aspect ratio fixed".

Okay, so in Cell 1A, let's choose, let's see what our spacing is here, 24 px. Okay, so scroll down, let's choose padding, not margin, okay, 24 px by 24 px. And then I'm going to put this in the center, vertically aligned. Then I'm going to click back in the cell on the Layout tab, I'm going to put that in the center as well. And what I'm going to do is on Column A, clicking Column A, I'm going to set a fixed width of 88 pixels. So 88 simply means 24 either side plus the 40. I can see there's 25 on the side, that's okay. That's as much space as we need.

Why don't we upload an image placeholder here of a candidate? So let's just go find Peter's image. Just prefer this for design purposes. Okay, so "Job title: we need. Job title on the Layout tab is just going to stretch as wide as it can.

Now, let's have Name here in Column C. So instead of "Term," we have "Name". So in the Appearance tab, that is going to be the Current row's Application's Candidate's Name first. And the same thing again. So I've clicked out of the box, then I'm going to click back in, press space bar, and insert dynamic data. Current row's Application's Candidate's Name last.

And sometimes in the applications I build, I ask someone for their first name and their last name separated so when I send them transactional marketing email, I can reference them by first name. But often I run some logic just to basically join the two into a single field so it reads full name. But obviously we need more logic then if a user, if we give them the ability to update their name in their settings area, then we need logic to also update that full name field. It just means that we can write an expression that says, Current row's Applications Candidate's Name, or Full name. So in here in the canvas placeholder, I'm going to type "Peter Hudson".

Okay, Location is what we're after here, but I'm going to click on New York and just redo this expression to choose the Current row's Application's Candidate's Location's Display.

Now we're going to have, instead of Start salary, we're going to have Shortlist. And for this, I want an icon. So I'm going to grab this icon here, copy. I'm going to delete what's in here and then I'm going to paste this icon. Now, I think this would be a bookmark. Let me type "book". Yes, okay. On the column, we've got this little bookmark icon. We're going to use a conditional statement to change the design for this shortly.

I just want to see the size of this column here. 72 px. Okay, so let's click back on Column E and let's set the width to 72 px. But the word "Shortlist" doesn't fit now, okay, so let's try 88 px. No, more. 96 px. 100 px. I'm going to keep going incrementally. 110 px. 110 px is fine. But I want this in the center, so I'm going to click in Cell 1E and just choose the container alignment in the center.

Okay, now I can actually delete this one here, Column F. I'm going to right-click and choose delete. I'm going to change the word "Posted" in the next column along to "Date". So, the date that they've applied. And this will be the Application's Creation Date, that is correct. And then we've got our more_vert icon here, which we're going to use to initiate a popup in the next lesson.

Now I've got a bit more space here for the Job title's cell, but let's change or let's finish off this expression to the... so it's an Application for a job, and we've got the Job title. Remember, we did this for search purposes, Job title (Current row's Application's Job title).

Let's go ahead and preview this page. Before we do that, actually, let's just exchange this image here. We want to use the reusable element and then we can just sort out internal navigation for the dashboard. So reusable element, click on Avatar, get it inside Group Actions. And then, once it's inside, change the data source to the Current User, and then you can delete the one to the right-hand side.

And now if we preview this page, we have a few problems here, but I just wanted to show you that because it's a reusable element, our internal navigation works really nicely!

Okay, let's go back to candidate and let's fix some of these problems here. So we had a problem with the Name. Let's sort out the spacing first. Okay, so sorting out the spacing, if you just click on the table for me, please, the top left-hand corner to bring up the Property Editor for Table jobs, click on the Layout tab for me, and then just remove the left and right padding here. That's definitely an error on my behalf, I apologize. Okay, so that's the first problem.

Now I'd actually like you to go back to the frontend. Refresh the page. So that's the spacing issue resolved! Now, head up to your URL bar because now we are going to use debug_mode=true, otherwise known as debug mode! So let's append "&debug_mode=true". We need an ampersand here not a question mark, and for me, that is shift 7 on a Mac, ampersand. We've already got a question mark, you can only have one.

All right, so let's do this. Let's click on "Inspect". This brings up this little panel. Now Bubble saying inspect what? So if I click on, for instance, this text, Bubble gives me some information about where I'm pulling the text data from. If I click on "No-code developer," it's pulling the data from the Current row's Job title. I can do the same for this image and I can see we have an Image Source. Just some really great information here. This is really useful for debugging problems.

Now, if I click into Name, so you can't see anything, but if I hover, there is actually data in here. So if I click on Name and then scroll down, I can see that it says text is empty. It's empty. So the Current row's Application's Candidate's Name first - if I click on the name part, it's coming up as empty. And then if I click on the Candidate, it is finding data about the Candidate, but check this out! We've now got some text in red. Let's read what it says: "9 hidden fields because of privacy rules..." some of those hidden fields are Name first and Name last. Also, Location. Okay, so we need to actually fix this! Privacy rules is preventing data from coming back from the server so that Hana can view it in her browser.

Okay, so let's head back to the Editor. Let's go check out Data --> Privacy, head down to User. And we have a privacy rule that is supposed to enable access. It says "This User's Applied companies contains Current User's Company". So "This User" implies that it's Peter we're looking at. Peter's Applied companies needs to contain Orbit in order for the Current User's Company, which is Hana, her company is Orbit, so we need a match with these two. So we've got a list of companies and we need Orbit inside this list of companies.

So let's go to App data and lets open up Peter's record. And we can see Applied companies, there is nothing in here. So in the previous section, we had set up this field, but we actually hadn't populated the field! So that does need looking at, but this is a very good lesson to see how we would debug an issue where data isn't shown.

So now I'm going to type in "Orbit" here and I'm going to click "Add". Then I'm going to click Save. Okay, let's go back to the frontend. And there you go. There's Peter Hudson, and there is New York. Okay, I'm going to remove "&debug_mode=true" and then click back on Candidates. Fantastic! So Peter Hudson applied to No-code developer, he's from New York, and now let's sort out this shortlisting functionality.

So for that, we need a new field. It's going to be under the Data types sub-tab, Application. And we see we've got a "Shortlisted" field of type "yes/no". So we simply have to run a workflow to know if this Application, this job application, should be shortlisted or not.

Okay, so let's click on the Shortlist icon. Let's click "Start/Edit workflow" and we're going to simply say "Make changes to thing..." making changes to a row in the database. Okay, that's going to be the Current row's Application because we want to change the Shortlisted field to "yes". But we need to do the opposite as well. Okay, so we're going to change this workflow card to green, green for yes, green for go. Now we're only going to run this on condition that it is either empty or "no", and it is "no" by default. But we have to do this because we're splitting the workflow on this icon. So on condition that the "Current row's Application's Shortlisted is no". Now I'm going to say copy and then paste.

Okay, I want next to it, we're going to change this workflow card color to orange. We're going to change Current row's Application's Shortlisted is "no" to be "yes" instead. And then we just do the opposite here: we're going to change the Shortlisted field value from "yes" to "no". All right, so it's just like a light switch, on or off. And then so we know, we can give visual feedback so Hana knows that she's clicked it and it has been shortlisted on the Conditional tab on the icon itself. We're going to say that when the "Current row's Application's Shortlisted is yes", then let's change the color and the icon. So the icon is going to be this little solid filled with a little checkmark bookmark icon, and the icon color is going to be our success color. Okay, let's try it! Here we go. So shortlisted and not shortlisted. Absolutely perfect!

This is a good place to stop because when we get back, we're going to look at the popup to display more information about Peter Hudson because we also have to download his CV, which we're not going to do from the table, we're going to do that from a popup. I'll see you in the next lesson.