© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
SORTING REPEATER ROWS
Dynamically sort repeater rows by any dataset column. Sort columns as text, numbers, or dates.
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 "Sorting Rows". On the canvas is a group of widgets called "Dynamic Table". The group includes four rectangle widgets that serve as the table's headings, a "Remove Sort" rectangle, and a repeater widget that serves as the table's body.
We'll be using the heading rectangles' OnClick events to apply sorts to the repeater. Because only one sort can be active on a repeater at a time, we'll want to indicate to the user which sort is currently active. We can do this with the heading rectangle's Selected interaction styles, which have already been set up. The heading rectangles have also already been added to a selection group so that selecting one will automatically unselect the others.
STEP 2: SORT BY COLUMN
Select the "Name Heading" rectangle widget by clicking it twice on the canvas: one click to select the "Dynamic Table" group and a second to select the rectangle itself. (Alternatively, you can select the rectangle directly in the Outline pane.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.
In the Case Editor, choose the "Selected" action under "Set Selected/Checked". Under "Configure actions", check "This Widget". This will set the rectangle to its Selected state, which will activate its Selected interaction style.
Back in the left column, choose the "Add Sort" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.
At the bottom of the right column, optionally enter a name for the sort. If you give it a name, that name will appear in the action description in the Properties tab of the Inspector. If you don't, the action description will list the selections from the dropdowns below.
The actual functionality of the sort is defined by the dropdowns. Set the "Property" dropdown to "Name". This is the dataset column we'll be sorting by. Then, set the "Sort as" dropdown to "Text" and the "Order" dropdown to "Toggle". This will allow the sort to toggle back and forth between ascending and descending alphabetical order each time the "Name Heading" rectangle is clicked. Note that you can select the starting order in the "Default" dropdown that appears.
Click "OK" to close the Case Editor.
STEP 5: REMOVE SORTING
Back in Axure RP, select the "Remove Sort" rectangle widget and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.
In the Case Editor, choose the "Remove Sort" action under "Repeaters". Under "Configure actions", check the "Employees" repeater widget.
At the bottom of the right column, you have the option of removing all sorting or specifying a sort by its name. We want to remove all sorting, so check the box for "Remove all sorting".
Because we're removing sorting from the repeater, we'll also want to set all of the heading rectangles back to their unselected states. Back in the left column of the Case Editor, choose the "Not Selected" action under "Set Selected/Checked". Under "Configure actions", check all four heading rectangle widgets.
Click "OK" to close the Case Editor.
STEP 6: PREVIEW
Preview the page in your web browser and click one of the heading widgets to sort the repeater and show the "Remove Sort" rectangle. Then, click the "Remove Sort" rectangle to test out its new interactions.
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 3: PREVIEW
Preview the page in your web browser and click the "Name" table heading a few times to test out the sort.
STEP 4: ADD SORT INTERACTIONS TO THE OTHER HEADING WIDGETS
Repeat Step 2 for the other three heading widgets. Sort the "Department" and "Available" columns as "Text", and sort the "Hire Date" column as "Date - YYYY-MM-DD". Make sure to test each sort out in the browser to ensure that it's working properly.