Section 4 (Lesson 6/10): This lesson is a continuation of the previous lesson. We’ll keep designing our job popup to include title and description fields. We’ll also be using dropdown elements to capture the term and location values.

We’ll learn about:

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

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

All right, folks, diving straight in. Let's finish up this design.

So we need some inputs with labels, and I know I've done some of this work already, so I'm going to just hide Popup Job for a second and I want to have a look at Group setting, please do the same. Find Group setting and open Group setting. So it's this Group Label & input that I'm after. Why don't we do this? Highlight Group Label & input (the first one with the first name and the input), then head up to Edit, and let's say "Convert to a reusable element." Type "Label & input" for the element name and then create. All right, then just bring up your Property Editor and I just want you to clear out the expression in the initial content. Let's set the default builder width to about 200 here. Fantastic.

Let's head back to the company page. Open up Popup Job, and now, if we scroll down, we can see that we have our Reusable elements section, and we have a Label & input. So click that, and then just drop it beneath the Summary. And this just saves us a little bit of design time, okay? What we need to do next is to actually detach it, otherwise, it's going to be referencing the parent. So we're going to detach a reusable element by right-clicking and now we have basically our own instance in this popup that we can adapt how we see fit. It's now orphaned from its parent.

So the first thing I'm going to do is I'm going to type "Job title" in what's currently called Text First name, and I'm then going to change the input name to "Input Job title." The content format is of type text, perfect. While we're here, though, this time we are going to be configuring the initial content. But to do that, its parent needs a type of content with a data source. So now we're going to say "Job" as the type of content for "Label & input A" (the reusable element) and we're just going to reference the parent again in the data source as "Parent group's Job." So later on, we'll be pushing data into the popup, and then this group, if it references the parent, well, it's referencing the data source. In this case, "Parent group's Job" has the parent being Popup Job. And then in relation to "Input Job title," the parent is its group above, so I'm going to insert dynamic data in the initial content for "Input Job title" and say "Parent group's Job's Title".

You can see how we chain together data sources here, so we just keep referencing the parent, but data needs to start somewhere, then it's being pushed into the popup, and then as long as all the child groups and elements reference the parent, it will basically find its way back to the popup as the data source.

Okay, I'm going to copy and paste this reusable element that's currently called "Label & input A" and rename the copied version to "Label & input." Let's change the new "Text Job title" to Term ("Text Term"). And for Term, we need a dropdown here. So I'm going to right-click and I'm going to say "Replace the element type," and I'm going to look for a dropdown. Replace. Okay, let's quickly set our style. Standard dropdown, fantastic. So it is a dynamic choice for Choices style because it's an Option set. So we have to point to the Option set called Term. The choices source is "All Term" because we have two and then the Option caption is "Current option's Display," so Full time or Part time. When it comes to editing a job, we need to see what the existing value is, so we're going to say, "Parent group's Job's Term" for the default value. Make sure that this new Label & input has Job as a type of content set with a data source of "Parent group's Job," which should be inherited from when we copied and pasted.

Okay, I want these two next to each other because this is too much horizontal space. So we're going to highlight both label & input reusable elements, right-click, "Group elements in" --> a "Row container." This can just be called "Group Inputs," and on the Layout tab, we can choose 20px for column gap. Yeah, that looks great.

Okay, now we can highlight Group Inputs, copy and paste, clean up the copied title to exclude the word "copy" (and now I just want to check that we have Job and the data source "Parent group's Job," which we do), and now we need "Work location," so we'll type that in the Appearance tab for the copied text. And for that I need a dropdown, so I'm going to copy the one above and I'm going to paste it inside "Label & input A" and then just delete the copied over "Input Job title" right above it. For this dropdown input, I'm going to choose Location as the type of choices, with All Location as the choices source, and then "Parent group's Job's Location" as the default value. Then I am going to just rename this to "Dropdown location." Let's just make sure we did the same for term, which we didn't, so let's name that one "Dropdown term."

