Liquid UI - WS Reference Library

Creating a Class


Runs On

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


In this example, a Class called Item will be created. This class will have attributes like Material and Quantity. Using a class to hold this data helps the code be more modular and makes it easier to access data pertaining to a single item.

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. 


Liquid UI Script


// Author: Synactive, Inc. [1065 E. Hillsdale Blvd, Foster City, CA, 94404, USA]
// Email:;;
// 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
        item_array = [];
    // If the array has data in it
        // Create a table and columns
        table([16,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"});
        // Fill out the table
            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'
        goto FUNC_END;
    onscreen 'SAPMV45A.4001'
        // Clear the value of item_array
        item_array = [];
        absrow = 1;
        enter("/ScrollToLine=&V[absrow]", {"table":"T[All items]"});

    onscreen 'SAPMV45A.4001'
        gettableattribute("T[All items]", {"firstvisiblerow":"FVR", "lastvisiblerow":"LVR", "lastrow":"LR"});
        relrow = 1;
        println("absrow:"+absrow+", LVR:"+LVR+", LR:"+LR);
        // end of table?
            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));

        goto NEW_ROW;


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