Section 4 (Lesson 7/10): In this lesson, we’re going to tackle the job creation and edit workflow. We’ll also be learning how to split a workflow into two distinct parts using conditional statements.

In summary, you’ll learn:

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

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

We're making really good progress on this popup for the job. Before we hook up the workflows, let's just quickly make a few little design iterations, make sure we're really happy with it, and also, we need a way to capture a salary, and that has two values, and we're saving it to a numeric range. Let's jump in!

So first of all, if you just click on the Popup Job, please, I just want you to remove the outset. I don't like outset on my popup designs. Let's just also edit the style and remove the outset. Just a personal choice, folks. Notice here on the popup large style as well, we do need a border of solid with the border color. Okay, happy with that. So that's the first thing.

Second thing is I noticed that our state text element changes to the same color as the Save button, which I actually don't want. So we're going to click on the Conditional tab for the Text Summary and change the background color, and let's change it to maybe just our surface color, okay? Which means our font color can stay the same. Let's do the same for Text Description: Conditional tab, background color, change to surface. Those are two small changes I wanted to make.

Now, in the Elements Tree, close your Group Description and open up your Group Summary because we do need a way to be able to capture the salary. So what I'm going to do is, I am going to head down to my reusable elements, grab a "Label & input" element, and just drop it inside this group in the center. When it's in the center, tap on the Layout tab and click "Make last." Now I'm going to to detach this reusable element. Actually, I realized when it detach it, it will probably send it to the bottom, which it did do. Oh, well, the bottom of the group, that's where I want it!

Let's change "Text First name" to "Text Salary" by typing "Salary" in the Appearance tab. Before we delete this, what I want you to do is scroll down on the left-hand side until you find Slider Input. It's under Input forms and it's called "Slider Input." Click once and then drop it inside this Label & input A. Let's just do some basic design work on the Layout tab: remove fixed width and min width, and let's try a height of, let's try 12. Okay, 18 will do. That's fine.

Now on the SliderInput A Appearance tab, let's have a look. So, we want a min value and a max value, and I'm going to say that the min value must be at least 10,000 and that the max value can go up to, I don't know, 250,000. Let's say that we drag this in increments of 5,000. We want the slider type to be a range slider because we're going to have two, the min and the max value. The initial content, we need to set the Parent Group's type. So I'm going to click on the Label & Input A just to make sure the type of content is a Job and that the data source is "Parent group's Job." Now, I'm just going to delete this Input Name first below it, it's in the way and we don't need it.

So the initial content for SliderInput A we're going to get from "Parent group's Job's Salary," and the fact that this turns blue means it's a match. If I hover over the word
"Salary," it says "Evaluates to a numeric range." Now, that would only turn blue (which means this expression is correct) if it matches a field of numeric a numeric range, and we already know that a salary is a numeric range. So if a salary was a number, that wouldn't work. You wouldn't get a match, it would remain red.

Okay, on the Appearance tab of SliderInput A, let's make the handle colors black and the range area blue. Back on the Layout tab, let's actually make this a bit taller by changing the fixed height to 24. Maybe the handles can also be blue. Yeah, we'll try that. Background color is set to surface, and I don't actually want a border color so I'm going to set this to 0.

But now we need a way to basically feed back to a user the current value that these min and max handles represent. So what we need to do for that is take Text Salary, go copy and paste, and then basically what we're going to do here is reference the min value, and to do that, we can actually just point directly to the slider input's value. I'm going to type "SliderInput A's value:min," and then format that as a currency. We're going to choose no decimal places since we're doing increments of 5,000 ("SliderInput A's value:min:formatted as $1,029). Just so I know what it looks like, I'm going to type in $5, 000 in the canvas placeholder. Okay, let's make this 12px and on the Layout tab, I'm going to choose fit width to content. Now I'm going to copy and paste and in the copied one, if I just hover over the :min section, I can change just that section of this expression to :max. And let's type $250,000 in the placeholder.

