Section 7 (Lesson 4/8): This lesson focuses on downloading of files from the company dashboard, namely candidate CVs. We’ll copy across a ready-made popup and focus purely on the downloading functionality.

You’ll be learning about:

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

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

Let's continue on with this candidate view. We've built the table, now I need the popup to display more candidate information, as well as, most crucially, download the CV. Let's dive in.

Okay, so we've built some popups and we get the design side of things. I just want to focus on functionality in this lesson. So let's head over to the demo app. (The link is above.) And let's just copy and paste the popup from that app into this app.

Here I am in the demo app on the company page, and I'm going to open up Popup Candidate. Okay, there we are, Popup Candidate. Now I'm going to go to Edit and just choose "Copy to another app". Not going to copy with workflows, it's just "Copy to another app". Then I'm going to head back to my app and I'm going to go to Edit and paste. We've got some issues to fix, that's okay. Now, you need to be in the same browser to perform this function. It's tab to tab.

Okay, so let's sort out a few things first. Let's bring up the Property Editor by double-clicking in the popup, and we have a type of content which is set to Application. If you didn't set it to Application, you can click the dropdown and choose Application. Now we need a type of content here because this popup will we will be pushing multiple different candidates, all of their data into this popup.

And then we just have this Group Title & subtitle with this "x". So click on the "x" for me, please, and we're going to click "Start/Edit workflow". Before we do that, we're going to change the color to our charcoal color and then we're going to Start/Edit the workflow. And it did copy across this workflow step, and that's fine!

Okay, back to the Design. Got another group here, it's called Group User. And I fed through the popup data here because this information is indeed dynamic. So I set the type of content to a User because this is just the user information in here and I got the User information from the Parent group's Application's Candidate. Now I need to sort this Image Candidate out, so Parent group's User's Avatar. You do the same, set that the Run-mode rendering to "Zoom" and I've got a canvas placeholder. It's up to you if you want to upload a canvas placeholder.

Next is the name. So I've got the Parent group's User's, and I'm going to say Name first, and then I'm going to click out of the box, and now I'm going to click back in. Press space bar and say Parent group's User's Name last ("Parent group's User's name first Paren group's User's Name last"). Okay, lots of space there. I added the canvas placeholder.

Now for the email. So the email isn't actually displayed in the table. So this is a great opportunity to display the email, and that needs to be the Parent group's User's email with a canvas placeholder. Okay, so we need to redo this expression too, so it's a Parent group's User's Location's Display.

And lastly, I actually want to do this again, so you just understand how this works. So we're going to just delete this element. So let's actually do this properly now. So this is a link element, okay, a link element. So go and find yourself a Link, click on the Link, and then actually drop it into the Popup Container. Let's say "Download CV".

Now, in order for this to work, we need to set the destination link to an External URL and we're going to select the Destination URL as the Parent group's Application's CV. And the CV is basically, remember what I said? It evaluates, says it evaluates to a file here, but indeed it is a field with a URL, and that file is hosted elsewhere, but we've got the link to it. Then we're going to open this in a new tab as well, so it doesn't basically replace the Application view, the dashboard view.

Let's just style this now. So let's choose a... for this one, let's choose a Secondary Button Link. I actually prefer that to the other one from the demo app. On the Layout tab, let's have this edge to edge. Remove min width and set the height to 40 px. Yeah, that looks really good!

Okay, now remember, we need to display data into this popup because we could be clicking anywhere in this table. We're going to add... we're going to sign up new people soon, and we're going to have lots of different candidates here to choose from.

Okay, so in the table, we've got our Cell 1G. Click on the icon, please, and Start/Edit workflow. And some stuff has copied across here, but let's just reconnect it, so we're going to choose "Popup Candidate" as the Element to display data in, and "Current row's Application" as the data to display. So that will push Peter Hudson's, the Application he created, into the popup. And then we need to show not Popup Job, but Popup Candidate in the next step. We copied and pasted our jobs view earlier on, which is why we still have these neglected workflow steps. So Popup Candidate, make sure that we're displaying data into Popup Candidate, not Popup Job, Popup Candidate. Just double-check those two things for me now, please.

All right, once you're confident, let's preview the page. There we go! Peter Hudson, [email protected], from New York and if I click on "Download CV", it takes me to a new tab where I can view the CV and I can choose to download the CV as well.

Okay, so there you go! So Link element set to an External URL because it is actually externally hosted on Amazon Web Services, part of the Bubble ecosystem. And that's how we download files and CVs.

Okay, just a short lesson. In the next one, we're going to be looking at a little toggle filter, so I'll see you in the next lesson.