Liquid UI - WS Reference Library

Sort content in order


Prerequisites


Purpose

This example is to provide sorted view of array content.
The user is able to click on each column-header-like button to sort the data set with different order based on each column.
In the example, the sorting order follows non-> ascending-> descending-> non for each button.


User Interface

  1. Initial List View with Data Set.

  2. Sorted List View – based on “Make” column, in Ascending Order.

  3. Sorted List View – based on “Make” column, in Descending Order.

  4. Sorted List View – based on “Year” column, in Ascending Order.


Liquid UI Script

Step 1: Create user interface

//User interface

//If default flag is not set to true, execute setDefault function
if(!z_default_flag){
   setDefault();
}

clearscreen();

pushbutton([1,5], "&V[btn_sort_icon_0]Make", "?", {"process":sortContent, "size":[1,15], "using":{"col":"0"}});
pushbutton([1,21], "&V[btn_sort_icon_1]Model", "?", {"process":sortContent, "size":[1,20], "using":{"col":"1"}});
pushbutton([1,42], "&V[btn_sort_icon_2]Year", "?", {"process":sortContent, "size":[1,10], "using":{"col":"2"}});
pushbutton([1,53], "&V[btn_sort_icon_3]Color", "?", {"process":sortContent, "size":[1,10], "using":{"col":"3"}});
pushbutton([1,64], "&V[btn_sort_icon_4]Door", "?", {"process":sortContent, "size":[1,10], "using":{"col":"4"}});
pushbutton([1,75], "&V[btn_sort_icon_5]HatchBack", "?", {"process":sortContent, "size":[1,15], "using":{"col":"5"}});

box([2,5], [12,19]);
box([2,21], [12,40]);
box([2,42], [12,51]);
box([2,53], [12,62]);
box([2,64], [12,73]);
box([2,75], [12,89]);

for(var i=start_row; i<end_row; i++){
   text([2+i,7], data_ary[0]);
   text([2+i,23], data_ary[1]);
   text([2+i,45], data_ary[2]);
   text([2+i,55], data_ary[3]);
   text([2+i,69], data_ary[4]);
   
   set("V[check_&V]", data_ary[5]);
   checkbox([2+i,82], "", {"name":"check_&V", "readonly":true});
}

Note: Variables "btn_sort_icon_0" to "btn_sort_icon_5" are defaulted to be empty, and they are used to display corresponding icon when sort variable "start_row" is always 0, but "end_row" is dynamically changing based on the length of data set.

Step 2: Create function to default data set and variables

//Function to default all variables and data
function setDefault(){
   //Default all button icons to be empty
   btn_sort_icon_0 = "";
   btn_sort_icon_1 = "";
   btn_sort_icon_2 = "";
   btn_sort_icon_3 = "";
   btn_sort_icon_4 = "";
   btn_sort_icon_5 = "";
//Default data array for display
   data_ary = [];
   data_ary.push(["Honda", "Accord", "2009", "Metallic", "5", " "]);
   data_ary.push(["Acura", "RSX", "2002", "Red", "2", "X"]);
   data_ary.push(["Scion", "tC", "2014", "White", "2", "X"]);
   data_ary.push(["Honda", "Accord", "2014", "Black", "5", " "]);
   data_ary.push(["Toyota", "Corolla", "2014", "Red", "5", " "]);
   data_ary.push(["Mazda", "5", "2008", "Blue", "5", "X"]);
   data_ary.push(["BMW", "X1", "2015", "Black", "5", "X"]);
   data_ary.push(["Mini", "Cooper", "2014", "Green", "5", "X"]);

   //Create a backup for data array
   data_ary_bkup = [];
   for(var i=0; i<data_ary.length; i++){
      data_ary_bkup.push(data_ary);
   }
   
   //Set start and end value for display
   start_row = 0;
   end_row = data_ary.length;
   
   //Default an array to store sorting status for each column
   sort_order_ary = [];
   for(var i=0; i<6; i++){
      sort_order_ary.push("X");
   }
   
   //Set default flag to true fore only run default function one time
   z_default_flag = true;
}

Note: Array "data_ary_bkup " is to resume data set

Step 3: Create function to sort content

//Function to sort content
function sortContent(param){
   set("V[btn_sort_icon_*]", " ");         //Reset icon for all the button

   var column = param.col;               //Copy the value of passed column number
   if(sort_order_ary[column]=='X')         //Set the column of status array to 0 if it's defaulted to "X"
      sort_order_ary[column] = 0;
   
   if(sort_order_ary[column] == 1){
      set("V[btn_sort_icon_&V[column]]", '@0H@');
      sort_order_ary[column] = 2;         //Change column of status array to 2 (descending order)
      data_ary.sort(function (a,b) {
         a = a[column].toLowerCase();   //Convert both value to lower case for following comparison
         b = b[column].toLowerCase();
         return a == b ? 0 : (a < b ? 1 : -1);   //Compare elements. if it's the same, don't switch; else if b larger than a, switch; else, reverse
      });
   } else if(sort_order_ary[column] == 0){
      set("V[btn_sort_icon_&V[column]]", '@0I@');
      sort_order_ary[column] = 1;         //Change column of status array to 1 (ascending order)
      data_ary.sort(function (a,b) {
         a = a[column].toLowerCase();
         b = b[column].toLowerCase();
         return a == b ? 0 : (a < b ? -1 : 1);
      });   
   } else {
      set("V[btn_sort_icon_&V[column]]", ' ');   
      sort_order_ary[column] = 0;         //Change column of status array to 0 (non-sorted order)
      data_ary = [];
      for(var i=0; i<data_ary_bkup.length; i++){         //Copy data from backup array
         data_ary.push(data_ary_bkup);
      }
   }
}

 


Was this information helpful? Send Feedback