Section 4 (Lesson 5/10): In this quick lesson, we’ll create a popup that a user will interact with to create, edit, and delete a job.

We’ll also cover:

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

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

In this lesson, we're going to make a start on the job creation with workflows, and the first thing we need to do is design the popup.

Before we do that, I just want to tidy up this table slightly to make more room, more horizontal space for the job title which will be dynamic. But a lot of these other ones, yes, they'll be dynamic, but the width is predictable because they come from an Option set. So on "Applied," for example, if you double-click on column E on Applied, head over to the Layout tab, and let's try a fixed width of 100. On Column F, "Posted," let's try 160. What we're doing is just making sure that the text element can grow a little bit more than it currently is at. We'd want this to be in maybe the triple figures, but also we've got that this text up here needs to have similar padding on both sides. Okay, so this is just guesswork slightly, but we have visual feedback in the design.

Fixed width in column D, let's try 180, too much, let's try 140 and that's better. So room for another zero in there. "Location," let's try 140 on this as well. Probably need more space in that, let's go to 150, and I think that should cover most of the location names. And then "Term," this is a predictable one, let's try 120. Yeah, that looks good because we only have two values here: Full time and Part time. And then that opens up some more space here, some more width.

So, the job popup design! We're going to choose a popup, click once, drop it on the page. This will be called "Popup Job," it's going to be a column container. We're going to make the width 576. It's a creative choice, but I've already built this and I know that that width works quite well. Obviously, we could change it later on. Let's change all the padding to 32. Okay, make sure you have a border style set of borders with 12 roundness. And we're going to create a new style once you've done that and call it "Popup large."

Now we're going to set a type of content on Popup Job here. It's going to be called "Job." We're setting a type of content because we will be creating a job shortly in this popup, but later on, we need functionality for a user to be able to manage this job as well, such as editing the job or deleting the job or even viewing more data about the job. And for that purpose, we need to set the type of content to "Job" because we're going to be pushing data from a repeating group into the popup, okay?

Let's grab a text element next. Let's drop it into the popup. Let's type "Create job" (and this will dynamically change to "Edit job" later on). Let me choose a Heading 6, and I'm going to center-align that. I'm going to remove the min width and the min height, and I am going to fit width to content for a very specific reason, and I'm going to center-align that.

So we need to now position an "x" here in the top right-hand corner to run a workflow to close this popup. So grab a Material Icon and just drop it into the popup. Search for "close," then the second icon should be the "x" we're looking for. Change it to the charcoal color. Over on the Layout tab, let's make it 24px by 24px. Now, we're currently in a column layout, so I could put this in the center and I can move it along this axis. I want it to the right-hand side on the same row as "Create job," so for that, we're going to use Align to Parent. So I'm going to highlight Text Create a job highlight holding down shift, the "x," and right-click, "Group elements in" --> an "Align-to-Parent container." This group now needs to be named Group Header, and remove fit width to content, remove the min width, and remove the min height. Now find your "x", it's probably in the center, and move it to the right-hand side. And for Text Create job, any of these middle options will do: top, center, or bottom. We have the group, the height closed right down. Okay, I prefer just to always put in the center, and then the "x" will be on the right-hand side.

Okay, but I'm after a subtitle as well. Always put subtitles. Just a nice, neat design pattern. Let's type, "Create your job below," and let's align that in the center. On the Layout tab, let's remove the min width and the min height.

Now with that new text highlighted (Text Create your job below), also highlight the group above (the Group Header), right-click, "Group elements in" --> a "Column container," and then apply some gap spacing on the layout tab of 12. Maybe that's too much, let's choose 8. Okay. Now this (currently Group Job) actually becomes the Group Header, so let me just fix this up. So that is now called "Group Header." If I open Group Header in the Elements Tree, I can see the Group Header beneath that, which is the "Create job" text and the "x", and for that, we'll just rename that from "Group Header" to "Group Title." Okay, so we have Popup Job, then the Group Header, then the Group Title. Perfect, looking good!

I'm just going to take you to the demo app just to show you the behavior of this popup. So here's the demo app. We've just created this up here, and now we have some Summary text on the left and on the right, we have Description. These are both text elements. I want these to be clickable because when Summary is highlighted, we're going to have a bunch of inputs and drop-downs, and then when Description is highlighted, we're going to have a nice big text area where a user can write a job description. Okay, so I thought that would be better within its own tab so that's what we're going to do next, and we're going to use states for this.