Okay, and down here on the copied over Text term, I need to write "Expires" in the Appearance tab (and the name will now be "Text Expires"). Now we're going to change this dropdown below the text element because I want a Date/Time Picker instead. So I'm going to right-click, "Replace the element type," look for "Date/Time Picker," and replace.

Okay, I don't think we have done a style for this yet. Let's just try standard and let's edit the style of the Standard Date Picker. So the date format I want to be friendlier, let's choose the second one down. Going to say 500 (Medium), 16px, Inter. I'm going to leave the placeholder color. I might actually come back later on and just create a new placeholder color across the board, but for now it's fine. Background style set to flat color and white. Border, let's set our border color here and set the roundness to 8. On the Layout tab, let's use 16 pixels for left and right padding. On the Conditional tab, remove the condition around when the Date/Time Picker is hovered, but keep the other two. Okay, yeah, that looks much better.

Okay, so let's take both of these Group Inputs, right-click, "Group elements in" --> a "Column container," and we're going to call this "Group Summary." On the Layout tab, I'm going to choose 20 pixels of row gap. I'm going to uncheck that this is visible on page load, and I'm going to collapse it when hidden. On the Conditional tab, we're going to say that you can only see it when the popup state is Summary. So "When Popup Job's tab is Summary" (just type the word "Summary" in), that's when it's visible.

Okay, let's find a Save button next. There's the button. Just drop it towards the bottom. Simply going to type Save in the Appearance tab, and now we're going to use our Tertiary button here. Quick styling: let's make this edge to edge and remove the min width, and I like 44px for the min height for a button.

Now for our Description. So to design that, let's hide Group Summary in the Elements Tree and then let's go find Label & input in the Reusable elements section at the bottom, click once and drop it inside Popup Job. I'm going to rename this reusable element here from "Label & input A" to "Group Description," so when the state is set to "Description," that's when we see this group. I'm going to uncheck "This element is visible on page load," and I'm going to collapse it when hidden. Actually, before we go any further, let's just right-click on this Group Description and just make sure that we have detached it from the reusable element.

So after I've done that, I can see that there's a bit of a bug there, so let's just bring this back into position. Group Description on the Layout tab, I'm going to hit "Previous" in the horizontal alignment section. Okay, so let's just have a look at these settings again: not visible on page load, collapsed when hidden, but we are going to see it when Popups Job's, when it's custom state called 'tab' is, then type out "Description." When that's the case, this element is visible ("When Popup Job's tab is Description" on the Conditional tab). If that doesn't work for you, it's because the state you're setting when you type the text in the workflow doesn't match this text here. It's case sensitive. Always check your spelling as well.

Okay, instead of Text First name in Group Description, let's type "Description." Instead of this Input Name first, just right-click, "Replace the element type", type "multi" to get the Multiline Input, and replace. The data is something we need as well, so for Group Description, change the type of content to "Job" and reference the "Parent group's Job" in the data source. So it's pulling data from the parent, which is Popup Job. So the initial content in "Input Name first" would be the "Parent group's Job's Description," and let's change the style back to our Standard Multiline Input. Let's set the height to 88 pixels on the Layout tab - maybe let's do a bit more here, let's do 128. This is a job, so it needs significant space, possibly way more than this, but this will just grow as a user types.

So just to reiterate that this Group Description is not visible on page load, it's collapsed when hidden, and we bring it back when the Popup Job's tab is Description by clicking on this Text Description element.

Okay, let's check out the design on the front-end. So click "New job." Summary status is set, so we can see the summary stuff here. Date/Time Picker looks good, Description too, yeah, really happy with that! Really, really happy with that. Good amount of design work we did there.

In the next lesson, we're going to hook it up and start creating stuff, and that's when it gets really exciting. So take a break, I'm going to make a coffee, and I'll see you in the next lesson.