UX Grid Filters: After initial filter is applied, how do I get subsequent filters to reduce options?
I am working with a grid with a large amount of data. After an initial filter is selected and the end user moves to further filter the data with a second filter, all available options are still shown. I was expecting to see the options in the second filter truncated to just the options possible after the first filter. For example, let's say the data shows various cities with only certain products available in each city. After I do an initial filter for city, the dropdown on the product filter stills shows all products, not just the products available in the selected city. Any thoughts?
Answers
-
There are a few ways to do this.
1. If you’re using pick lists for filters, you can use dependent drop-downs for filters and have the filters be a composite hierarchy. This generally works if you know e users filtering path, eg, City, then Product.
You do this by having a data-driven composite hierarchy get built whenever you update your data set.
2. Not for the faint of heart, you can do v1 but stray from the more-intuitive approach to dependent drop-downs mentioned in #1 and you can have data-driven logic (a formula) on a property of the Product list (of type City) that says “for the selected city (assumes a user has selected a city from a dropdown), if data exists for the selected city AND this product, return the value of the selected City. The benefit of this over #1 is you no longer need to build a composite hierarchy and can keep City and Product distinct — a few fewer actions to build.
3. Instead of filtering using pick lists, which some dislike because they only allow selection of single values, go for the Boolean approach.
Create 2 modules:- Input: City | Filter
- Input: City x Product | Filter
Each has a line item called “Show?”
If you check “Show?” for a City, show the data associated with it in your main grid with your data you’re displaying.
But with your second filter module, filter it on both the city you selected, and where Product data exists for that City.
The filter grids take up a bit more screen real estate but if you teach users to use the magnifying class to search within those filters grids, they’ll find these to be very powerful tools for filtering.
Let me know if this makes sense, and if you’d like a quick example just give me a shout.
Cheers,
Kevin
1 -
Awesome answer - thanks for the response! I worked through the option 3 you described above, and it is working. :)
However, I'm still noticing this: Even after filtering down the list in the grid, if the user clicks on the filter button in the upper right of the grid and goes filter further, all options (even those that have been filtered out) still show up. I've attached some images to hopefully help demonstrate what I'm describing.
0 -
Nice work man. Yeah, native filtering on the card looks to the data type of the line item, so your line item would have to be of data type "List | Subset" where the subset is driven by an action and some corresponding upstream logic that would limit the selectable values in the subset.
When I use approach #3, I typically disable filtering on the UX card, and require that users do all of their filtering via supporting cards I publish to the dashboard, to reduce confusion.
Does that make sense?
0
