Section 4 (Lesson 8/10): In this lesson, we’ll create a new popup that enables a user to confirm whether or not they'd like to delete a job. This is an important confirmation step that's relevant for any kind of destructive workflow.

We’ll be covering:

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

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

Okay, let's build out how to delete a job in the UI. So we're going to add just a little text element beneath the save button here that will only be visible when the Parent group's Job is not empty, so you're not going to see the delete option when you're first creating a job. That wouldn't make sense.

So let's grab some text under Visual Elements and just drop it beneath Button Save. The text will say "Delete" in the style Body Medium, and let's center-align the text. On the Layout tab, no min width and no min height. We do want to fit width to content and we do want to put it in the center horizontally. Also on the layout tab, it's not going to be visible on page load and it will be collapsed when hidden to remove that vertical height.

On the Conditional tab, let's define a condition for when to show it, and it's going to be very basic: "When Parent group's Job is not empty," so if we're editing a job, the job exists and we're going to give them the option to also delete the job at that stage. That's when it's visible.

Because this is a destructive workflow, you always need a confirmation, because a user might just slip with a finger and click that by mistake. It could be catastrophic if they've had multiple applicants on a job - high pressure situation. Okay, so double confirmation. For that, we're going to build a separate popup.

So we're going to close this Popup Job down in the Elements Tree and we're going to hide it. Let's add a new one. Containers --> Popup, there it is there. Let's name it "Popup Delete job." It's going to be a column and we're going to make it small. Let's make it 360 pixels in width, and the height, just about 200 for now.

Okay, I'm just going to copy across the header from the previous one, so if you open up Popup Job, just go ahead and command+C and then open up Popup Delete job and command+V. Okay, so we have an issue in the Issue Checker: it says that the Parent group's thing doesn't exist, and that's because on this Popup Delete job, we need job data. Set the type of content to "Job." The Text Create job will now say "Delete job" and in the subtitle here it will say, "Are you sure you want to delete this job?"

Alright, we can actually remove the conditionals for those two text elements that came across when we copied it. So for the Text Are you sure you'd like to delete this job?, I'm going to make this popup a touch wider, so 380. Just want that text in one line. Perfect.

Now we're going to actually print the job in here below, so let's insert a text element and insert dynamic data in the Appearance tab and say "Parent group's Jobs Title." Let's make the style Body Large and center-align that. On the Layout tab, no min width or min height. Click back on the Popup Delete job and let's add some gap spacing of 20 px so that the name comes across.

Now we need the delete button, so click the button element and drop it inside Popup Delete job. Let's change the style since we don't have a destructive button style. So we need that. Okay, so I'm going to detach the style of primary, I'm going to change the background color to red, on the Conditional tab, I'm going to say "When this button is hovered," change the background color to red, and I'm just going to drag the color down a touch so it's a bit darker at #9A0505. Then I'm going to remove the second condition.

Okay, now we can type "Delete" in the Appearance tab, and let's just also create a style here called "Destructive button" and create. And let's just on the Layout tab make sure it's edge to edge, 44 pixels in height.

So deleting is very straightforward, folks. You'll be pleased. So add a workflow. Now we'll go to Data (Things) and click "Delete thing" in step 1. Simply all we do because we're deleting a row in the database and within that row all of the fields are contained, so it's just the row that we have to point it to. The thing to delete is "Parent group's Job." How simple is that? And once we've done that, obviously hide the Popup Delete job in step 2.

Still a few more things to do though. One of them is on this "x," when we close this Popup Delete job, click "Start/Edit workflow" and create a step to hide an element and hide Popup Delete job.

Now we have to get data from one popup to the next popup. So open up Popup Job, click on Text Delete and click "Add workflow," because this time we're going to go to Element Actions --> Display data in a group/popup. We're going to display data into the Popup Delete job. We're going to get the data from the parent (Parent group's Job). We're then going to hide the Popup Job and show the Popup Delete job. So we've pushed data from one popup into the next popup. Could we also use URL parameters or states to get the desired functionality? Yes, we could. Multiple ways to do this.

Okay, let's try it! Let's just delete the first job: No-code developer. Let's choose "Delete". Then the popup says "Delete job," "Are you sure you'd like to delete this job?" "No-code developer." Delete. And it's gone! And that's it.

Now, for the next few minutes of this lesson, I'd like you to go ahead and create three new jobs. I'll do the same, but I'll probably fast forward just to speed up the experience. Name it anything you like. Something related to tech, maybe something related to no-code.

Alright, so yeah, I created a Senior Developer, a No-code developer, a Bubble UI Designer, and a Backend Engineer. When we get back, we're going to look at the filtering and search option. Very basic, what we've built, but useful nonetheless. I'll see you in the next lesson.