Liquid UI - WS Reference Library

Integrating Windows List View Control with SAPGUI


Purpose

The examples demonstrates the ability to embed Windows COM controls within SAPGUI.


User Interface


Specify dates, and click on ‘Orders Since’ button


Liquid UI Script

//ESESSION.sjs

load('wsoffice');
load('systemFunctions.sjs');

//systemFunctions.sjs

/**
 * Utilities.sjs - Common functions used across multiple scripts.
 */

/**
 * PADDING CONSTANTS
 */

const PADDING_LEFT = 0;
const PADDING_RIGHT = 1;

/**
 * trim()            
 */

String.prototype.trim = function () {
   return this.replace(/^\s+|\s+$/g, "");
}

/**
 * isBlank()                                    
 */

function isBlank(value) {   
   if (typeof(value) == string) {
      value = value();
   }
   
   var blank = (value == void 0 || value == "" || value == null);
   
   return blank;
}

/**
 * padString()
 */

function padString(source, length, direction, character) {
   var loop;
   var output = "";
   var sourceLength = 0;
 
   if (source) {
      sourceLength = source.length;
   }
   
   switch (direction) {
       case PADDING_LEFT:
          for (loop = 0; loop < (length - sourceLength); loop++) {
             output += character;
          }
          output = output + source;
          break;
    
       case PADDING_RIGHT:
          for (loop = 0; loop < (length - sourceLength); loop++) {
             output += character;
          }
          output = source + output;
          break;
   }

   return output;
}

//zguixt.e0100.sjs

for (a=firstChild;a!=null;a=a.nextSibling){
    a.del();
}

pushbutton([0,1],"Orders Since","/0" ,{"process":getOrders});
inputfield([0,20],"Date",[0,30],{"name":"z_date","size":"10"});

if (isBlank(Z_SCRN)) {
} else {
    if (Z_SCRN == 'LIST') {
        pushbutton([TOOLBAR],"Start Over","/0" ,{"process":closeOrders});
        box([1,1],[26,62],"&V[z_rowcount] Orders Since: &V[z_date]");

        var listview = new ActiveXObject('COMCTL.ListViewCtrl');
        addToScreen(listview, [2,2], [26,62], "container1");
        listview.View = 3;

        if(listview.ColumnHeaders.Count == 0) {
            listview.ColumnHeaders.Add(1, "colkey1", "Order No");
            listview.ColumnHeaders.Add(2, "colkey2", "PO Date");
            listview.ColumnHeaders.Add(3, "colkey3", "Customer");
            listview.ColumnHeaders.Add(4, "colkey4", "PO Number");
        }

        for (var idx = 0; idx < z_rowcount; idx++) {

            keyid = idx + 1;

            set('V[keynumber]','key&V[idx]');  
            
            set('V[vbeln]','&V[vbeln_&V[idx]]');
            set('V[bstdk]','&V[bstdk_&V[idx]]');
            set('V[kunnr]','&V[kunnr_&V[idx]]');
            set('V[bstkd]','&V[bstkd_&V[idx]]');

            keyno = parseInt(keyid);
            keynumberjs = keynumber;
            keyvaluevbeln = vbeln;
            keyvaluebstdk = bstdk;
            keyvaluekunnr = kunnr;
            keyvaluebstkd = bstkd;

            listview.ListItems.Add(keyno,keynumberjs, keyvaluevbeln);
            listview.ListItems(keyno).SubItems(1) = keyvaluebstdk;
            listview.ListItems(keyno).SubItems(2) = keyvaluekunnr;
            listview.ListItems(keyno).SubItems(3) = keyvaluebstkd;

        }
    }
}

