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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

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.

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 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.