Sorting Repeater Rows
In this tutorial, you'll learn how to sort the rows in a repeater in ascending and descending order based on a column in the repeater's dataset.
Note
Click here to download the completed RP file for this tutorial.
1. Widget Setup
Open a new RP file and open Page 1 on the canvas.
Drag a rectangle widget onto the canvas, right-click it, and select Create Repeater from the context menu.
Add two rows, and then edit the Column1 cells to be numbered from 1-5, in a random, non-ascending order
Drag a button widget onto the canvas, and then Set the text on the button to
Add Sort
.
2. Add Sort
Select the "Add Sort" button and click New Interaction in the Interactions pane.
Select the Click or Tap event in the list that appears, and then select the Add Sort action.
Select the repeater widget in the Target dropdown.
In the Name field, enter
Toggle Column1
.Leave Column1 selected in the Column dropdown, and leave Number selected in the Sort As dropdown.
In the Order dropdown, select Toggle, and leave Ascending selected in the Default dropdown.
This sort will target Column1 of the dataset, treat its data as numbers, and toggle the sort order back and forth between ascending and descending whenever the button is clicked.
Click OK to save the action.
3. Remove Sort
Drag another button widget onto the canvas and set its text to
Remove Sort
.With the button widget selected, click New Interaction in the Interactions pane.
Select the Click or Tap event in the list that appears, and then select the Remove Sort action.
Select the repeater widget in the Target dropdown.
Select the All radio button and click OK to save the action.
Note
To remove only one specific sort, you can select the second radio button and enter the sort's name in the text field. This can be useful when you have multiple sorts applied to a repeater at the same time.
4. Preview
Preview the page again and click the "Add Sort" button to sort the repeater.
Click the button again to change the rectangles to descending order.
Click the "Remove Sort" button to return the repeater to its unsorted state.