Section 5 (Lesson 4/8): We’ll design both the repeating group’s job card and the sponsored job card in this lesson. One particularly interesting technique you’ll learn is how to concatenate multiple text items into a single text element — and then change the color of some of the text.

You'll also learn about:

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

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

So let's design our repeating group card, showing the logo, the name, the ability to bookmark a job, and then we'll also design the sponsored post.

So in the demo app, we have the logo on the left, and then we have a link, we have some information, and then we also have "Posted," which should be showing a date (that's something I need to double check) with this icon on the right-hand side. So the layout of this card is in fact a row, but then we have another group here set to column, so these can go top to bottom. On the right-hand side, we have our fixed-width sponsored post card in a column layout.

So here we are back in the Editor on RepeatingGroup Job. Just want you to double click on the Repeating Group to bring up the Property Editor because we are actually going to have a separator on the Appearance tab set to solid. We're going to change the width to 16 px and we're going to choose the white color, so a white separator adding some space between our little card elements.

So let's first add a Group. So let's go find a Group element. We're going to draw it inside this first cell, and if it doesn't want to go inside the cell, that's okay. I'm just going to show you that mine did go inside the cell. It's called "Group I," but you can also, if it's outside of the cell, you can pick it up and drop it inside using the Elements Tree.

Okay, this will be called "Group Card." It does need a type of content because we're feeding data from the Repeating Group into this card. So that is a type of Job, and it's just the Current cell's Job for the data source.

Let's head over to the Layout tab. Let's remove the min width, and I'm not too sure what the height will be because it's the column stacking of text that will determine the height, but let's just add 100 px for now. For the padding, I'd like 20 px on all four sides, please. And what else do we need to do here? I think on the Appearance, let's choose 8 px on the roundness.

Okay, let's save this as a style. So let's detach Standard Group (Overridden) and let's create a new style called "Card Medium," because chances are we'll be using this elsewhere. Let me set the background style to flat color, and that will be our primary contrast color.

Okay, now for the logo on the left. Actually, before we do that, just make sure that on the Layout tab of Group Card, it's set to a row. Now for the logo on the left, let's find the Image element. There it is, and just drop it inside. It's huge, so let's first sort that out on the Layout tab. The width will be 44 pixels, and we're going to check "Keep element aspect ratio fixed." Let's name this "Image Logo." Now to feed through and attach the dynamic data, so insert dynamic data, and it's going to be Parent group's Job's Company's Logo.

Okay, so now this is interesting! Now we've got a nested data structure in that a Company is a data type and it's associated with a Job. To get the Logo of the Company, we're starting with the Parent group Job, and we know where the Logo is, it's in the corresponding Company, so then we're going to go Parent group's Job, then Company, and then the Logo. So you can see how the data flows through, and we can eventually get what we're looking for. So I'm going to choose "Parent group's Job's Company's Logo" for the dynamic image.

I'm going to choose "Zoom" for run-mode rendering on the Appearance tab. Let's also set an ALT tag. What is an ALT tag? So think about a title tag - like a h1, a h2, a body tag, - this is a similar thing. So this is helping Google understand what this image is about. So this is a logo image, and we can have a mixture of dynamic data with our own static data here. I'm basically going to point to the Company's name and then have a space and just type the word "logo" so we know that it's Bubble's logo, Brainwave's logo, etc.

So insert dynamic data in the ALT tag, "Parent group's Jobs Company's Name" then we click back into this box, press space on your keyboard, and then type the word "logo."

All right, I'm after a canvas placeholder here, just so I can see the design taking shape. So go ahead and upload the Orbit logo. Let's set 8 px on the roundness as well. Good stuff!

So just notice that we do need a border style, okay, because this design is floating here. So I've clicked on Group Card, I've clicked on the Appearance tab, we'll scroll down to find the border style, which I'll set to solid, and then, of course, select our border color to remain consistent with the rest of our design. Looking good!

Next, we need a Link element because we're going to be clicking on the name of this job, and we need that to be a link but it has to actually display the name of the job. So we're going to insert dynamic data in the Appearance tab and choose the "Parent group's Job's Title." For the canvas placeholder, let's just say something like "Product Developer." Okay, now we don't have the page created yet, which will just be a job page, so we're going to leave it for now, we're going to come back to this.

And let's just have a look at the options for styles here, okay, so let's detach the style. For this, we're going to use a Semi-bold 600. We want this to stand out from the rest of the text. We're going to choose 16 px in height, our black color for the font, and that's all we need to do on that for now. Let's head over to the Layout tab and just uncheck fixed width so it spans all the way to the edges. Remove the min width and the min height.

Okay, we do need some gap spacing inside here, so back on Group Card, we're going to check the box to apply gap spacing. We're going to choose 12 px for the row and the one which we'll see take effect now is going to be 20 px on the column.

Okay, before we continue with the text part of this job, we're going to add an icon on the right-hand side, so find yourself a Material Icon. Get it inside Group Card, first of all. We're going to look for a bookmark icon, and we want a hollow or an outline icon to begin with. The color of that will be our charcoal color. Going to remove the roundness and just set on the Layout tab the sizing of 24 px by 24 px. Now we're going to click "Make last" to push it to the right-hand side. Looking really good.

Let's look at the demo app now because the next part is a little bit more involved, as we're going to be using a Text element but designing the individual pieces a little bit differently. So we can see that we have the Company Name, and then this dot, then the full name, and then a dot, Location, dot, and then the Salary min is in blue, but this is all a single text element which is much easier to deal with. Okay, let's try to figure this out.

So I'm going to grab some text now because it's not a link anymore, only the title is the link. I'm going to grab some text, and get it inside Group Card. For now, I'm just going to use insert dynamic data and just attach the Company Name. So Parent group's Job, then we need to drill down into the company data type and then go find the name: "Parent group's Job's Company's Name" in the Appearance tab. That's going to be a style of Body Medium, 16 px of font height is fine, 500 is fine. Let's just head over to the Layout tab and remove min width and min height.

I'm going to choose "Next" on the Layout tab of this text element, and then I'm going to highlight both the link and this other text element so that we can right-click and choose a column container layout. Adding this new group here, we need it top to bottom. I'm going to call this "Group Text" and I'm going to remove the min height.

Before we complete this particular design with all of the dots, I'm just going to copy and paste it. Make sure it's selected. I'm going to clear out what's in this copied composer. I'm going to type the word "Posted" in the Appearance tab, and then I'm going to insert dynamic data and choose "Parent group's Job's Creation Date," and then format the date the way you like it. I'm going to choose the third one down ("Parent group's Job's Creation Date:formatted as Mar 25, 2024"). And then close. Last thing I'll do there is just change Body Medium to Body Small for the style. Why don't we add some placeholder text that's nicer to design and work with in this particular view? So type "Posted" and then choose today's date for you, basically. So see, the format is, for me, it's March 25th, so I will write "Posted Mar 25, 2024."

Let's review one more time what we need to do here. So Company Name, then the Term, then the Location. (And notice that we can also filter with the same data.) Company Name, Term, Location, Salary min. So we've got the Company Name, so I'm going to click back into this composer, press space bar, and hold down on my Mac, Option+8 - on a Windows, I'm not too sure what it is, but it basically changes the star icon into this little dot by using option instead of shift - then I'm going to click space again. Now we need the Term, so I'm going to insert dynamic data "Parent group's Jobs Term's Display." Okay, I'm going to click away so that takes. I'm going to click back in. Space. Option+8 for me on a Mac. Space again, "Parent group's Job's Location's Display." Fantastic. Space, Option+8, space, and now we need Salary min, so insert dynamic data, "Parent group's Job's Salary:min" and then format as currency, no decimal places because they're big numbers, thousand separator with a comma, and then US dollars for the currency ("Parent group's Job's Salary:min:formatted as $1,029").

Okay, so you can see that this is starting to look a little bit messy, it's just a lot of dynamic expressions chained together. So let's basically type it out, the desired result here in the canvas placeholder. So we're going to type "Orbit • Full time • New York • $100,000." Okay, so you can see that the design looks much, much better. I think that vertical spacing is fine as well, we have a bit of space between them.

Now, in order to get this blue color, I want you to click on the rich text editor and then go find the "Parent group's Job's Salary:min formatted as $1,029," highlight that, then click on this little swatch and find the blue color. Now, this isn't the exact color we're after, but it just helps with the BB code formatting. Then save.

Now, to find the actual color, we're going to head over to the styles tab and we're going to click on "Style variables" and then find our brand blue. I'm going to copy that hex code, get back to the Design tab, and then I'm going to just remove the #000FF in the relevant text element's Appearance tab and replace it with what I've just copied. If the color doesn't look like the brand color, then you've made a mistake here (#2563EB). I'll zoom in so you can see the full formatting for this.

Now, I just wanted to do a quick privacy rule check to make sure that this is public data. Click on the Data tab, click on Privacy, and remember, we actually added a new field, didn't we? A Sponsored field. We can actually check that that is public as well. Sponsored. We have the Title, Company, Salary, yeah, most of it is public.

Back in the Design tab. Now, let's sort out the design here, so let's grab some text. Get it inside Group Sponsored, first of all. This will say "Sponsored Job" in the Appearance tab, and I'm going to use Body Large for this. Then on the Layout tab, tab, remove the min width and the min height.

Let's have a look at the demo app for the rest of this design. Now we have a logo, and then it looks like we can copy and paste what's in here for the section with an "Apply" button. We can just copy this logo, copy and paste. Let's add some gap spacing. Let's try 20 px. Now we need to copy this group.

I'm going to head over to my Elements Tree and find Group Text. I'm going to use my keyboard shortcut, but you can also go copy up here and then paste. We might have too much padding here. Let's change it to 24 px all the way around. That looks better.

So I don't want it wrapping to two lines, and I want to just remove some data here, so I'm going to clear the Salary:min part, and just remove the color bits, the BB code as well. I'm going to do the same on the canvas placeholder. I just want this all in one row and it's a fixed-width group so that design won't change. Yeah, I prefer that. Why don't we move the "Posted" as well, I just wanted it to be a bit smaller.

Let's grab a Button next, please. Click on the button. Let's get inside Group Sponsored. Let's change the style to a Secondary Button. And then let's just simply type "Apply" in the Appearance tab. On the Layout tab, we can remove the fixed width so it spans edge to edge, and remove the min width and set a fixed height of 44 pixels, standard with the rest of our application.

Lastly, we have some space down here, and that's because our min height is too big, so I'm going to remove the min height because we now have some content within. That looks really nice. Yeah, I love that actually.

I'm just going to look at these issues up here in the Issue Checker quickly. Okay, so what we need is inside this Group Sponsored, we need type of content to be "Job." For the data source, we're going to do a search for jobs and we're going to say we're going to click this popup that says "The data you're displaying is a list of Jobs, while it should be a single Job." Okay, so because we're doing a search for Jobs and we're not applying the search to a Repeating Group or a Table, which is a list of data, it's a single group, so you can only display a single job in a group as data, as a data source. So Bubble is saying, I suspect you're looking just for the first item that's returned, okay, and exactly, we're looking for the first item. So I'm going to click on the button that says "Click to use the first item of this list."

So now the expression reads, "Search for Job's:first item." But let's add a constraint. That constraint needs to that the Job is Live, and we'll do this with the Repeating Group soon. So that's "yes." Okay, this is a server-side constraint. Now I'm going to add another constraint that says Sponsored equals "yes."

What I'm also going to do is say sort by, because maybe there are multiple sponsored jobs in the database. In fact, there would be. That would be a part of our monetization strategy, we want people to sponsor jobs, basically, so it can earn some income. And we're going to need to keep it super simple, right? We're just a learning Bubble here, and I've worked for a company that is a Workplace-similar company where they display jobs. They had hundreds of thousands of jobs. And we built a full strategy around how sponsored posts are shown, making sure that they're shown to the correct people that matches what they're looking for, their job attributes per-se. We're just going to keep it really simple, and we're going to say just sort randomly. So just show a random sponsored job. You can only show one at a time. Remember, Search for jobs:first item, so every time the page is loaded, Bubble will find a random job that is Live and Sponsored and display the data into this group. So we're going to sort by "Random sorting."

Okay, now let's just reconnect some of the data here. Actually, Bubble has gone ahead and done that for us! No more issues. Love it.

Good place to stop. I know you're eager to hit that Preview button. Please don't do it yet. There are a few other things we need to talk about because when we get back, we're going to apply server-side constraints to our Repeating Group and make sure that our filtering system works how it should, and then we will display our work. Fantastic, and I'll see you in the next lesson!