Section 6 (Lesson 7/9): In this lesson, we’ll work on the logic side of the job application process. File privacy is a big part of that work, as we need to secure each CV being uploaded and attached to the application.

Key aspects that we’ll cover include:

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

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

So let's now sort out the logic and the workflows and the conditionality on this popup. And this is quite involved. You might be scratching your head at certain parts if you're just dealing with File Uploaders for certain things I'm about to demonstrate, but everything revolves around privacy in this lesson. That is, if someone is uploading their CV, they don't want anyone else to be able to access their CV aside from the Company who posted the job, Hana, in other words. So this is between Peter and Hana. And by default, files that are uploaded aren't private, meaning that if someone uploads a file, they share the link with someone else, that person shares a link with someone else, they can all access that file. We don't want that. We want to be proper professional developers, and we want to secure our files to make sure that only authenticated users that are logged in that match the rules that we're about to write, only they can access these CVs.

Okay, so let's just move down the page here. Nothing to do here. If we double click on the ProgressBar File upload, now we can add in the percentage. So one of the things that is really nice on a file uploader is that Bubble exposes a state which shows the progress of a file upload because they might be super large. So we can simply point to this file uploader "FileUploader Attach your CV's upload percentage."

Now I'm clicking across to FileUploader Attach your CV, and I have checked the box to make this private. I've set a max size of 50 MB, you can do whatever you like here. And by the way, whenever I hover on an input or whenever I hover anywhere that Bubble has some attached documentation, you can go ahead and click on "See reference," and that will take you off to the Bubble documentation, which is what we've been working really hard at. So don't be afraid of documentation. Well-written documentation it's actually a pleasure to read and unlocks a lot of mysteries that you might be facing. But I'm going to leave you to read that on your own time.

Now, "Attach this file to," and this is how we make things private, that there has to be attached to a thing in the database. But the conundrum or the little riddle we have to solve here is I would like to attach it to this Application, but it has to be done on the File Uploader. Therefore, we're a little bit stuck because the application doesn't exist until we click on the "Save" button or "Upload CV". Only when something's in the database does it exist, and then we can attach this file to that thing. So we're going to then, to solve this problem, we will be building a two-step process, and we will be creating an Application in the background so it exists, and that means we can then, in the next step, use that created Application to make this CV private. That is a mouthful. I'm guessing most of you are looking around with question marks. Let's go through this and talk about it a bit further.

So "Attach the file to." I want to attach the file to an Application I'm about to make. So what we'll do is this. Let's say, Do a search for Applications, and now we're going to do a matching process here. Add a new constraint. The first is "Candidate = Current User" so the Application has to be created by me. And the next one is "Job = Current page's Job". So there can only be one thing in the database that this matches to. Because we're going to disable the ability to make multiple Applications to the same job. Only one Application. This always spit out one value. And then we're going to say the first item.

But in order for this to happen, because this making file private happens on upload, so what we have to do is before we get to this step, we have to create this Application that we're looking for. Okay, so to accomplish that, we need a two-step process. So in this Group Upload, head over to the Layout tab and uncheck "This element is visible on page load" and collapse it when hidden. When this popup is shown, this group won't be visible. Okay, that's great. That's going to collapse the space.

So what we're going to do is use states here to show and hide things. So please click on Popup Application, click on the "i" icon, and then click to add a new custom state. Call that "Step". This is going to be a number. Two-step process. And I'm going to set a default value of 1. Okay, default value of 1. So I don't need to set a state here, it already has a default value. So I can increment this, which we will be doing, and then I'll also go back down to the number 1, but we don't need to create it by default, it's created.

Okay, to help illustrate this a bit better, I'm going to go to my Elements Tree and just hide Group Upload, just so it's out the way. So this is what it looks like to begin with. So now let's add a workflow here. Add a workflow on Button Upload CV. And in fact, why don't we say "Next" in the Appearance tab here? Next, so that it's now called Button Next. It's a two-step process. And this button, I actually wanted it to be the same width, not any smaller. So I'm going to make it 86 px in width. So Min width, 86 px.

Let's go ahead and add a workflow to Button Next, and the first thing we're going to do is create a new Application. I'm going to add all fields. "Candidate" is the "Current User". "Company" is the "Current page Job's Company". "Company name" is the "Current page Job's Company's Name". Remember, we're doing this, which enables us to search by "any field contains" in the candidate dashboard table. "Cover note" equals "MultilineInput Write your cover note's value". "Job" equals "Current page's Job". "Job title" equals "Current page's Job's Title". And then we don't need Shortlisted because that is functionality coming in section seven. And then what we'll do is set "Status" to "Pending". So Pending means it's been lodged, it's been made, the Application, and now we're waiting for the Company person representative Hana, to make a decision.

And now what we're going to in step 2 for the When Button Next is clicked workflow, is set state of Popup Application, which is currently 1, but now we're moving to the next step. We've created the Application and we have saved the MultilineInput. We're going to do the next step now, so we're setting the value in this action to 2.

