Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Axure Support
  • Download

›The Repeater

Installing and Activating RP

  • Activating Axure RP
  • Installing on macOS
  • Installing on Windows

Getting Started

  • Getting Started Video
  • The Axure RP Environment
  • Viewing and Sharing Your Prototypes
  • Keyboard Shortcuts
  • Auto-Saved Backup Files

Working with Widgets

  • Organizing Widgets
  • Widget Groups
  • Styling Widgets
  • Widget Libraries
  • The Grid, Guides, and Snapping

Basic Widgets

  • Buttons, Shapes, & Text
  • Images
  • Hot Spots
  • Lines & Arrows
  • Dynamic Panels
  • Inline Frames
  • Text Fields & Text Areas
  • Droplists
  • List Boxes
  • Checkboxes
  • Radio Buttons
  • Trees
  • Tables
  • Classic Menus
  • Snapshots

Working with Pages

  • Managing Pages
  • Styling Pages

Masters

  • Creating and Using Masters
  • Master Views
  • Raised Events

Introduction to Interactions

  • Events, Cases, and Actions
  • List of Events
  • List of Actions
  • Text Links
  • Style Effects
  • Animations

Advanced Interactions

  • Variables
  • Conditional Logic
  • Math, Functions, and Expressions
  • Selection Groups
  • Move Action Boundaries

The Repeater

  • Repeaters
  • Dynamically Adding Rows
  • Dynamically Deleting Rows
  • Updating Rows
  • Marking Rows
  • Sorting Rows
  • Filtering Rows
  • Pagination

Adaptive Views

  • Adaptive Views

Documenting Your Prototype

  • Page and Widget Notes
  • The Word Specification
  • Printing

Flow Diagrams

  • Flow Diagrams
  • Flow Connectors

Publishing Your Prototype

  • The Prototype Player
  • Customizing the HTML Output
  • Web Fonts and Font Mapping

Team Projects

  • Creating and Sharing Projects
  • Working with Team Projects
  • Team Project History
  • Troubleshooting Team Projects
  • Upgrading Projects to RP 9

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

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

  2. Drag a repeater widget and a button widget onto the canvas.

  3. Set the text on the button to Add Sort.

  4. Select the repeater widget. In the Style pane, add two new rows to Column0 of the dataset, one with the value 4 and one with the value 5.

  5. Use the blue arrows above the dataset to scramble the rows so that Column0's values are no longer in order.

2. Add Sort

  1. Select the "Add Sort" button 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 Sort action.

  3. Select the repeater widget in the Target dropdown.

  4. In the Name field, enter Toggle Column0.

  5. Leave Column0 selected in the Column dropdown, and leave Number selected in the Sort As dropdown.

  6. In the Order dropdown, select Toggle, and leave Ascending selected in the Default dropdown.

    This sort will target Column0 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.

  7. Click OK to save the action.

3. Remove Sort

  1. Drag another button widget onto the canvas and set its text to Remove Sort.

  2. With the button widget 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 Sort action.

  4. Select the repeater widget in the Target dropdown.

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

  1. Preview the page again and click the "Add Sort" button to sort the repeater.

  2. Click the button again to change the rectangles to descending order.

  3. Click the "Remove Sort" button to return the repeater to its unsorted state.

← Marking RowsFiltering Rows →
  • 1. Widget Setup
  • 2. Add Sort
  • 3. Remove Sort
  • 4. Preview
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
TourEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense PortalAxure Cloud
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 8 Documentation and Tutorials
Copyright © 2002–2021 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.