Section 6 (Lesson 5/9): In this lesson, we’re going to design the job application table to display jobs that the candidate has applied to. We’ll also set up a new data type called “Application,” which will be created when a candidate applies to a job.

We’ll be covering:

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

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

So another refactoring process in this lesson, and that is for the table, we need a way to display the job applications that Peter, our candidate, has made. So let's jump in.

So here I'm in the demo app. We've got the company logo, company name, and these other fields. This one's pretty cool, pending, because we're going to be using conditionals to dynamically change the word "Pending" to "Accepted" or "Declined," along with some different colors as well. Then lastly, we have a little element here to take us to the actual job page so that Peter can have another look or remind himself about which job that he's applied for.

Let's jump into the Editor. Okay, so currently this table is set to a type of content of Job. But what we need to do is show a new type of data called "Applications." So we need to go ahead and create that. So head over to Data, Data types, and then type in "Application" singular, and then create. And let's create some fields!

So the first field we're going to create is for a User, so we'll say that this is a "Candidate" and that it's of type User. And this is so we can track which candidate applied for this job. Create. Now we need a "Company" field. Company is of type Company. This will help us with our privacy rules to make sure that only two people or two entities can view this job application, and that is the creator of the job application, so the Current User, Peter, in this instance, as well as the Company that they're applying to. So only those two people are allowed to see this job application.

I'm going to create a "Cover note" field of type text that will be coming in from a Multiline Input. Of course, an application needs to be tied to a "Job" as well that is of type Job. And we'll be using the Job and the Candidate, which is a user, those two fields, to be able to match a candidate with a particular job, and to know that they've already applied for a job as well, and that they can't reapply when there's already a pending application.

And we'll add a field like "Shortlisted". And this is actually going to be a yes/no field. The functionality that will be enabled by "Shortlisted" is for a company user such as Hana to be able to shortlist an application pertaining to a particular job because the job is going to get many applications. So this is a way for a company to be able to shortlist, give a little checkmark to be able to create a narrow view of applications that they like.

Now we need an application status. So this is something we need to create as an option set. So let's create a new Option set called "Application Status" and then create. We're going to have "Pending," "Successful," or "Declined." This should be enough to get us going.

Okay, so now we can say on Table jobs, click on the top left-hand corner to bring up the Property Editor, and let's change this type of content to an Application. For data source, we're going to search for Applications. And now we need to match an Application with the User. So we're going to say that the "Candidate = Current User."

So let's just cover again what a server constraint is. And a server constraint allows us to filter or create a filter on the server. So if we didn't have a search constraint, Bubble will bring back all of the applications from Workplace back into the user's browser. There might be one million, who knows? But by using a server constraint that says "Candidate = Current User," Bubble on the server-side will go quickly scan all the applications and then only bring back the ones with a match: "Candidate = Current User," so the ones that Peter has created himself. And let's sort by in this search. I guess we could sort by the Created Date of the actual Application, where most recent is yes so "Descending" is "yes". Now we are not going to ignore empty constraints, we always need this constraint in here. And close. Fantastic.

So now we can sort out our columns on Table jobs. So I'm going to right-click on Column A and choose "Add column to left." This will be a company's logo. So let's go grab an image. First of all, let's just sort out on the Layout tab, let's just sort out the left and right padding of 24 px and 24 px.

Now we can grab an Image element and just draw it inside. Let's first sort out the shape so I want this to be 40 px by 40 px. I'm going to check to keep element aspect ratio fixed and then push it to the center. Let's change this naming to "Image Logo" and now we can feed through the data on the Appearance tab. In the dynamic image, this is basically going to be the "Current row's Application's Company's Logo." We're going to zoom to cut the shape. Then we're going to scroll down and choose 8 in the roundness.

I'm going to use a canvas placeholder here, so go ahead and upload any logo you like. Maybe just use Orbit's actually, because it'll be consistent with mine (Orbit.svg).

Okay, so this column, this will always be the same shape, which means that on this column A, if we go to the Layout tab, let's just say that it's fit width to content in terms of the horizontal space. It'll always be consistent.

Okay, this next column here needs to be "Company," so the Company name. And then in the cell, we can change this to "Current row's Application's Company's Name." Okay, let's use a placeholder of "Orbit" in here. And I realized actually for a test company, I should have chosen a longer name. It's better to always look for edge cases when you're designing, so if they used a much longer name, then it would be able to catch those edge cases a bit more easily. Anyway, my mistake. Let's push on.

Next column will be "Job title" instead of Term. Then this will be the "Current row's Application's Job's Title." And let's say "No-code developer" for this placeholder. And we have "Term" as the next column. And now for this first cell's Appearance tab, we're going to say "Current row's Application's Job's Term's Display," since Term is an Option set. With the canvas placeholder, I'm going to say "Full time."

So starting salary is something we want in the next column. So let's say "Current row's Application's Job's Salary:min:formatted as $1,029." We format as currency, no decimal place because it's a large number, and then USD with a thousand separator. Looking good.

