How do I filter a Repeater multiple times while keeping marked items persistent?

#1

Good morning Axure friends,

I hope the title accurately reflects what I’m trying to do. I have the first half figured out, but I’m wrestling with understanding the logic behind how repeaters, marked items and filters work together.

Here’s a very simple example of what I’m trying to do:

I’m creating a store front for a car dealership. My repeater consists of the following data that I want to be able to filter on based on:

VehicleType…Colour
Car…Black
Car …Red
Car …Sliver
SUV…Black
SUV…Red
SUV …Sliver
Truck …Black
Truck…Red
Truck…Sliver

I have a drop-down to select the vehicle type, and toggle option selections to choose one or multiple colours.

The first part of loading the repeater table, I think I have. I’m sure there are many ways to do this, but what I’m doing is that I have a custom drop-down box for vehicle type and based on the selection, I set a Global Variable “VehicleType” to match the selection (car, SUV, truck).

When I load the page with the repeater, i have an OnPae\geLoad action to filter the repeater if the Item VehicleType equals the Global Variable value. That part is working ok.

Now I want to be able to select one, some or all of the colours and have the repeater update the filter without changing the vehicle type.

I have custom check boxes for each repeater row, and on selection, I’m setting the row as marked.

I have a UI toggle button for each colour, Red, Silver, Black.

What I’m struggling with is that on click of Red, for example, I want the repeater to filter the already marked results to show only the Red vehicles. But then, on click of the Silver UI button, I want to use the originally marked rows and show both Red and Silver vehicles … and if Red is then toggled off, the list would update to remove red and show only Silver.

I’m not sure of the correct syntax to do this, and I’m not finding this part intuitive, or maybe I’m just building it the wrong way.

My question boils down to: once I mark items in a repeater based on a column value, is it possible to keep those marked items persistent to continue to filter them, even if the filter causes those items to be removed from view from the repeater?

Sorry if this sounds convoluted … I’ve been trying a million ways to get it to work and just not making sense of it, if there’s a better approach, I’m all ears. :slight_smile:
Thanks!

-Jeremy

#2

It’s a bit hard to follow without being able to see an example in action, but remember that you can have multiple filters applied to a repeater. So you can have one filter for vehicle type, and another for colors. The results you see will be the combined filtered output from both those filters.

#3

Hi!

What you are trying to do is an example of facet filters. There’s a useful post on it here. I’d also acquaint yourself with local variables, as they are much handier than global ones in this situation. Read this post.

You’ll want one filter per “facet.” One of your facets is vehicle type, and the other facet is color type. Note: since you are defining more than one filter, be sure to uncheck the “delete other filters” checkbox when defining the second one.

The first one is easy. This assumes that LVAR_vehicle is a local variable referring to the selected option of the vehicle dropdown:

[[ Item.vehicle == LVAR_vehicle ]]

The second one is more complicated. You want all rows for the given vehicle to show when no color checkboxes are checked, red rows to show when the red checkbox is checked, and the same with blue and silver.

The important thing to know about filters is that they must always return TRUE or FALSE for a given row. If they evaluate to TRUE, the row shows up.

Your second filter looks like this, again using local variables for the selected values of the checkboxes. For example, LVAR_blue will be TRUE when the blue checkbox is checked.

[[ ( !LVAR_red && !LVAR_blue && !LVAR_silver ) || (LVAR_blue && Item.color == ‘blue’) || (LVAR_red && Item.color == ‘red’) || (LVAR_silver && Item.color == ‘silver’) ]]

Note that the whole filter could be rewritten like this, which may be easier to understand, but is quite a bit longer:

[[ ( LVAR_red != true && LVAR_blue != true && LVAR_silver != true ) || (LVAR_blue == true && Item.color == ‘blue’) || (LVAR_red == true && Item.color == ‘red’) || (LVAR_silver == true && Item.color == ‘silver’) ]]

(The != means ‘not equal,’ && means AND, and || means OR. Note that ‘true’ must be lower case, for whatever reason.)

So the first expression in parentheses says “Red is not checked and blue is not checked and silver is not checked.” The expression evaluates to TRUE when everything is unchecked, so the filter will be true for every row since it doesn’t depend on a row value.

(Since these expressions are OR’ed together, if any of them is true for a given row, then the whole filter is true for the given row.)

The other three expressions evaluate to true when the row has the color of the corresponding selected checkbox. The values in the expressions are case sensitive, so be sure to capitalize the color names (in quotes) if they are capitalized in your repeater.

Note that filters stay around once defined, so you can define these filters just once, e.g., in OnLoad (not OnItemLoad) of the repeater, or in OnPageLoad. (In the example they are defined in OnLoad of the repeater.)

You then just have to force them to re-evaluate when something changes. To do that you put a command in OnSelectChange of the dropdown and each checkbox. (You can set the repeater’s items per page unlimited, which will force the filters to rerun.)

Here is a sample file. Again, I’d encourage you to go through the facet filter file above.

Live sample

File: vehicle-facet-filters.rp (62.9 KB)

#4

@nkrisc & @josephxbrick thanks so much for your quick replies!

Joseph, I think you caught the essence of what I’m trying to do, and I follow the logic you are proposing. I just didn’t know how to structure the syntax for the string for the filter.

I haven’t tested this out on my data yet, but I get what you are saying and will try to get that working now.

I greatly appreciate your input, and I’ll follow-up if I have more questions.

Cheers,

-Jeremy

closed #5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.