Section 4 (Lesson 3/10): In this lesson, I’ll guide you through the process of defining your job data type with unique fields and then show you how to seed your database with dummy data to test and refine your table designs.

You’ll be learning:

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

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

In this lesson, we're going to create the Job data type, and there are some interesting new fields that we'll learn about. Once we have the Job data type, we're going to seed the database with some dummy data so that we can pull that data into our table and we can just double-check our table design. Let's jump in!

Head over to the Data tab, please, and currently, we have Company data and User data. Let's create a new data type called "Job." Not plural, just singular. I know I said that we'll be checking this "Make this data type private by default" checkbox next time, but we will soon - we first actually need some data in the database to talk about privacy rules. So we're going to leave that unchecked and we're going to create.

And then let's create some field! Let's do the easy ones first. So a job needs a "Title" of type text. A job needs a "Description" that's also of type text. What about an Expiry date? You don't want jobs hanging around on the jobs board. Let's have a look at the field type for this "Expiry date," and under the basic types, we have number, numeric range - aha, we have a field type of date! So by having an expiry date set, we can create a logic around automatically changing the status of a job and actually taking it offline so that people can't apply for it. What about a status field called "Live," and for this, we're going to use simply a yes/no, otherwise known as a boolean. A job is either live or it's not live. Super simple. "Salary" is a crucial one! Now, salaries are usually displayed in ranges, starting salary, ending salary (most of the time). So it sounds like we need two values here. Let's look at our options. Click the dropdown for field type, scroll down, we have a number but we also have a numeric range. A numeric range allows us to set a min and a max value in one field. So we'll select numeric range for this field type.

We need to distinguish whether a job is Full time or Part time, so let's head to the Option sets. Let's create a new Option set. Let's call this "Term," and then we're going to create two option, the first one being "Full time," and the second one being "Part time." Now that we've created the option set, we can link to that option set using a "Term" field on the Job data type. So we're going to say "Term" for the field and we can just point the field type to the Option set we've just created, which is also called "Term."

Lastly, we're also going to associate a Company with a job for privacy purposes. And remember, I said in the previous section that field types can also be other data types. So we'll make a new field called "Company" and find Company in the data type section for the field type. Okay, that's enough to get going.

Head over to App data, please, and then click on "New entry." So we have the ability to update the database, including the Live database! We're currently in our test database, but if you have a deployed application, you will also have a Live database. This is something you wouldn't really do in your Live database because it has Live data, but we're doing this now in our test database just so we have some data to play with, because a table and a repeating group will only render, will only show if there is data in the database. So we're just going to set up some dummy data before we get around to actually creating workflows to create data as a user would.

So for creating a record of type "Job," we already have a Company, and Bubble is saying "Type a Company name..." in the placeholder. So here's Orbit, I just typed O-r-b. Let's set Live to "yes." What about "No-code Engineer" for the job title? Popular job title at the moment. For the description, we're just going to keep this short: "Here is a description." We're going to come back to Salary. For the Term, let's say "Full time." Now for the Expiry date, and if I just click inside or if I hover over this date field, Bubble is displaying the date format back to us. So we have MM, DD, YYYY, then we have the hour, minutes, and whether it is AM or PM. So follow along!

We could set this to expire at any point. So let's just say, for me, it's currently the 15th of March, 2024, I'm going to say 04 for April, 25 for the day, 2024, and I'm going to say 10:00, am, 10:00 in the morning on the 25th of April, 2024. Depending on what date it is for you today, you possibly want to set this in the future, so just add a month from the current date. So when it comes to numeric ranges for salaries, this is something we can't actually populate in this particular manner, so we're going to leave that one for now. Okay, we have something in the database.

Let's head over to the table and start referencing these fields. Okay, please grab a text element and then drop it into the first cell. We're going to type "Job title" in the Appearance tab and we're going to change the style to Body Small. We will remove the min width and the min height, and we'll move the vertical alignment to the center.

Now we're going to click back onto the text "Job Title" and we're going to copy and paste it into the next few columns. Copy, command+C, and then command+V on my Mac. Okay, once that is pasted, we'll change this one to "Term." I'm going to do this again. Paste. This one will be "Location," and check this out: we need a few more columns. So I'm just going to right-click on this particular column and click, "Add column to right." I'm going to do the same thing again, add to the right. And one more time. Now I'm going to go back to the text element for location, command+C and command+V, and do it in the other three cells. Those cells are obviously missing some padding, so let's sort that out. On the Layout tab, what I'm going to do is highlight all three together, and then I'm going to choose 24 left and right padding. All right, some batch design work there.

Let's now change column D to "Start salary," and let's change the next one to "Applied." Basically, with this field, we're going to have a data type called Applications. When a regular user applies for a job that creates a new run in the database called an application, and that application is tied to a particular job. And then we can track how many applications have been made, the statuses, who is the person that made the application, their CV will be attached to the application, and so forth.

Then the last column will be "Posted," and we'll have the date that that went live. Actually, I want one more column, so right-click on Column F, add a column to the right, and for this, I'm going to add a Material Icon. But actually, we'll add a Material Icon in the first row a bit later on.