So grab a text element, drop in the page, and let's type "Summary" in the Appearance tab. On the Layout tab, remove the min width, and let's make the height 40. Let's head back to the Appearance tab. I want this to look a bit like a button, which we can actually do with the text element. So I'm going to center-align this. I'm also going to center the text vertically, I'm going to check that box. Looking good. Now I'm going to add some roundness of 8. Background style, I'm going to set to flat color, and I'm just going to use my default primary contrast color.

With that done, I'm going to choose command+C, command+V on my Mac, and in the one beneath, I'm going to type in "Description" instead of "Summary." Now, I want these next to each other on the same row, left and right. So I'm going to highlight both of them holding down shift, right-click, "Group elements in" --> a "Row container." Aha, looking good. Now we can name this "Group tabs," and let's just close down this group so it fits height to the content of the text elements. I'm going to remove the min height. Lovely stuff. Now back on the popup, I'm going to click on the popup on the Layout tab and I'm going to use some gap spacing of 32.

Okay, so now we're going to set up the states and then after that we're going to take a break. So in the past, I've said, try setting states with a consistent approach, not just your naming conventions, but also where you set them. Instead of setting them on elements all around the page making it difficult to work with other developers, rather set most of your states on the page element itself. But then in popups, this is the only time I break this rule because sometimes I like to copy and paste popups between pages. I mean, the best approach for that would be making a reusable element, but in any case, I do prefer states to be set in popups themselves. Okay, so let's do that first, then we'll create the workflows.

I've got the Property Editor up for the Popup Job. I'm going to click on the "i" icon this time. And in the past, I've said that this is where we can see our custom states, but we can also add new ones with this method. I'm going to add a new custom state. I'm just going to call this "tab," and this will be type text. Check this out: type in "Summary" for the default value. So that basically means when the popup shows for the first time, the summary tab will be selected. Fantastic!

Now to run the workflows. So we still need a workflow for Summary, even though it's the default, because once the Description state has been set, well, we need a way to reset it back to the Summary. So I'm going to add a workflow for Text Summary and I'm going to click to add an action, filtering the options by typing "S-t-a" and click on "Set state of an element." I'm going to set it on the popup like discussed, so I'm selecting Popup Job as the Element, and there it is there in the custom state dropdown: tab. Now I've just typed "Summary," in for the Value, and please do the same. So that sets the state!

Back in the Design tab, let's do the same for Text Description. Add a workflow, filter actions by typing "S-t-a," choose the Popup Job, that's where the state is set. There is only one state on the popup that's called "tab," and that would currently be Summary so now we have to overwrite it with the new value of Description. Brilliant!

The last thing we need to do is we need some feedback for the user that these text elements have had their states set! So on the Conditional tab of Text Summary, we need to define another condition and the condition will read "When Popup Job's tab is Summary" - it's case sensitive, so it needs to match whatever you typed in your workflow - then I'm going to change the font color and the background color. I'm just going to inverse them, so the background color becomes dark and the font color becomes light.

All right, I'm going to right-click on Text Summary, copy special, copy conditional expressions, I'm going to click on Description, right-click, paste special, paste conditional expressions. But we obviously have to change the value here. So instead of "Summary," I'm going to type "Description."

I do want to actually test if that works before the break. Just one thing I noticed is that we need some border radius on this Popup Job. It's currently set to 3 so I'm going to set it to 12, and I think while I'm at it, I'm just going to edit my style and set it on the style as well to 12. Now that I've done that, I can just re-select Popup Large style in Popup Job.

While we're here, this "x" icon, let's just click "Start/Edit workflow" to hide the popup when the "x" is pressed. Step 1 will be to hide an element, and let's just choose the Popup Job as the element to hide. We'll continue to work on this because there are a few other things we need to do because we're going to have data in that popup.

Okay, so click away so you can hide that popup. Then click on Button New job. Let's click "Add workflow" in the Property Editor, and now in step 1 we simply want to show an element (Popup Job). Okay, let's preview the page.

By the way, if you ever lose your avatars because you're not logged in, so you have to go to the database and then run as Hana from her User record. And if you ever don't see your logo, it's because your URL won't have the the company name in it as the slug, which is "orbit." So whenever we're working on these exercises, make sure that we have "/company" and then "/companyname" in the URL.

Let's click on "New job" to test out this pop-up. There we go. Click on Description, states are being set, and click on the "x" icon. Fantastic. Good design work done. More practice with states.

In the next lesson, we're going to be adding all of the inputs and then in the lesson after that, we're going to be looking at the workflow for data creation, and that's where it gets super exciting because you'll start to see a lot of jobs popping up and job variety to look at and more privacy rules to start configuring as well.