Axure Tutorial: Repeaters - Filtering Rows

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

You can add filters to repeaters to only show rows that meet certain criteria. Filter can be used for table rows searching or filtering.

You can check out Axure Tutorial: Actions Full Guide - Axure Interactive Template for an intuitive understanding of filtering rows.

Adding Filter to Repeater

To add a filter to a repeater, you need the following steps:

1. Add an Add Filter action

2. Select the repeater to add the filter.

3. Select Options of  Filter Rule . You can select repeater column or expressions.

4. Set the rule.

5. Select whether to remove other filters. If you unselect remove other rows, you need set combination with other filters.

Match any: Meets any one of the filter's criteria.

Match All: Meets all  filter's criteria.

Smart: match any filter on the same column, but must match all filters across different columns. 

Removing Filters

If you want to remove filters. You need to add a Remove Filter action, then select the repeater to remove the Filter, then select Remove All filters or the specified Filter.

 

The following is an example of how to add and remove filters.

Widgets Setup 

First make the table content with the repeater, then add a text field as a search box, then add 2 buttons.

Add Filters

Search box

Then we add filters to the text field:

1. First, when the text changes, adding a filter. Select repeater, Filter Rule select First_Name, Symbol select contains, Content select text on widget, target select Text Field.

2. Then in a similar way, we add a second filter.

Filter Rule we select Last_Name, do not check Remove other filters, Combination with other filters we choose match any.

In this way, we only need to meet one of the criteria of the two filters, which realizes the fuzzy search.

Score > 30 Filter

If you want to filter all rows with score > 30 after clicking the button, we need to set it as above, and pay attention to check Remove other filters.

Remove Filters

To remove filters, we add a Remove Filter action when the button is clicked, and Filter selects All.

You can add multiple sorts to the repeater at once. As long as you do not check remove all other sorts when adding new sorts, you can apply them.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
 

That's all for today's lesson. Next lesson we will introduce pagination.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.   


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


This section doesn’t currently include any content. Add content to this section using the sidebar.