Client-side / UI-only Sorting in Skuid
The way I’ve been getting around this is using a Javascript snippet for now. I believe client-side sorting is definitely on the radar, but this will have to do for now. As with any Javascript in your Skuid implementation, use at your own risk!
Filter Functions
//First define your sort functions before you need to use them. Here are two you can copy/paste for ascending or descending
//Change this to the field you need to sort
var field = 'FieldToSort';
function sort__ByField_ASC(a,b){
if( a[field] < b[field] ) return 1;
if( a[field] > b[field] ) return -1;
return 0;
}
function sort__ByField_DESC(a,b){
if( a[field] < b[field] ) return -1;
if( a[field] > b[field] ) return 1;
return 0;
}
There are two approaches to this:
Two Model Approach
Use this approach if you would like to have a Data model and a separate Display model. I prefer this approach for a variety of debugging reasons, even though it can result in more models than necessary. This is the “show me a picture of the seed that is now my flower” option.
var sourceModel = skuid.$M('YourDataModel'); //Your source data that you wish to sort
var targetModel = skuid.$M('YourDisplayModel'); //Generally a UI-Only Model with same name fields
var rows = sourceModel.getRows();
var sortedRows = rows.sort(sort__ByField_ASC); // or sort__ByField_DESC
targetModel.adoptRows(sortedRows);
Now you have two models, one with your source data and one with your sorted data!
One Model Approach
Use this approach if you simply want the model to be sorted and do not wish to see the before/after picture. This is more “just give me the flower, who wants a picture of a seed!?” option.
var model = skuid.$M('YourDataModel');
var rows = model.getRows();
model.abandonAllRows(); //remove rows from the original model
var sortedRows = rows.sort(sort__ByField_ASC); // or sort__ByField_DESC
model.adoptRows(sortedRows); //add them back sorted
One model. Sorted. That’s all.
Bonus Content!
“But Javid! What if I need to sort by two or more UI-only fields?”
Have no fear! There is still a solution! Look back up at the functions we wrote at the beginning (sort__ByField_*). Notice the first two lines in each function that return either -1 or 1? Let’s add more!
//Change these to the fields you wish to sort in the order you wish to have them sorted var field1 = 'FirstFieldToSort'; var field2 = 'SecondFieldToSort'; function sort__ByMultipleFields_ASC(a,b){ //Sort the first field if( a[field1] < b[field1] ) return 1; if( a[field1] > b[field1] ) return -1; //field1 in a and b were the same. Tiebreaker! if( a[field2] < b[field2] ) return 1; if( a[field2] > b[field2] ) return -1; return 0; } function sort__ByMultipleFields_DESC(a,b){ //Sort the first field if( a[field1] < b[field1] ) return -1; if( a[field1] > b[field1] ) return 1; //field1 in a and b were the same. Tiebreaker! if( a[field2] < b[field2] ) return -1; if( a[field2] > b[field2] ) return 1; return 0; }
For sorting by more than two rows, add more of the “Tiebreaker” rows in sequence as you need them.
Bonus Content 2: The Return of Bonus Content!
Wow, it just keeps coming! Good for you, my lunch ride is running late!
“What if I need to sort by two or more rows, but differing in the sort order?”
This is where you can look at the comparisons in the if statements and the actual return values in the functions. Notice how in each of the above ASC functions we return positive 1 if the a field is less than the b field. Similarly in each of the above DESC functions we return negative 1 if the a field is greater than the b field.
You can mix and match these return values to your heart’s desire so you can achieve the correct sorting algorithm for your needs!