Okay, now we can highlight the $5,000 text, hold down shift, let's grab the $250,000 text, right-click, "Group elements in" --> a "Row container," and on the Layout tab, let's say Space between, and then remove the min height. So these numbers will change as these bars are dragged, or the handles are dragged left and right.

Okay, let's head over to the Save button now. So add a workflow. We're going to be creating a job, folks, creating a new thing, a new job. Step 1 should be "Create a new thing..." of Type Job. I'm going to click "Add all fields" in this step. So the Company is the "Current page's Company." We need that. The Description - I don't think I've named this Description correctly, so I'm just going to go find Group Description, open that up, and yeah, I didn't name it correctly so let's change the name on this element from "Input Name first" to "Multiline input Description." Over time, as you become more experienced, you might prefer to abbreviate a multiline input to "MI" or an input to "IN," up to you. I prefer just to leave these written as they are. Okay, so now we should be able to find it by typing "Multiline input Description's value."

Expiry date is the date and time picker, but that's also not named. Okay, let's go back and name everything correctly here. So "Input Job title," correct. Term, "Dropdown term," correct. "Dropdown location," yes. And the other "Input Job title" should be "Date picker job," and then we'll be able to grab the value of that. So Expiry date is "Date picker Job's value." When we create it, we'll say it's live. We can build logic to delay that and have pending at first, but for now you can set Live to "yes."

The Location is dropdown... wow, okay, we have a few here. All right, so when we run into this issue, then we have to be more specific about the naming. We can name this one Dropdown location (Job) so that the value would equal "Dropdown location (Job)'s value". Salary - fun one! So "SliderInput A's value:min" and then we're going to scroll down and look for "<- range ->" and then we're going to say "SliderInput A's value:max." It's as simple as that: "SliderInput A's value:min , <- range -> SliderInput value.

Term is the "Dropdown term." See how Bubble has actually disabled these other dropdown options because term is of type Option set Term, and the only matching Option set Term is this one here. So that's really useful. Then the Title is the "Input Job title's value."

Okay, in step 2 we're going to set a thing's slug. We're going to set the result of step 1, which is the creation of that job, and we're going to set the slug to the Job title. Now, why are we doing this? Because a job will be displayed on its own dedicated page, and that will have page data of type Job. Nice, clean URL that's excellent for SEO purposes as well and nice to share amongst friends, family, and community.

So what we're going to do is the slug will be the job title (again, you want your keywords in your URL), but as a job board, maybe we should also have the company - even better for SEO! So it could say, orbit-nocode-engineer, and it's a job board so Google knows, and we'll be able to probably create rich snippets from this because Google knows it's a job board. We are feeding the company into the slug, and we're feeding the job title into the slug. Really effective.

So instead of just the job title as the slug in step 2, what we're going to do is this: "Current page Company's Name" and I'm going to use a hyphen ("-"), and then we're going to say "Input Job title's value." Next step (step 3) is to reset inputs, and the last step is to hide the popup. Element Actions --> Hide, and then just point to Popup Job.

Let's go ahead and create a job! Now make sure you're logged in as Hana for this, you need to be logged in. So we're going to click "New job." Job title is going to be "Senior Developer." Let's say it is Part time for this one. The work location will be San Francisco and it expires a month from now, so I'm just going to go to April 18th for me, but you can do a month from now on your end. Okay, let's see this thing in action. Very nice. It's a senior position, let's get the salary from about $120,000 and bring down the right handle to about $180,000. Let's go ahead and save. Fantastic! Senior Developer, Part time, San Francisco, starting salary is $120,000, and the 18th of March is when it was posted.

Let's go look at the salary data in the database (App data --> Jobs). And here we go, $120,000 to $180,000. The format is [120000,180000]. It's formatted as an array, and with that, we have both of our values in there. We didn't do the description. We'll come back and write some better descriptions when it's relevant.