function getOrders() {
    var selopt = [];
    var ordersTable = [];

    vmvaa = "VMVAA";
    bstdk = "BSTDK";
    i = "I";
    ge = "GE";
    from = z_date;

    z_queryOption = padString(vmvaa, 30, PADDING_RIGHT, " ");
    z_queryOption += padString(bstdk, 30, PADDING_RIGHT, " ");
    z_queryOption += i;
    z_queryOption += ge;
    z_queryOption += padString(from, 45, PADDING_RIGHT, " ");
    selopt.push(z_queryOption);

    call("Z_S10_SEARCHHELP", {
      "in.SEARCHHELP": "VMVAA", "in.COLUMNS":"VBELN(10),BSTDK(10),KUNNR(10),BSTKD(20)",
      "table.SELOPT": "selopt",
      "table.DATA(width:50)": "ordersTable"
    });

    for (var rowNumber = 0; rowNumber < ordersTable.length; rowNumber++) {
        var result = {
            vbeln: ordersTable[rowNumber].substring(0, 10),
            bstdk: ordersTable[rowNumber].substring(10, 20),
            kunnr: ordersTable[rowNumber].substring(20, 30),
            bstkd: ordersTable[rowNumber].substring(30, 50)
        };
        set("V[vbeln_&V[rowNumber]]", result.vbeln);
        set("V[bstdk_&V[rowNumber]]", result.bstdk);
        set("V[kunnr_&V[rowNumber]]", result.kunnr);
        set("V[bstkd_&V[rowNumber]]", result.bstkd);
    }
    Z_SCRN = 'LIST';
    set('V[z_rowcount]',ordersTable.length);
    return;
}


function listvieweventhandler(lv)
{
this.lv1 = lv;        // Pointer is available when user interacts with the listview on the screen.
            // All properties of ListView becomes then accessible.
}

function displaySalesOrder(orderNumber) {

println('Inside displaySalesOrder');

}

listvieweventhandler.prototype = {
    ItemClick: function(arg1, arg2, arg3, arg4)
    {    
        println(" inside ---------------- ItemClick function, selected item is " + this.lv1.SelectedItem);        

                orderNumber = this.lv1.SelectedItem;

        _onOleEvt();
            enter('/nva03', {process:displaySalesOrder}) ;

    
                onscreen 'SAPMV45A.0102'
               set('F[Order]',orderNumber);
            enter();


        println(" inside ---------------- ItemClick function, arg1 is " + arg1);    
        println(" inside ---------------- ItemClick function, arg2 is " + arg2);    
        println(" inside ---------------- ItemClick function, arg3 is " + arg3);    
        println(" inside ---------------- ItemClick function, arg4 is " + arg4);

    },    

    ColumnClick: function(arg1)
    {      
        this.lv1.Sortkey = arg1.index - 1;
        this.lv1.Sorted = true;
        println(" inside ---------------- ColumnClick function: " + arg1.index);
        println(" inside ---------------- ColumnClick function, arg1 is " + arg1);    
    },
    DblClick: function(arg1, arg2, arg3, arg4)
    {      println(" inside ---------------- DblClick function, selected item is " + this.lv1.SelectedItem);
        println(" inside ---------------- DblClick function, arg1 is " + arg1);    
        println(" inside ---------------- DblClick function, arg2 is " + arg2);    
        println(" inside ---------------- DblClick function, arg3 is " + arg3);    
        println(" inside ---------------- DblClick function, arg4 is " + arg4);
    },
    MouseMove: function(arg1, arg2, arg3, arg4)
    {      /*println(" inside ---------------- MouseMove function, selected item is " + this.lv1.SelectedItem);
        println(" inside ---------------- MouseMove function, arg1 is " + arg1);    
        println(" inside ---------------- MouseMove function, arg2 is " + arg2);    
        println(" inside ---------------- MouseMove function, arg3 is " + arg3);    
        println(" inside ---------------- MouseMove function, arg4 is " + arg4);*/
    },
    MouseUp: function(arg1, arg2, arg3, arg4)
    {      /*println(" inside ---------------- MouseUp function, selected item is " + this.lv1.SelectedItem);
        println(" inside ---------------- MouseUp function, arg1 is " + arg1);    
        println(" inside ---------------- MouseUp function, arg2 is " + arg2);    
        println(" inside ---------------- MouseUp function, arg3 is " + arg3);    
        println(" inside ---------------- MouseUp function, arg4 is " + arg4);*/
    },
    MouseDown: function(arg1, arg2, arg3, arg4)
    {      /*println(" inside ---------------- MouseDown function, selected item is " + this.lv1.SelectedItem);
        println(" inside ---------------- MouseDown function, arg1 is " + arg1);    
        println(" inside ---------------- MouseDown function, arg2 is " + arg2);    
        println(" inside ---------------- MouseDown function, arg3 is " + arg3);    
        println(" inside ---------------- MouseDown function, arg4 is " + arg4);*/
    }
}

var fnc = new listvieweventhandler(listview);

ActiveXObject._attachHandler(listview, fnc);

function closeOrders() {
    Z_SCRN = '';
}