© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

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.

MORE RESOURCES

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

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.


".toLowerCase()" is a JavaScript string method that converts all letters in a string to lowercase. We're calling this method on the dataset values as well as the user-entered search text to make the search case-insensitive. (If you would like your search to be case-sensitive, remove both instances of this method from the expression.)


".indexOf()" is a JavaScript string method that searches the string it's called on—in this case the values in the dataset's "Author" column—for a particular value, provided in the parentheses—in this case the text in the text field. If the value is found, the method returns a number representing the starting index of the value in the searched string. (This allows the search value to be found anywhere in the searched string, not just at the beginning; e.g., "BCD" can be found in "ABCDE".) If the value is not found, the method returns the number -1.


"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.