Section 4 (Lesson 9/10): Now we’re going to learn about server side constraints and how to quickly filter our table to display a job query, such as searching for “developer” or “engineering” jobs.

We’ll be covering:

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

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

Okay, now I'm going to demonstrate how to build just a very simple search and filtering function so that we can basically filter our results by a keyword. Let's dive in.

The first thing I'd like you to do is go open up your Table jobs Property Editor. Okay, once you've done that, we have a data source: "Search for Jobs." Now we're going to add some some new constraints here. The first one being that the Company needs to equal the Current page's Company. This is important - if we don't stipulate this, Bubble will go and search all of the jobs (let's pretend that there are 100,000 jobs on this jobs board) and bring them all back to the page. The page will probably crash. In fact, I'm almost certain it will. So this is a server-side filter option. So when we make the request, Bubble is only going to bring back any job associated with Orbit, Hana's Company.

The second constraint is we're going to choose this "Any field" option down here. Okay, just follow with me for a second. Type the word "get," because we're going to get this search option from the URL. So click "Get data from page URL." I'm going to call this parameter name "query". (Just a creative choice, again, could be called "search".) And that's the second constraint: "Any field contains Get query from page URL."

So as is, Let me just show you on the frontend what it looks like. If I refresh the page, I'm getting nothing back here, and that is because we need to check the box for "Ignore empty constraints," because what this does is it ignores this constraint when there is no value. And currently, there is no value. We haven't set up the logic for this particular parameter just yet. So I'm going to check this. So by default, when a person lands on their dashboard, they will see all of the results because there is no query constraint value. There we go!

Now, check this out. At the end of the URL, I'm going to type "&'" and then the word "query=", and then I'm going to type in "developer". Check it out: two results. Okay, so we know that when query in the URL has a value, it's going to be filtering this table. If I remove the word "developer," we get all of our results back.

So what we need is a little button. Let's say, type "Search" in the Appearance tab. This is going to be, say, a secondary button. And on the Layout tab, I'm going to say, uncheck fixed width, remove min width, and fit width to content. Then I'm going to group the input with the search so we can group them in a row container. While I'm at it, I'm going to add some gap spacing of 12, I'm going to rename this to Group Search, and I'm going to remove the min height.

So to get the keyword that the person searches for into the URL parameter "query," we need to run a workflow for that. So we're going to add a workflow on Button Search. We're going to go to Navigation --> Go to Page. Now we're going to the same page, remember, we're just changing the parameters. We have page data, so Bubble is now reminding us to make sure to hook up the page data again in the "Data to send" field, which is a "Current page's Company." This is important. We first need to "Send current page parameters," so check that box, because we already have "?v=job-posts" so we want to retain that, so we're going to send that as well. But now we're going to send more parameters. We're going to add a parameter called "query" (that's the key), and the value is coming from that input filter: "Input Job filter's value." Let's try it. Let's try to search for "Bubble." Perfect! There we go. And if I delete it, hit return, it comes back.

So why don't we actually, on this Search button, when there is a value in the search bar, such as "Engineer," why don't we then change the function of this button from "Search" to "Clear" so a person can search at this button and then also just clear this input out. We also want to change the query at the top.

Okay, so we're going to split this search button's workflow. We're going to say "Only when Get query from page URL is empty." So that means we're searching for the first time. Okay, let's make this workflow green. Now we're going to copy and paste this event and change it to orange. We then want to change the last part of the expression to "is not empty." When that happens, we go to page, and we're going to uncheck "Send current page parameters," and I'm just going to change this key to v=job-posts. That takes us back to the original state of this particular URL structure.

Another thing we need to do is apply a condition to this button so we can change the text. So on the Conditional tab of Button Search, we're going to say, "When Get query from page URL is not empty," that's when the text is going to read "Clear".

Okay, let's try this. So currently you have query=Engineer, and if I go ahead and clear that, it's back to its original state. Let's try one more. I actually hit return on my keyboard at that point, that also worked, and then clear.

Okay, I just wanted you to look at this design down here quickly. All right, let's remove the "Set fixed number of repeating rows" on the Appearance tab of Row 1 (Repeating) in Table jobs. Just uncheck that, that will just grow as much as it needs to. We're not going to have time to cover pagination in this course, but check out the Bubble forum, check out YouTube, there are many, many courses and lessons, and there's lots of help around pagination and tables. On the Layout tab on Table jobs, I'm just going to remove the min height as well.

What we need to do next is sort out this Text 12 results. This can now be dynamic. So I'm going to highlight the "12" and I'm going to insert dynamic data. Dynamic data is coming from the tables so type the following in the Appearance tab: "Table job's List of Jobs:count" and then add the canvas placeholder back in.

Okay, but what about if there are no results? Let's test the UX here. Let's say something like a different company, like Figma. There are no results, okay? And we're displaying 0 results. We've still got the column headers here, but why don't we just add just something else here? Just a little group to say something like "No results have been found, please try search again."

So let's go grab a group for this, please. Grab a group, draw it beneath the table. Let's call this Group No data, otherwise known as a null state. We're going to have a Card Large style here. On the Layout tab, let's set the min height to about 250 px. We're going to drop in a Text element next. On the Appearance tab, we're going to type, "No jobs found for this search query." Looking good. Let's center-align that text on the Appearance tab, and then over on the Layout tab, we're going to remove the min width and the min height. Okay, and then back in Group No data, let's vertically align it in the container.

Why don't we add an icon? Grab a Material Icon, drop it inside. If I type in "work," I should find a briefcase with an outline icon. There it is there. Charcoal color, no roundness, and 24px by 24px.

All right, we want to highlight the text and Material Icon, put them in a group together, holding shift and then group them in a column container. We can call this "Group Content." Let's add some row gap spacing of 12px, and then grab this icon and just center-align it. On the height in the Layout tab, I'm just going to change this a little bit again. Let's make this 180px. Yeah, that's better.

All right, one more test and then we can take a break! So it's currently viewable, so what we need to do on the Layout tab of Group No data is is uncheck "Element is visible on page load" and check "Collapse when hidden" to remove that vertical height. When do we bring it back? When the results of the table basically equals 0. So on the Conditional tab, type "When Table job's List of Jobs:count < 1." (There are many ways you can write this. You can say when the count is equal to 0, then this element is visible. That's when you bring it back.)

I'm going to refresh again. So we can't see it at the moment, let's try searching "Figma" again. Nice and quick as well. You can also set a conditional to hide this header column if you'd like. I don't really mind it. The last thing we need to do is just clear out the search term Figma from this input when the clear button is clicked.

I'm going to go back to Button Search in the editor, click "Edit workflows" and on this orange event, we are going to add another step. I'm going to type in "Reset" so I can bring up "Reset a group/popup" and we're just simply going to point to the parent group holding both the parent group to the input in the button, which is called Group Search. I'm going to move that to step 1 because the final step in this workflow needs to be the "Go to page" action.

Let's try it! Okay, done the search. Now, when I hit the clear button, Figma has been removed from the input.

All right folks! Cleaning up, looking good, looking nice and snappy as well. Hope you enjoyed that, and I'll see you in the next one.