Okay, now we need a way to edit a job, and we're going to just use the same popup, but we need to make it obvious that we are editing and not creating, so there are a few steps involved. So the way to know if we're editing a job is basically, if there is a data source, and I don't mean a data source hard-coded in here, but if we push data into the popup, Bubble actually knows that. I'll show you what I mean.

I'm going to go to Text Create job and I'm going to click on the Conditional tab. Then we'll write this expression: "When Parent group's Job is not empty," and that's the expression. Then the text becomes, "Edit Job." Going to copy this. Going to click on the subtitle (Text Create your job below), and I'm going to paste it in for the first conditional expression: "When the Parent group's Job is not empty," let's change this text. Instead of "Create your job below", "Edit your job: Parent group's Job's Title." And, if we open up the Rich Text Editor, we can actually highlight the dynamic data part of the text and click on bold.

But what happens now because we have a single save button? This is where we're going to use conditional statements in the workflow area. So we're going to use the same button. Let's edit the workflow.

So I want you to, first of all, click on this event "When Button Save is clicked," change the event color to green (green for go) and we're going to add a conditional statement that says only when the "Parent group's Job is empty," so we're not editing a job because the Parent group's Job is empty (there is no job), then we run this workflow, the rest of this workflow.

I want you to now right-click, copy on this green event, right-click, paste, change the color to orange. And now let's say when the "Parent group's Job is not empty." Now let's do something else, so we're going to change this up. So instead of creating a new job, I'm going to delete that. I'm also going to delete this thing's slug (both of the first two steps). And let's say for step 1 we're going to make Make changes to thing, so we're making changes to the Parent group's Job, and now we click "Add all fields." We don't need to set a value on the Company again now because the company is already in there and it can't be changed so we're going to delete that. I'm going to let you go through and hook this up. For Description, this equals "Multiline input Description's value." Expiry date equals "Date Picker's Job's value." So "Live" we wouldn't edit either, but we probably do need some UX just to take a job offline with a button click. Location equals "Dropdown location (Job)'s value." Salary equals "SliderInput A's value." Term equals "Dropdown term's value,"and Title equals "Input Job title's value." Okay, fantastic.

What I want to do on each of these as well is to show the little alert that we built for the settings area. So let's go down to Element Actions --> Show message, and "Alert Successfully saved" is what we want. So I can just right-click, copy, head over to the green event, right-click, paste. Okay, so just double check that on the green event, you have "Parent group's Job is empty," and on the orange event, you have "Parent group's Job is not empty." So one of those will always run.

Now, in order to get a job into this popup, we have to start at the repeating group. There are my jobs, and what I was thinking of is these three little dots that represent showing more, basically. So with that highlighted, I'm going to click "Start/Edit workflow." This is something new now, pay attention: "Element Actions," and under Group, we're going to "Display data in a group/popup," and what display data does is basically pushes the data into that popup, the Group object. So now we know what group we're talking about, what group we're editing and saving. So Popup Job is the Element, and it's going to be the "Current row's Job," which is job data, and the popup is also set to a Job.

Now we also need another step too, because that's not going to show the popup, that's just displaying the data. So it can display the data with the popup being closed, so we do need to say "Element Actions" --> "Show," and then show the Popup Job. Okay. Let's go and try that.

Why don't we edit this one, the first one, "No-code engineer"? There's no salary in here, there's no location, we can change it to Part time. Let's change most of this stuff. Let's change Full time to Part time. Let's just change "No-code engineer" to "No-code developer." Choose a work location, maybe LA for this one. Expires, random date in the future, I'm going to say 16th of May for me. Salary, let's do let's do $80,000 to about $130,000, depending on experience, and let's go ahead and save. Successfully saved.

There you go! No-code developer, part time in Los Angeles. That's the starting salary. Pretty happy with that. We created the job, and we can now edit the job - our two major workflows for the Job section! We also need a way to delete a job. That involves a few steps because we need a confirmation, so let's dedicate a lesson to that, and I'll see in the next one.