Liquid UI - WS Reference Library

Sort Content in Order


Prerequisites


Runs On

  SAP GUI Android iOS WM Web
Direct Connect          
Liquid UI Server Connect        


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);
      }
   }
}