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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

FILTERING REPEATER ROWS

Dynamically filter repeater widgets to only display rows that meet certain criteria.


If you aren't yet familiar with the repeater widget, you can read about its functionality and uses in our Repeater Widgets reference guide.

STEP 1: SETUP

In the repeater training document, open the page named "Filtering Rows". On the canvas are a repeater-based table setup and a group of form widgets that we'll use to filter the repeater. We'll use the radio button widgets to filter based on the repeater's "Available" column, and we'll use the droplist widget to filter based on the repeater's "Department" column.

STEP 7: PREVIEW

Preview the page in your web browser and select a department name in the "Filter Department" droplist to apply the "Filter Department" filter to the repeater. You should now see only rows whose "Department" column value matches the department name selected in the droplist.


Then, select "All" in the droplist to remove the "Filter Department" filter from the repeater.

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

 

STEP 3: REMOVE FILTER BY NAME

Select the "Filter Available" radio button widget again and double-click "OnUnselected" in the Properties tab of the Inspector to give it a new OnUnselected case.


In the Case Editor, choose the "Remove Filter" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.


We only want to remove the filter we've just set up, so enter "Filter Available" in the "Name of filter to remove" text field at the bottom of the right column.


Click "OK" to close the Case Editor.

STEP 5: FILTER BY VARIABLE VALUE

Just like other value expressions in Axure RP, filter rules for repeaters can use variables to dynamically pull values from different parts of the prototype.


Back in Axure RP, select the "Filter Department" droplist widget by clicking it twice on the canvas: one click to select the "Filter Controls" group and a second to select the droplist itself. (Alternatively, you can select the droplist directly in the Outline pane.) Then, double-click "OnSelectionChange" in the Properties tab of the Inspector to give it a new OnSelectionChange 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 to "does not equal" so that the condition description reads "if selected option of This does not equal All". This condition will evaluate to "true" when the droplist widget's current selected option is anything other than "All". We only want the filter to be applied when a department name is selected in the droplist.


Click "OK" to close the Condition Builder.

STEP 6: REMOVE VARIABLE FILTER

With the "Filter Department" droplist widget still selected, double-click "OnSelectionChange" in the Properties tab of the Inspector again to set up a second OnSelectionChange case.


In the Case Editor, choose the "Remove Filter" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column, enter "Filter Department" (without quotes) in the "Name of filter to remove" field. 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 droplist's current selected option is "All".

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.

 

STEP 2: FILTER BY HARD-CODED VALUE

Let's start with the radio button widgets. Note that the buttons have already been added to a radio group so that selecting one will automatically unselect the others. Also, the "Both" button is set to Selected by default since the repeater will load in the web browser unfiltered.


Select the "Filter Available" radio button widget by clicking it twice on the canvas: one click to select the "Filter Controls" group and a second to select the radio button itself. (Alternatively, you can select the radio button directly in the Outline pane.) Then, double-click "OnSelected" in the Properties tab of the Inspector to give it a new OnSelected case.

In the Case Editor, choose the "Add Filter" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column, uncheck the box for "Remove other filters". In the next step we'll be setting up a different filter that can be used in tandem with this one, so we don't want to remove other filters when this one is applied.


In the "Name" text field, enter "Filter Available" (without quotes). Then, in the "Rule" text field, enter "[[Item.Available == 'Yes']]" (without quotes). This value expression will find all repeater rows that have the value "Yes" in the "Available" column, and the filter will display only those rows. (To make the filter not display those rows, you would change "==" to "!=".)


Click "OK" to close the Case Editor.

Repeat this step with the "Filter Unavailable" radio button. Name the filter "Filter Unavailable", and use the rule expression "[[Item.Available == 'No']]".


STEP 4: PREVIEW

Preview the page in your web browser, and click the "Available" radio button to select it and apply the "Filter Available" filter to the repeater. You should now see only rows with "Yes" in the "Available" column.


Then, click the "Unavailable" radio button to select it and apply the "Filter Unavailable" filter to the repeater. Note that doing this will automatically unselect the "Available" radio button, so the "Filter Available" filter is automatically removed. You should now see only rows with "No" in the "Available" column.


Finally, click the "Both" radio button to unselect the "Unavailable" radio button and remove the "Filter Unavailable" filter from the repeater.

Back in the Case Editor, choose the "Add Filter" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column, uncheck the box for "Remove other filters" since we want to be able to apply this filter alongside the "Availability" filters.


In the "Name" field, enter "Filter Department" (without quotes). Then, click the "fx" button to the right of the "Rule" field to open the Edit Value dialog.


In the lower section of the dialog, click "Add Local Variable". In the local variable settings that appear, select "selected option of" in the middle dropdown and leave the right dropdown set to "This". This will capture the droplist widget's currently selected option in the web browser and store it as a local variable value for this action.


At the top of the Edit Value dialog, enter "[[Item.Department == LVAR1]]" (without quotes). This value expression will find all repeater rows that have a value equal to the droplist's current selected option in the "Department" column, and the filter will display only those rows.


Click "OK" to close the Edit Value dialog, and then click "OK" again to close the Case Editor.

Repeat this step with the "Filter Unavailable" radio button, removing the "Filter Unavailable" filter.

Note: Alternatively, as described above, you could use the expression "[[Item.Available != 'Yes']]".