Skip to main content

Filtering repeater rows

In this tutorial, you'll learn how to filter repeater widgets to only display rows that meet certain criteria.

info

Click here to download the completed RP file for this tutorial.

1. Widget setup​

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a rectangle widget onto the canvas, right-click it, and select Create repeater from the context menu.

  3. Add two rows, and then edit the Column1 cells to be numbered from 1-5

  4. Set the text on the button to Add Filter.

2. Filter by a constant value​

  1. Select the "Add Filter" button widget and click New interaction in the Interactions pane.

  2. Select the Click or tap event in the list that appears, and then select the Add filter action.

  3. Select the repeater widget in the Target dropdown.

  4. In the Name field, enter Less than 4.

  5. In the Rule field, enter [[Item.Column1 < 4]]. This bracketed expression will filter out any rows whose Column1 values are less than 4.

  6. Click OK to save the action.

3. Preview the interaction​

Preview the page and click the "Add Filter" button to filter the repeater. The "4" and "5" rectangles should disappear.

4. Filter by a dynamic value​

  1. Back in Axure RP, add a text field widget to the canvas.

  2. With the text field selected, click New interaction in the Interactions pane.

  3. Select the Text changed event in the list that appears, and then select the Add filter action.

  4. Select the repeater widget in the Target dropdown.

  5. In the Name field, enter Less than user input.

  6. In the Rule field, enter [[Item.Column1 < This.text]]. This bracketed expression will filter out any rows whose Column0 values are less than the value entered in the text field.

  7. Click OK to save the action.

5. Preview the interaction​

  1. Preview the page again and enter 4 in the text field. The repeater should only display rectangles "3" and below.

  2. Enter 5 in the text field. The repeater should now display rectangles "4" and below.

6. Remove the filter​

  1. Back in Axure RP, drag another button widget onto the canvas and set its text to Remove Filter.

  2. With the button selected, click New interaction in the Interactions pane.

  3. Select the Click or tap event in the list that appears, and then select the Remove filter action.

  4. Select the repeater widget in the Target dropdown.

  5. Select the All radio button and click OK to save the action.

info

To remove only one specific filter, you can select the second radio button and enter the filter's name in the text field. This can be useful when you have multiple filters applied to a repeater at the same time.

7. Preview the interaction​

  1. Preview the page and click the "Add Filter" button to filter the repeater.

  2. Click the "Remove Filter" button to restore the repeater to its default state.