Multi-column facet filters

rp-7

#1

Hi all!

I’ve been playing with facet filters, which is a moderately frequent topic on this forum, trying to come up with a manageable way to use such filters on any number of columns in a repeater. And I’ve found a reasonable solution!

What are facet filters? Facet filters normally return all items if no filter is selected, or return only those items checked.

Here is a facet filter from Macy’s website showing the “Sleepwear Type” facet, among many other facets that you can choose from in your sleepwear quest:


Leaving all of the above filters unchecked would show all sleepwear types, but here we are requesting to see just Robes and Pants. Other facets, such as Color, could further filter down which pants and robes we see.

Here is my solution, which easily extends to any number of columns. It requires no marking of rows or modification of the repeater’s dataset, and there is just one filter per facet, regardless of how many categories a facet contains. These filters are defined just once, OnPageLoad.

Live sample (NOTE: there are THREE pages showing up to three facets)

File: facetfilters.rp (142 KB)


Multiple drop down lists filtered in repeater
Search repeater with dynamic filter
Filter records based on changing value of picklist for repeater. Also
#2

Thanks for posting this, @josephxbrick. I am learning a lot from you this week. I have a few questions that build on this logic.

Before reviewing your file in detail I had already set up an event where the row is marked if the user checks the checkbox, and unmarked if the user unchecks it. How can I set up facet filters using the marked rows for a particular column? Right now if I click a checkbox from Column A, the total number of items decreases, but if I check a box from Column B, the total starts to increase again, when I want it to go down. It should work like an OR within a column but AND between categories.

As an added complication, I am dealing with a design constraint where the filters are not applied unless the user clicks an “Apply Filters” button, so I need to associate the filters with the OnClick event for that button instead of page load.


#3

Hi!

You can still set the filter on page load. You just need to reassert the filter with the Apply Filters button.

I can’t quite picture what you are trying to achieve with your checkboxes (which sound like they are within the repeater row rather than outside of the repeater).

If X means checked and 0 means unchecked, with Column A being in first position and Column B second, which rows below would survive the filtering and why?

00
X0
0X
XX


#4

Checkboxes are outside the repeater. They are in one dynamic panel and the repeater is in another, on the same page.

I’m trying to follow your example from the file. But since the filter needs to be triggered on button click rather than on checkbox selection, I want to mark rows rather than update them on the fly. When I switch the action to mark rows I am not allowed to use the same syntax as in your file. How would you set up the function for row marking?


#5

Hi!

You don’t need a marked row solution - you can use the same solution (for filtering) that my sample uses. You just need to change where you force the filter to re-evaluate.

In my original file, checking any checkbox forces the filter to re-evaluate because in the OnSelectChange handler there is a command (a do-nothing update) that reasserts the filter. Remove that command from each checkbox and put it into your Apply button instead.

I made a different version of the sample (see the 2-facet-filters page) that uses an apply button.

Live sample

File: facetfilters (1).rp (145 KB)


#6

Thank you, Joseph! This works great. I had to tweak some of the filters because they need to use “contains” instead of equals but I was able to get it working.

This did introduce a new bug though and I’m not sure how to address it. I have pagination functions in the footer. It displays [[LVAR1.pageIndex]] of [[LVAR1.pageCount]].

Now that I have the filters in place, I am seeing the actual function text on page load until a filter is applied. At that point it displays as expected. Any suggestions on how to fix this?

I also have an item count on the page and that works fine. It’s just the pagination that’s a problem.


#7

Hi!

Where is the set text command for the pagination footer?



#8

Hi!

Where is the Set Text command for the pagination footer? I.e., in what kind of event associated with which widget?


#9

It’s part of a footer widget that is a dynamic panel inside a larger dynamic panel.
The action applies to the specific text widget:
OnLoad, set text equal to [[LVAR1.pageIndex]] of [[LVAR1.pageCount]]


#10

Hi!

You need to associate the LVAR1 local variable with your repeater widget in the fx dialog:



#11

I am learning so much. Thank you!


#12

@josephxbrick, I am trying this technique again in a new file. When I add the filters OnPageLoad, nothing loads in the repeater. I have checked the filter text and it all seems to match what’s in the repeater. Any suggestions? I have some other variables that appear on page load coming from a search box, but don’t see why that would matter.


#13

Hi, I have a followup question. I’m using the same facet filtering method in a new file and running into a problem. The filters need to load with “IfTrue” status for the Apply Filters button to work. However, if the first filter loads with “IfTrue” then no data in the repeater loads. The repeater data only loads if I use “ElseIfTrue” – but then I can’t apply that filter. I think the problem might be related to other cases that I have set up on page load to enable a keyword search on specific fields. Any suggestions?



#14

How would you update this approach if you also needed to include a facet with a dropdown menu?


#15

Hi!

In your filter, instead of making local variables for the selected states of various checkboxes, you would make a single local variable that refers to selected option of your dropdown.

So for a “Rating” dropdown with these options:

Any
G
PG-13
R

… your filter would look like this, where LVAR_selectedOption is a local variable referring to the selected option of the dropdown:

[[ LVAR_selectedOption == ‘Any’ || (LVAR_selectedOption == ‘G’ && Item.rating == ‘G’) ||
(LVAR_selectedOption == ‘PG-13’ && Item.rating == ‘PG-13’) || (LVAR_selectedOption == ‘R’ && Item.rating == ‘R’) ]]

In the OnSelectionChange interaction of the dropdown, you would force re-evaluation of the filters, just like you do in the checkboxes.

If you have multiple dropdowns you want to use for filtering, you would make one filter per dropdown, just like the example above using one filter per set of checkboxes.


#16

Hello

Can anyone take a look at the attached file and help me in fixing the facet filter for “Accred Status” column.

Thanks
JB
facetfilters_Bridge.rp (193 KB)


#17

Hi!

This would follow the same pattern as the other three filters. The instructions on the first page go through how everything works, though if there is any part of it that is confusing, please let me know!

I added the fourth filter, which you can find in OnPageLoad.

facetfilters_Bridge.rp (194 KB)


#18

Thanks Joseph

Regards
JB


#19

Hi josephxbrick, thanks for your post. The solution looks exactly what I was searching for. Do you think you can provide a version for 7?
Thanks!


#20

How could you do this with a shape or image’s selected state vs a checkbox. i.e. clicking an icon to apply a filter?