Section 5 (Lesson 1/8): This section focuses on the search and job pages. First, we’ll create a search page where candidates can view, search for, and filter their job results. Then we’ll build a job display page where candidates can view more job data and apply to jobs.
You’ll also learn about:
Parameter constraints: Learn how to integrate page parameters into the repeating group’s search constraints.
Combining multiple constraint types: We’ll create logic that combines a text input element with two dropdown elements to form a rich search UI.
Page data: Learn how to work with page data to display job data on the job page.
Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...
Bubble editor: ➡ https://bubble.io/page?type=page&name...
Transcript
Now that we have the ability to create jobs, we're going to shift our attention to the job search and the job display pages. The core features of the section revolve around repeating groups to display our job lists, filters and search boxes to narrow our job results, and we'll also spend a fair bit of time on the responsive design to ensure a great user experience. Let's dive in!
So here's our search page. Lovely design. We can see in this section over here, we have our search, select term, and select location. So if I were to search for "Brand," hit search, we can see that it filters the results. We have Full time and Part time options for term, so I can select "Part-time," search again, and then we're down to one result. If I select location, say Los Angeles, this is in San Francisco, we have no results, and we have this null data group design down here. Then I can go ahead and reset as well.
Now, if I click on one of these cards, so this is basically a repeating group, we have nine results. If I click on one of these cards, it takes me to the job display page, and this is where someone can actually apply. Now, we're going to deal with the application in a later section, but just so you know, you can write a cover letter and you can upload a CV as well. One more piece of functionality that we can utilize is the ability to bookmark jobs. Now, you have to be logged in as a candidate to be able to utilize this feature.
Let's have a look at mobile phone widths. Head down to 320 px. You can see that the text has shrunk in size. This is now stacked in a column layout, and the design here has been adapted very slightly.
Okay, so super fun section! A lot of great design work we're going to get into, as well as filtering and displaying. Let's jump into the next lesson!