So check this out. Back on the Design tab, on the MultilineInput, we're going to use the Layout tab here, uncheck visible on page load, collapse when hidden, and on the Conditional tab, we're going to say, only show this when the "Popup Application's Step is 1," which I'm going to type on my keyboard, that's when it's visible.

Now I'm going to head over to my Elements Tree and I'm going to open up Group Upload. I'm going to change Popup Application. Let me just click back on Group Upload. Currently, this is hidden by default, collapsed when hidden. It's just a similar condition: "Popup Application Step is 2" and in the workflow, we've just created that step. That's when it's visible. Which means that now this MultilineInput will be hidden and this next step will be visible. Fantastic.

Okay, but we've also got this "Next" button to deal with. So, on step 1, we say "Next," and on step 2, let's define a condition: "Popup Application's Step is 2," and now we're actually going to change the text. We're going to go down to text, and instead of "Next", we're going to change it to "Submit application". How cool is that? Two-step process. And it has a min width, but no max width on this button, so that's fine.

And it's at this stage that someone will upload their CV, and the Application has just been created in step 1, so we can find an Application to attach this file to. So now you can understand the two-step process. We wanted to make the file private, to make it private, we have to attach it to a thing in the database. So therefore, in step one, we created the thing, and then we made the File Uploader with the progress bar visible.

So let's click on "Edit workflow" for Button Next because we need to add a condition here. We need to add a condition that says only create this Application when "Popup Application's Step is 1." So now we can split this workflow. I'm going to copy this, copy this event and paste. Let's say when "Popup Application's Step is 2" this time. It's the same button being used at two different steps. And in step 2, we're not creating an Application anymore, we're making changes to an Application. Okay, so make changes this to thing. Actually, I've thought of another idea here. So we can create the Application and set the state of the popup.

What about another state where we can save the application as a state? Okay, so on the Design tab, please head back to Popup Application. Click on the "i" icon, and let's create another custom state. This will be called Application. Application is of type Application. And create. No default, but we're going to set the state on this workflow when Popup Application's Step is 1. We're going to create the Application. We're going to set the state of the step to 2, and we're going to set another state for Application, which is the result of step 1. The work we did here is outputted an Application for us use as a state.

So now we can go back to step 2, and I apologize for jumping around a lot here, but it's coming together, okay? It's coming together, and we will revise this at the end of the lesson. So now I want to make changes to this Application, and I can just reference the state by changing "Popup Application's Application". That's the state. And what I want to do here is add the CV. Okay, so I'm going to add a new field. This is called "CV", and this is a type of file. And that's going to come from the file uploader. "FileUploader Attach your CV's value".

And it's at that stage, that now we can hide the Popup Application, and why don't we show a message? We need an alert. Okay, so I don't think we have an alert currently. So let's go find... what I'm going to do, we do have a style, but in terms of positioning, I want to go back to the company page and find an alert. All right, I'm going to search for it. Here it is here, this alert (Alert Successfully saved). Okay. I'm going to copy this. I'm going to go back to the job page and I'm going to Edit --> Paste, and that's what we need. There it is there.

So let's head back to the workflow once you've done that. Actually, this alert needs to say "Application submitted". Yeah, really like that. So that would be on step 2, so step 2, make changes to the application, hide the popup, and show the message. Yeah, it's only one message.

Okay, there was quite a lot to take in. Let's just have one more run through, then we'll take a break, and then we're actually going to log in as Peter, we'll make sure we are logged in, and then try to apply for a job.

So let's run through this again. So Peter lands on the job and he goes to apply for the job. And to do that, we're going to show the Popup Application. The Popup Application is a two-step process. This is step one, where we'll have Peter write his cover note. When he clicks on "Next," we're going to create the Application with all the data that we have so far, except for the file that comes in step two. So we create everything we know that we need for now, and then we're going to increment the Step to 2, the state to 2, and then we're going to set a state of the Application because we need that to make changes to that application in the next step.

And then after that, the design changes, and we don't see the Multiline Input, but we do see this upload here. This is exactly what it will look like. A user clicks on "Attach your CV". So we search for the Application and we need to match the Current User, which is Peter, with the Current page's Job. And that has already been created, it's in the database. So it's nice and private now.

Then we click on the "Next" button again, which will then say, "Submit application". I'm going to edit the workflow, and that is step 2. And it's at step 2, that we go find the Application. It's now set as a state, "Popup Application's Application", and that's when we can link in the CV, which is the file. Then we're going to hide the popup, and let's just reset relevant inputs as well in step 3. What we might need to do here is reset data in Group Upload as step 4. So reset relevant inputs should take care of the Multiline Input, but File Uploaders often need us to reset data in the Group Upload. So that takes care of that.

That is probably the most challenging part of this course. So if you understand it, congrats! If you don't, don't worry at all! You're just starting your journey. You're going to learn through the process of repetition. There's more functionality to come as well.

So let's take a quick break, and when we get back, we need to look at our privacy rules, and then we're going to actually create an Application for a job. I'll see you in that lesson.