Multi column sorting--it's possible!

tips-and-tricks
rp-10
repeater-widget

#1

TL;DR:
Sorting multiple columns in a repeater is possible but you will need to fire the sorting interactions in reverse order of how you wish to rank the sorting.

Introduction:
Just your friendly post with some tips and tricks. This week we have some sorting business and how to do it with more than one repeater column! Because we know sometimes you just want to keep everything nice and tidy and a great way to do that is to just sort as much as you can.

Generally, when sorting multiple columns, there is a primary sort at the highest level that can be subdivided for further sorting. Usually, this column will have data with some identical information (maybe the same dates) and that is why another level of sorting for another column is possible. Otherwise, if you are trying to have a primary sort of unique rows (for example 5 items ranked 1 through 5), you wouldn’t need sorting of multiple columns because they only have one configuration.

Application/Example:
One example of when it can be used is if you have different people selling some quantity of items within a few months like in the repeater table pictured below. Months should be sorted first chronologically which will create subdivided segments (multiple February months). We also have some people that sold more than others, so we can apply another sort to the quantity column to place the highest seller on top within each month’s segment. For the most part, things are all nice and tidy–but hold on… some of the salesmen with the same quantity of sales and within the same month aren’t sorted alphabetically which means we have another subdivided segment! Of course, we have to finalize our triple column sorting with that cherry on top. Feel free to test this out by navigating to the sample prototype I’ve linked below and click on “Master Sort”

image

https://og633j.axshare.com/

Explanation:
Let’s get into the nitty gritty details of what is happening and how you can recreate this in your projects.

When you perform a repeater sort action in Axure RP, it will supersede any other sorting of other columns. In other words, any sorting done will override any previous sorting. Because of this, any sorting that we want to be given priority should be sorted last. Usually, you will have to sort your unique items first. I have ordered the sorting interactions in the “Master Sort” button to reflect this reverse order of priority. Also, be sure to set the “Remove all other sorts” setting to unchecked. Feel free to download the .rp file and try it out yourself. Or play with the three sorting buttons below the columns to see how they behave.

Multi Column Sorting.rp (355.9 KB)

As for the other sorting details of the project, the names of the months aren’t alphabetical so in order to achieve the appropriate ranking, I included another repeater column that is only used as “virtual data” to pair with each month and where the sorting of the months is actually being applied to. You will also want to specify which sort type (I chose alphanumeric in this example) as well as sort order (quantity will have to be in descending order).

Extras:
If you also noticed, the published prototype link above does not include the prototype player overlay as well as any parameters for the URL path. That’s thanks to Pretty URLs set under the “Advanced” tab for the project in Axure Cloud. This can be particularly useful when you want to present your prototype and want it look… well… pretty :slight_smile: This is also a great place to set a custom 404 page, page titles, or meta descriptions. If you don’t want to use Pretty URLs and wish to link directly to your prototypes HTML, you can use the format below:

ProjectID.axshare.com/Page_Name.html

By the way, if you want to include any GIFs in your prototype, be sure to select “No” when prompted to optimize the image. And of course, if you are satisfied with your care, feel free to click on the GIF.

As always, if you guys have any questions feel free to let us know. And happy prototyping!


#2

Excellent write-up. Thanks for the post, Benjamin!