Section 7 (Lesson 6/8): We’re going to be signing up two new candidates in this lesson: Sam and Raymond. Both candidates will be applying to a variety of jobs so that we have more data to work with and an opportunity to test our privacy rules.
Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...
Bubble editor: ➡ https://bubble.io/page?type=page&name...
Transcript
In this lesson, we're going to sign up as two new users: Raymond and Erik. And with those users, we're going to apply for more jobs and then we can see our table, our candidate table, start to grow for when Hana is logged into her company Orbit. And then we'll also use that data to then, again, look at privacy rules to see if there's anything we need to adapt and just continue to build and work with the data in Workplace. Let's dive in!
Please go to the scratchpad page, so version-test/scratchpad. Make sure you're logged out because we're going to now sign up as Raymond. Once you've logged out, head to the sign-up page. Click "I'm a candidate". Email will be [email protected]. Enter anything you'd like for the password. Agree to the terms of service, and then we sign up. Okay, fantastic!
So, first name is Raymond and let's just upload an image as well. So head into the resources folder, the link is above, and find Raymond's profile image. There he is there. Let's add the last name, which is Williams. And I don't really care about this data too much, but let's just put in some placeholder text here and any location is fine. I'm going to say San Francisco. And then save. All right, and I can see the image has been populated. Let's add a few of these work preferences, any ones you'd like. Save that.
Something I realize that we need to do as well is if I refresh the page, these work preferences are actually lost and so is this image upload. So we need to add a state on page load to basically populate these options.
So let's head into the Bubble Editor. Let's go to the candidate page. Let's head over to the workflow section and now we're going to "Click here to add an event..." and this is a "Page is loaded" event. Bubble always pushes it to the front here. And what we'll say when page is loaded, we are going to go down to Element Actions --> Set state.
Now we need to set the state of the image that's been saved to the database. We need to set that to the page as a state, and we need to do the same for the work preferences. Okay, so the states are at page level. One is the Avatar, and the other one is the Preferences, and we can simply get them from the Current User's Avatar and the Current User's Work preferences. Right, let's go back to the page and if I refresh, you'll see that that state will be set, which will then show this avatar and the checkmarks will appear.
If we head across to Applications, we can see that no applications have been made. Let's use the internal navigation. Actually, that's another thing we need to do on the Candidate dashboard is switch out this image, which is currently an image element, for our reusable element.
I'm on the candidate page, and I'm going to scroll down to grab the Avatar reusable element, and now you can see how useful this reusable element is with the packaged, Group Focus navigation. I'm going to drop it inside, and then I'm simply going to remove the image element to the right. Actually, we can remove this Text Log out as well.
So let's do this. Let's use the Elements Tree here and just pick up Avatar and remove it outside Group Actions. Then I'm going to right-click on Group Actions and delete. And then in the FloatingGroup Nav, I'm going to go to the Layout and just choose... well, actually, I'll have to click this Avatar and choose horizontal alignment to the right. That's all we need up there, okay, so the Avatar horizontal alignment to the right.
Let's now view the dashboard. Refresh the page. One more thing we need to do is just configure the data source, which I didn't do. So go to click on Appearance on Avatar and then it's simply the Current User. Now we're feeding the data through. There it is there. There's our built-in navigation.
Let's go to Browse jobs. I'm going to change this, I can see it says "Browser jobs" currently. So let's edit the Text just to fix the spelling. GroupFocus Navigation, and Browse jobs. Okay, you probably had that resolved anyway. Took me a few lessons to realize that.
Okay, let's apply to some jobs. Now we need to apply to Orbit jobs here. Okay, and let's actually use our search here. "Orbit," hit return or press search and here we go. So any job will do because any of these jobs will then show up in Hana's dashboard in that table.
So I'm going to apply to Backend Engineer and go ahead and type anything here: "This is my cover note," next and then attach the CV for Raymond Williams. You can see the bar at the top is not quite our brand color, and I've been meaning to fix that for ages now. We'll do that in a second. So let's submit the application and we can go back to Browse jobs.
And let's just fix our progress bar, our default app progress bar. So let's go to the Settings tab in the Editor, head over to General, and basically, here it is down here. And we also have the opportunity to upload a Favicon, which would be basically the logo. So let's go ahead and clear this Bubble logo and then upload the Workplace logo. Then let's change the progress bar color to our brand color and that's fine.
To refresh the page, let's apply to another job and we can actually see the progress bar working again. And if you didn't want a progress bar, well, you could possibly just turn it to white and you wouldn't see it. Okay, I'm going to apply to Bubble UI Designer and then I'm going to attach my CV and submit!
Now, one of the other things I'd like to do is is once we have submitted, I don't want the ability for a user to be able to apply again. So let's do the following. Let's head to the job page, and on this Apply button, let's add a conditional statement. Define another condition, and what we need to do here is match applications where the Candidate equals the Current User and the Job equals the Current page's Job, that's two matches we need to do.
Do a search for an Application where the Candidate equals the Current user and the Job equals the Current page's Job. Because if that exists, if there is an Application in the database that matches those two fields, that means that this job has been applied to. Then we can say, :count is greater than zero, so there has to be at least one. (We could also say is not zero. We could say first item is not empty. Let's use this one for now.) Then we're going to say that the text will now say "Already applied" and we're going to check the box to say that this element isn't clickable in that case.
Okay, let me bring up these constraints again so you can see them: "Candidate = Current User" and "Job = Current page's Job". Let's review the page. We're going to refresh and we can see that it says "Already applied" and we can't click on that button again.
Let's head over to Raymond's dashboard and go to Applications. Here are the two new applications and they're currently in a pending state. Yeah, and we will play with the status shortly, okay, when it comes to Hana viewing her candidate's job applications.
All right, let's log out and let's do the same for Erik. Let's go to the sign-up page. "I'm a candidate", and that's [email protected]. Enter any password you'd like and sign up. Let's upload and sort out Erik's details.
Actually, I did change the name to Sam! Okay, so it's not Erik, it's Sam Lundberg. And we will change his email address in the database. I don't know why I decided to change that, but I just did. Any data here will do. Click Save, and anything here will do as well.
Okay, let's just change his email address here. I'm going to go to the Data tab and refresh, get the new data down. And the other thing I noticed is that we need to sort the workflow step for Applied companies. So let's just change Erik's email. You can do this in your live database as well. Obviously, this is our test database. So that is Sam, and then also we've had Raymond apply to Orbit. So let's just update Orbit as Applied companies for Raymond and then make sure we click on "Add" and then Save.
Okay, let's just fix the workflow on applying for a Job. So I'm on the job page and it would be on step two. I'm actually going to set this to green, green for go, green for create. We can do it at step 1 because this is actually where we create. At step 2, we're making changes to the application to attach the CV. But it's in step 1 where we create.
So I'm going to remove the green color from here and rather set green at step 1 and I'm going to click on the arrow between step 1 and step 2. I'm going to click "Make changes to thing..." and we're making changes to the Current User because we need to add a Company who posted this job as an Applied company on the User data type. So it's the Current User we need to change and it's the Applied companies. And because Applied companies is a list, we're given these options here, of which we will click "add," and it would be the Current page's Job's Company. And in the previous lessons we spoke about we're doing this for privacy reasons.
As Sam, go to Browse jobs. And let's also go down to Orbit and apply for some jobs. I'm going to apply for the Senior Developer and I'll let you do the same. I realize the name of the CV is Erik Lundberg. Just ignore that. We're now calling him Sam. Submit application. Let's apply to another one! No-code Developer. Apply. Okay, let's just make sure that these exist in the dashboard. There they are there.
Fantastic. Got more data, we ironed out a number of bugs, which we'll keep doing now towards the end of the course. We'll start to see little pieces haven't been resolved. But yeah, I really enjoyed that part. And now that we have more data to play with, we can now log out as Sam and log back in as Hana and go back to the company dashboard. I'll see you in the next lesson.