Okay, so you can see that all of the columns are currently distributed evenly, and we're going to be amending this because there will be some columns that need more width, such as a Job title, and then there will be other ones that don't need a lot of width, such as Applied, because Applied will just be a number. That number might be 1, it might be 100, but it's not going to be many characters. The posted date is always going to be in date format that will be consistent, so we can get a little bit granular with how we set up the widths of these particular columns.

Now I'd like you to click on Text Job title. I'm going to copy this and I'm going to paste it in the cell below, and it's at this stage where we want to dynamically feed data back into our table. So I'm clicking on this area down here on the table. You can also click on the top left-hand corner of the table to bring up the Property editor for the table. And now we can set our "Type of content" to our Job. And we're simply going to Do a search for a Job in the data source, and obviously, that expression, Search for a job, means that it's going to bring back all of the jobs from the database, but we will be using constraints in the next lesson to be able to make sure that the job we're bringing back belong to the current page's company.

So now that we have some dynamic expressions set up and accurately referencing the database, we can insert dynamic data in the Appearance tab of the text element in the first row. We're going to choose "Current row's Job's Title." Okay, don't worry that it's wrapped to two lines here, we will be resolving that. I'm going to add a canvas placeholder here. Canvas placeholder just gives us more of a realistic representation of what the actual data looks like, it overrides this dynamic expression just in Editor view. I'm going to write "No-code engineer" in the Canvas placeholder. It's the same title as what's in the database, but we will be displaying the database version once we preview this page.

Okay, I'm going to copy this and I'm going to paste it into the cell to the right. I'm going to click on "Title" of this copied text, because it's always going to be Current row's Job's, that is the data type, that is the only data that we can point to in this table because we set it up that way. Now we're going to find "Term" instead of "Title" and then it's the display of the Term, and that display will say either Full time or Part time. But let's add a canvas placeholder.

For Location, I'm going to paste that back into the row to the right again, and I'm going to find "Location." It looks like we didn't actually create Location. That's fine. In this particular view, let's create a new field. We're going to call this "Location." In the field type, we're going to be referencing an Option set's Location, and that also includes the ability for a job to be remote. Then we're going to show the display. For the Canvas placeholder, let's just add New York.

All right, let's go over to the "Start salary" column. I can see that again, I'm missing my left and right padding here. So I'm going to hold down shift, highlight all of these columns to the right, and then on the Layout tab, choose 24 and 24. Fantastic. Now I can go back to my Start salary and let's have a look at what options are available to us here. I'm just going to clear out this expression. So I'm going to select "Current row's Job's Salary," and look at these new options that Bubble has given us: we have a min, max, an average between these two numbers, we have overlapping, greater than... very powerful stuff. We're simply just going to choose the ":min" in this instance. Nothing's going to show because there's nothing in the database, but we may as well just go ahead and format this as well. So now if I click ":formatted as," Bubble says, do you want to format this as a number? And we can add decimal places, etc. We're actually going to format this as a currency, how great is that? And now we can choose a thousand separator, and we can choose the currency we'd like. So I'm going to say US dollars. I'm going to leave the decimal place because these are going to be large numbers such as $60,000. I'm going to close the window, and then I'm just going to type in a canvas placeholder of $60,000.

I'm going to copy and paste this text element into the first row of the "Applied" column, and I'm going to right-click and clear expression. For now, we're just going to drop in the number 12 in the Appearance tab because we're going to be pulling this number from a separate data type called Applications that doesn't yet exist, so we'll just use a placeholder. I'm going to copy and paste this text element into the first cell of the "Posted" column. I'm going to remove the 12. I'm going to add some dynamic data here. This will also start with "Current row's Job's," and by default, Bubble always has a creation date. So let's choose "Creation Date." Now, earlier on, I talked about a numeric field enables different formatting to text field. Well, this is now a date field, so now we've got some more or different formatting options. And we can see some operators down here: date range, a max date, min date. We can manipulate date, add hours or subtract hours, and so forth. But for now, I just want to format a date. And here are the different format types. We also have the ability to create a custom display as well. But we can just say, (and yours will actually show the current date) so for me, it's March 15th. Therefore, Bubble is showing me what a March 15th date formatting looks like. And in the Canvas placeholder, I'm going to type "Mar, 15, 2024." You type your abbreviated date in the canvas placeholder.

Now I'm going to grab a Material Icon, and I'm going to drop the Material Icon into the first row cell of final column. I'm going to type "vert" in the icon search and I'm going to find this icon here called "more_vert_outline." Let's just change the color to the charcoal color, and then let's change the width and height to 24 by 24. Once you've done that, I want you to vertically align in the center. And basically, this is a clickable icon that will then display data into an existing popup to be able to edit Job data.

The last thing I'll do on this Group down here is just set a fixed width. Okay, let's try a fixed width of 72. And that looks pretty good. Fantastic. Got through a lot in that lesson, and I'll see you in the next one.