© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
ADVANCED REPEATER FILTERING
STEP 1: ADD DYNAMIC TEXT FILTER WHEN TEXT FIELD HAS TEXT
In the repeater training document, open the page named "Advanced Filtering". On the canvas is a three-by-three repeater displaying a selection of books, and a text field widget that we'll be using to filter the repeater. As the text field's label implies, users will be able to search (filter) by either author name or book title. Let's begin by setting up the author filter.
Select the "Search Box" text field widget and double-click "OnTextChange" to give it a new OnTextChange case.
At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.
In the Condition Builder, change the third dropdown from "equals" to "does not equal" so that the condition description reads "if text on This does not equal """. This condition will evaluate to "true" when the "Search Box" text field is not blank, i.e., when the user has entered text into it in the web browser.
Click "OK" to close the Condition Builder.
STEP 5: PREVIEW
Preview the page in your web browser and try searching for one of the book titles in the "Books" repeater's dataset. Then, clear the text field and search for an author. Both of these search options should work.
Back in the Case Editor, choose the "Add Filter" action under "Repeaters". Under "Configure actions", check the "Books" repeater widget.
At the bottom of the right column, leave "Remove other filters" checked and, if you would like, enter a name for this filter. Then, enter "[[Item.Author.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]]" (without quotes) in the "Rule" field.
Click "OK" to close the Case Editor.
STEP 2: REMOVE FILTER WHEN TEXT FIELD IS BLANK
With the "Search Box" text field widget still selected, double-click "OnTextChange" again in the Properties tab of the Inspector to give it a second OnTextChange case.
In the Case Editor, choose the "Remove Filter" action under "Repeaters". Under "Configure actions", check the "Books" repeater widget.
At the bottom of the right column, check the box for "Remove all filters". Then, click "OK" to close the Case Editor.
Notice that even though we didn't set up a condition for this case, it shows the condition "Else If True". This case will fire if the first case's condition doesn't pass, i.e., when the "Search Box" text field is blank again in the web browser.
STEP 3: PREVIEW
Preview the page in your web browser and try searching for one of the authors in the "Books" repeater's dataset. Note that if you used ">= 0" in the filter rule, you should be able to search by either the first or last name. If you used "== 0", however, you will have to begin with the first name since the first names are listed first in the "Author" dataset column.
Then, clear the text field to remove the filter from the repeater.
Dynamically filter repeater widgets based on text the user types into a text field in the web browser. Use the logical operators "&&" (and) and "||" (or) to create compound filter rule expressions that can evaluate multiple criteria at once.
If you aren't yet familiar with the repeater widget, you can read about its functionality and uses in our Repeater Widgets reference guide. You can also get started with our Repeater Basics tutorials.
STEP 0: DOWNLOAD THE REPEATER TRAINING FILE
If you don't already have it, download AxureRepeaterTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure repeater training module.
There's a lot going on in this expression, so let's break it down piece by piece.
"Item.Author" is the dataset column whose values the filter will be looking at.
"This.text" is Axure RP notation that refers to the text on the widget whose event is currently firing, in this case the "Search Box" text field.
">= 0" means that this expression will evaluate to "true" if the value returned by the indexOf() method is greater than or equal to the number 0, i.e., if the search value is found anywhere in the searched string. (If you would like the search to only match from the beginning of the searched string, change ">= 0" to "== 0".)
Altogether, this value expression will find all rows whose "Author" column contains the text entered in the "Search Box" text field, and the filter will display only those rows.
STEP 4: CREATE COMPOUND FILTER RULE
Back in Axure RP, select the "Search Box" text field widget again and double-click "Case 1" under "OnTextChange" in the Properties tab of the Inspector to edit the case's actions.
In the Case Editor, select the existing Add Filter action under "Organize actions". At the bottom of the right column, click the "fx" button to the right of the "Rule" field to open the Edit Value dialog.
In the top field of the dialog, place your cursor just inside the double closed square brackets, "]]". Then, type a space followed by two pipe characters, "||", to create the "or" logical operator. (The pipe character is generally the [Shift] option for the key above the [Enter] key. You can also select this operator by clicking "Insert Variable or Function" and then scrolling down to the bottom of the "Boolean" section in that menu.) This will allow us to introduce another expression to be evaluated if the current expression returns "false".
After the "or" operator, enter a space followed by "Item.Title.toLowerCase().indexOf(This.text.toLowerCase()) >= 0" (without quotes). Note that this expression is the same as the first, except this one looks at the dataset's "Title" column instead of the "Author" column.
The entire filter rule expression should now read "[[Item.Author.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.Title.toLowerCase().indexOf(This.text.toLowerCase()) >= 0]]". This will find all rows whose "Author" or "Title" columns contain the text entered in the "Search Box" text field, and the filter will display only those rows. Effectively, this allows the user to search by either author or title using the same search box.
Click "OK" to close the Edit Value dialog, and then click "OK" again to close the Case Editor.
Note: You can view all objects and methods available in Axure RP by browsing through the "Insert Variable or Function" menu in the Edit Value dialog.