Late last year, I did a presentation at a local conference where I did a live build of Zone Lookup in Experience Builder. And I made a public demo application to go along with it. And almost immediately after, somebody moved the referenced data and the application broke. I finally got around to fixing it and while I was at it, I thought let's show how to build a Reset All Filters Button and some other filtering tricks that I don't think we've covered before.
This application is designed to find all the schools in a school district. You could imagine it being used by parents moving into the area and wanting to learn about the local schools. These parents probably don't really care about all the schools in the district. They want to know about the school their kid is going to. They probably want to filter the schools by grade. They might also want to know how many students are at their school. By strange coincidence, these are fields in this dataset I don't control. Weird how that works. Let's build some filters for these values.
The Welcoming First Section: Making Some Filters
We'll start with our grade level filter. It's good practice to start by taking a look at how the data is actually structured. This dataset has numbered grades 1 through 12 with leading zeros for the single digit values plus the letters EE, PK and KG for the grades lower than one. These values are in a single column with all the grades offered by a school separated by spaces. It all looks something like this:

I don't want to offer a button or menu option for every single possible value. There's just too many of them and the user experience would be confusing and dreadful. Maybe I could make buttons for elementary, middle and high school? But those columns aren't in my dataset and the districts don't agree on when elementary school ends and when high school begins. What I really want to do is offer a button for each grade. Is there a way to go from this data to those buttons?
We can get there by using the Contains option. I'll select data from my Grades column and pick the Contains and Multiple (Predefined) options*. I'll hit the Gear Button to Choose Input Style as the Pill Selector and to remove the Label. (I plan to build my own label later.)

Now, I'll open up the Predefine Multiple Values menu to build my buttons and soon I run into a problem. See, while there are schools that just do Early Education (EE), nobody did me the favor of building a third grade only school just so it would make this dataset easier for me to work with. It was very inconsiderate of them. But there is a trick, you can type whatever you want in that Value column. (For the first Value, you may need to pick something in your data and then you should be able to click on the input and change it to something else.) The values don't have to be in your dataset at all. Let's say you knew a school district was going to start offering a thirteenth grade next year, you could put that in as an option now to future proof your application. So, I type in Values and Labels for all the Grades and I've made my Filters.

*In an earlier attempt at this build, I used the Unique (Predefined) filter option and was stumped for over an hour trying to get it to elegantly handle allowing multiple choices.
To set up a Students filter, I used several of Is Greater Than filters with the Predefined Unique Value option. They look something like this.

So, a little behind the scenes here. I started this post with the intention of showing off the Clear Data Filters Action and, in order to do that, I first had to make some filters and I thought I'd step through that process as some bonus content. Everything up to this point was written without actually trying the Clear Data Filters Action. And then I tried it and I almost scrapped this entire post. I'm going to play this out because I think there is some useful information in the first section and the future third section and I assume these problems will be fixed in a future release, but you have now entered...
The Forbidden Second Section: Making A Clear All Filters Button
Making a Clear All Filters Button is quite easy. First add a Button Widget, give it some appropriate Text like Clear Filters, and head over to the Action Tab. Now, Add A Trigger > Button Click > Data > Clear Data Filters and you have a Clear All Filters Button. Now, I'll do a little testing...five seconds later...I found a couple issues with this approach.
The second problem I found was that using the default All Data option in the Action Settings did not actually clear the filtering for the Near Me Output Datasource. I was able to fix this issue by switching to Customize and explicitly targeting the Datasources, like this...

Not ideal, but simple enough to fix. But the first problem, oh you should just see the first problem for yourself...
Yeah...I don't think that is supposed to happen. When I click my Clear Filters Button, the Filter Buttons just vanish. For the record, only Filters that are actively filtering something appear to disappear. Maybe, you get different results if you are using a Filter with a different Input Style? But for the Pill Selector style, at least, I can't recommend you actually use this feature until this bug gets worked out.
I'm just going to throw that Clear Filters Button in the Pending List and welcome you back to...
The Permitted Third Section: Styling It Up
At this point, I have some unlabeled Filters taking up a large portion of screen real estate at all times. This is not great. Let's make this all a bit prettier.
First, I'll get a Column Widget, set the Gap to 0px and, in the Style Tab, give it a white Background Fill. Then, I'll put a Text Widget inside it. I'll set my Text Format to Heading 2 (for screen reader compatibility) and then switch the Font Size to 16px to get it to the size I actually want and Center the text. I'll write Minimum Number of Students: in the text box and go over to the Style Tab to set the Height to Auto.
Now, I drag in the Filter Widget with the school size and set it's Height to Auto. Then Duplicate, the Text Widget I just made and drag it below the Filter Widget. And change the text to Grade Levels:. Next, I'll drag the grade level Filter Widget into the Column and set it's Height to Auto, as well.
Lastly, I'll go back to the Column Widget and set it's Height to Auto. Then, I'll use the drag handles to slide the Width back and forth. When I like how it looks, I'll switch the Width from percentage to pixels, so my users will see it this size regardless of the size of their screen. In a few clicks, I've made an user interface I feel pretty ok about and one I think is nicer than what I would have got out of the Filter Widget alone.

But, I'm not done. It still takes up too much room on my screen. This is a secondary function that should not take up this much focus. How can I hid these filters til they are actually needed? Widget Controller? Yeah, that could work, but I think a big text based button makes more sense in this app and I can't get that from a standard Widget Controller. Hidden Widget Controller? I like your style, but I think the best choice for this application is actually an Accordion. An Accordion gives us the ability to give this a nice text based button and hides the filters away without the slightly jarring experience of them appearing from nowhere that we would get with the Widget Controller options.
Before I drag in the Accordion Widget, I'm going to write down the Width of my Column (380px). I will need that later and it's about to get wiped out. Now, add in the Accordion and set it to the first Quick Style. This style adds 4px of Padding and a 1px Border to the Column Widget, so I'll set the Width of the Accordion to 390px to compensate for this added stuff. Then, I'll drag the Column into the Accordion.
One last problem, this..

We can fix that. Just give the Column Widget a new Title and Icon. I think the GeocodingFilled Icon under the Data menu has a reasonably schoolish look to it. And done, a decently looking set of filters the user can hide away when they don't need.

Update: With a promised fix to the Clear Filters Button coming, I'll drag it out of the Pending List and into the Column with my Filters. I'll style it by starting with the red Quick Style, then customize it by adding a reset icon, increasing the Font and Icon Size to 20px, making the text bold, and setting the Height to Auto.
