Liquid UI - WS Reference Library

Sort table values based on column


Prerequisites


Purpose

In this example, the Insertion algorithm will be used to sort items in a table. This article is based on, “Creating a Class”.
Sorting is a common process used in many different scenarios. Insertion is an easy to implement algorithm however is not the most efficient when the data set is very large. The Big O is n2.


User Interface

Log in to SAP and navigate to the transaction VA03.


 

Enter and order number and then click the pushbutton “Display items”. A function will run, fetching the data from the table of the order you entered. Then the data will be displayed to the user on the initial screen along with three buttons. Each button will sort the table according to the selection.

By Item


 

By Material


 

By Quantity



Liquid UI Script

//SAPMV45A.E0102.sjs

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Author: Synactive, Inc. [1065 E. Hillsdale Blvd, Foster City, CA, 94404, USA]
// Email: support@guixt.com; sales@guixt.com;
// Contact: 650.341.3310
//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// This function creates a class for Item
function Item(itm,mat,qty,su){
    // Attributes of the class
    this.item = itm;
    this.material = mat;
    this.quantity = qty;
    this.sales_unit = su;
    // Function used to retrieve information on Item
    this.getInfo = function(){
        return "Item:"+this.item+", Material:"+this.material+", Quantity:"+this.quantity+", Sales Unit:"+this.sales_unit;
    }

}

// Only execute the following for VA03
if(_transaction == "VA03"){
    // Pushbutton that will trigger the funciton
    pushbutton("F[Order]+[0,62]", "Display items", "?", {"process":fetchItems});
    
    // If item_array is undefined, intialize it
    if(!item_array){
        item_array = [];
    }
    
    // If the array has data in it
    if(item_array.length>0){
        
        pushbutton([15,0], "&V[item_sel]Sort By Item   ", "?", {"process":changeSort,"using":{"sort_type":"item"}});
        pushbutton([15,30], "&V[mat_sel]Sort By Material", "?", {"process":changeSort,"using":{"sort_type":"material"}});
        pushbutton([15,60], "&V[qty_sel]Sort By Quantity", "?", {"process":changeSort,"using":{"sort_type":"quantity"}});
        
        // Create a table and columns
        table([17,0], [26,50], {"name":"z_table", "title":"Line Items", "rows":item_array.length});
        column("Item", {"size":6,"name":"z_item", "table":"z_table"});
        column("Material", {"size":18,"name":"z_mat", "table":"z_table"});
        column("Quantity", {"size":15,"name":"z_qty", "table":"z_table"});
        column("SU", {"size":3,"name":"z_su", "table":"z_table"});

        switch(sorted){
            // Use insertion sort to sort the array
            case "material":

                // Sort  By Material
                for(i=1; i<item_array.length; i++){
                    
                    while(i>0 && item_array[i-1].material>item_array[i].material){
                        temp = item_array[i-1];
                        item_array[i-1] =  item_array[i];
                        item_array[i] = temp;
                        i--;
                    }
                    
                }
                break;
                
            case "quantity":

                // Sort  By Quantity
                for(i=1; i<item_array.length; i++){
                    
                    while(i>0 && parseInt(item_array[i-1].quantity)>parseInt(item_array[i].quantity)){
                        temp = item_array[i-1];
                        item_array[i-1] =  item_array[i];
                        item_array[i] = temp;
                        i--;
                    }
                    
                }
                break;
                
            case "item":
                
                // Sort  By Item
                for(i=1; i<item_array.length; i++){
                    
                    while(i>0 && parseInt(item_array[i-1].item)>parseInt(item_array[i].item)){
                        temp = item_array[i-1];
                        item_array[i-1] =  item_array[i];
                        item_array[i] = temp;
                        i--;
                    }
                    
                }
                break;
                
            default:
                // Do nothing, the array is already sorted by Item
        }    
        
        // Fill out the table
        for(i=0;i<item_array.length;i++){
            z_table.z_item[i] = item_array[i].item;
            z_table.z_mat[i] = item_array[i].material;
            z_table.z_qty[i] = item_array[i].quantity;
            z_table.z_su[i] = item_array[i].sales_unit;
        }
    
    }
}

// This function will table scroll through the VA03 transaction and fetch the data from the table
function fetchItems(){
    onscreen 'SAPMV45A.0102'
        enter();
    onerror
        message(_message);
        enter("?");
        goto FUNC_END;
    onscreen 'SAPMV45A.4001'
        // Clear the value of item_array
        item_array = [];
        absrow = 1;
        enter("/ScrollToLine=&V[absrow]", {"table":"T[All items]"});

NEW_SCREEN:;
    onscreen 'SAPMV45A.4001'
        gettableattribute("T[All items]", {"firstvisiblerow":"FVR", "lastvisiblerow":"LVR", "lastrow":"LR"});
        relrow = 1;
NEW_ROW:;    
        println("absrow:"+absrow+", LVR:"+LVR+", LR:"+LR);
        // end of table?
        if(absrow>LR){                  
            goto END_OF_TABLE;
        }
        // end of screen?
        if(absrow>LVR) {                  
            goto NEW_SCREEN;
        }
        
        set("V[z_temp_item]", "&cell[All items,Item,&V[relrow]]");
        set("V[z_temp_mat]", "&cell[All items,Material,&V[relrow]]");
        set("V[z_temp_qty]", "&cell[All items,Order Quantity,&V[relrow]]");
        set("V[z_temp_su]", "&cell[All items,SU,&V[relrow]]");
        
        // Push a new Item to the array
        item_array.push(new Item(z_temp_item,z_temp_mat,z_temp_qty,z_temp_su));

        absrow++;
        relrow++;
        goto NEW_ROW;

END_OF_TABLE:;

        enter('/ScrollToLine=1', {"table":"T[All items]"});
        
    onscreen 'SAPMV45A.4001'
        enter("/3")

FUNC_END:;
}

function changeSort(param){
    onscreen 'SAPMV45A.0102'
        sorted = param.sort_type;
        if(sorted == "material"){
            item_sel = "";
            mat_sel = "@01@";
            qty_sel = "";
        }
        else if(sorted == "quantity"){
            item_sel = "";
            mat_sel = "";
            qty_sel = "@01@";            
        }
        else if(sorted == "item"){
            item_sel = "@01@";
            mat_sel = "";
            qty_sel = "";            
        }
        enter("?");
}

 


Was this information helpful? Send Feedback