13.18 Read Values in Liquid UI Table

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: del(), pushbutton(), column(), table()

Purpose

This article details how to read values in the Liquid UI Table and display them in the Console window, based on the SAP Easy Access screen. Here, we’ll perform the following actions:

1. Delete the image container on the SAP Easy Access screen
2. Add a table along with columns to input values
3. Add a toolbar push button to execute the process
4. Add functions to remove blank spaces from a string, return trimmed strings, check for blank strings, and read Liquid UI tables.

User Interface

//Create the file SAPLSMTR_NAVIGATION.E0100.sjs inside your scripts folder for customizing the SAP Easy Access screen
//Now, add the Liquid UI script to the above file and save it.

Customization

1. Delete the image container on the SAP Easy Access screen using del().
   
    

   // Deletes the image container on the SAP screen
   del("X[IMAGE_CONTAINER]");
   

    
   

    
2. Add a table labeled All items with columns Item, Material, and Order Quantity to add the values.
   
    

   // Creates a table along with columns to add the values
   table([1,5],[10,45],{"name":"va01_AllItems","title":"All items","rows":10,"rowselection":true,"columnselection":true});
   column('Item',{"table":"va01_AllItems","size":4,"name":"z_va01_item","position":1});
   column('Material',{"table":"va01_AllItems","size":15,"name":"va01_material","position":2});
   column('Order Quantity',{"table":"va01_AllItems","size":15,"name":"va01_Orderquantity","position":3});
   

    
   

    
3. Add a toolbar push button labeled Read LiquidUI Table to execute the readLiquidUITableValues process on click.
   
    

   // Creates a toolbar push button to execute the process
   pushbutton([TOOLBAR],"Read LiquidUI Table","?",{"process":readLiquidUiTable,"size":[2,23]});
   

    
   

    
4. Add a function to remove blank spaces from the string.
   
    

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

5. Add the getString function to return the trimmed string.
   
    

   // Function to return trimmed string
   function getString(strInput) {
      return (typeof(strInput) == 'undefined' || strInput == 'undefined') ? "" : strInput.toString().trim();
   }
   

6. Add the isBlank function to check for a blank string.
   
    

   // Function to check for a blank string
   // Specifically used to determine if input exists in the edit field
   function isBlank(strInput) {
      var strVal = getString(strInput);
      var blank = strVal == "";
      return blank;
   }
   

7. Add the readLiquidUITableValues function to read the values in the Liquid UI Table.
   
    

   // Function to read LiquidUI table 'All items'
   function readLiquidUITableValues(){
      i = 0;
      //declaring variables and arrays
      temp_items=[];
      temp_material=[];
      temp_quantity=[];
      
      STARTLABEL:; 
      z_temp1 = va01_AllItems.z_va01_item[i ];   
      z_temp2 = va01_AllItems.z_va01_material[i ];   
      z_temp3 = va01_AllItems.z_va01_Orderquantity[i ];
      
      if(!isBlank(z_temp1) && !isBlank(z_temp2) && !isBlank(z_temp3)){   
   
         temp_items.push(z_temp1);
         temp_material.push(z_temp2);
         temp_quantity.push(z_temp3);
      
         i=i+1;
         goto STARTLABEL;
         
      }   
       
      println('-----------items-------'+temp_items);
      println('-----------material-------'+temp_material);
      println('-----------order quantity-------'+temp_quantity);
      
   
   }
   

SAP Process

1. Refresh SAP screen, input All items table, and click the Read LiquidUI Table push button to display Liquid UI table values in the Console window, as shown in the image below.