The next column will be called "Status." And this is now the status of this application. And we just created this. So it's the Current row's Application's... so we created the Option set, but not the field. That's fine. Let's head over back to the Data tab and then go look for Application. And now we're going we click to add a field, and we're going to type in "Status." We're going to then attach to the "Application status" Option Set, Create.

Back to the Design, back to the table, now we can just reference this new status's display ("Current row's Application's Status's Display"). An example of that, let's use one of the longer ones for the placeholder. No, actually, let's use "Pending" because that's where I want to start my design work, with "Pending". We're going to come back and I can see I need more space in here. We'll come back and finish the design soon.

This next column will be "Applied," and that's going to be the creation date. So Bubble's actually done that for us. And then this icon I'd like to change to an arrow. And the arrow I'm looking for is this one here, it's like a 45-degree angle. So more_vert_outline.

And while we're on this arrow, let's start/edit the workflow. What we're going to say is, Navigate --> Go to page, and this will go to the job page. The job page has page data. It needs to know what job should we display on the job page: well, the "Current row's Application's Job." And let's actually open this in a new tab as well.

So you might be asking yourself, well, why didn't we use a link element, Greg? You've told me over and over link elements, that's how Google knows how your page is all tied together. That's because this is behind a login. Okay, so Google doesn't know that this page even exists. So I'm just using a clickable icon.

Okay, let's sort out the spacing here. Column B, let's have a look at the layout. Let's go to Column C. This is naturally going to go to two rows, most probably. Let's look at Column D. I'm going to use a fixed width of 150 px, which is currently set. Column E. I think that's enough. I can fit two more zeros in there. Not that it would ever get there. Okay, we need more space here on Column F. What I'm actually going to do here is try 124 px, and then I'm just going to type in the longest word here, which is... did I say Successful? I should really say "Accepted."

Let's go I'm going to change that. On the Data tab, Option Sets, head down to Application Status and call this "Accepted." I'm doing this because I actually want these words to be a similar length. It just looks a bit nicer on the design for that. Okay, so that will actually fit in. That's fine.

And then for the last column ("Applied"), there's too much space here, so let's close this down slightly. So instead of 160 px, let's use 140 px. And then that actually increases this. It doesn't have a fixed width. Yeah, I think I'm happy with that.

Okay, and then obviously we have, if I close down Group Table, we have the Group No data, so please open that up for me, please. Let's say "No applications found" and maybe we shouldn't say "for this search query" because at the very beginning, this will show when no applications have been made, so no applications found, which it works both ways, whether it's a search or just standard non-search display. And that's pointing to the "Table job's list of Applications:count < 1," which means it's zero.

And by the way, make sure to sign up to the Bubble forum at forum.bubble.io. I'm smiling because this just reminds me, so this particular method of trying to determine if data is returned. I've done count is less than one. There's been a massive debate. Some really good native developers who are also Bubble developers have done some research and testing here because there are multiple ways to determine this. We could do, count < 1, which equals zero. We could do, count is 0, which is zero. We could do, first item is not empty or first item is empty. There are many different ways of doing this. And developers have spent a lot of time trying to figure out which is the fastest in terms of workload units and power, which is the least, all sorts there. So go ahead and sign up to the Bubble Forum because it's absolutely treasure trove of information. If you have a problem, chances are that one of the other few million developers would have had that problem before as well. That's a place to look and that's a place to ask.

And then this text up here, let's make this dynamic (where it says "12 results"). So it looks like it is, "Table job's List of Applications:count results". All right, we're in good shape.

Let's also sort out the search. That'll be fun. Let's edit the workflow on the search. And this currently says when "Get query from page URL is empty," then we need to go to the candidate page. Let's clear this "Data to send" expression. We don't need it, we don't have page data. But the query is the "Input Job filter's value," so I'm going to change it to candidate on the element itself and then we also have a way of clearing it. So we're going to reset. So all the stuff looks good.

On Step 2 on the orange event, let's just remove the expression for Data to send. We don't need data. And then this query would go back to instead of "job-posts," it would be "applications".

Okay, I just want to change the wording for "Search for a job," on Input Job filter. First change this name to "Input Application filter" and the placeholder can be "Search for an application." And that should work just fine.

Okay, so on the table, let's just add this to the constraint in the Search for Applications in data source. To enable the search to happen, Bubble needs a field attached to an Application that is a text field. Currently, the Job Title or the Company, both of those are set to data types, so we can't actually get inside these to search.

So what we're going to do is this. On the data type for an Application, we're going to add a new field called "Job title" of type text and then "Company name", that's going to be text as well. And this just will enable us to search by these two fields.

So what we can now say is, Search for Applications where "Any field contains Get query from page URL." We can Because the database has those two text fields, we can say, Any field contains Get data from page URL where the parameter name is "query" of type text. And the last thing we need to do is check the box to ignore empty constraints. Because this new constraint will be empty by default, which means nothing will show in the table. But we need something showing in the table when there is data to show. Okay, so that solves that problem. So when it comes to creating the Application data type, we need to save those extra fields.

So that's the table sorted, and in the next lesson, we're going to jump into the job page and actually build the popup so that Peter can apply for a job. I'll see you in the next lesson.