13.16 Extracting Data from SAP Table into Liquid UI Table

Prerequisites

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

Purpose

This article details how to extract data from an SAP table and import it into a Liquid UI table. This process consolidates information, providing a comprehensive view that simplifies data comprehension and manipulation. Furthermore, you can clear the table data using push buttons. Here, we are considering the SAP Easy Access screen to demonstrate the process and walk you through the following steps:

1. Delete the image container on the SAP Easy Access screen
2. Add an input field to enter the order number
3. Add a table and columns to display the data
4. Add push buttons to execute the process
5. Add functions to retrieve and clear data within the Liquid UI table

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 an input field labeled Order to enter the order number.
   
    

   // Creates an input field to enter the order number
   inputfield([2,1],"Order"[0,11],{"name":"va02_Order","size":"21","searchhelp":"VMVA"})
   

    
   

    
3. Add a table labeled All items with columns Item, Material, Order Quantity, and Description to display the data.
   
    

   // Creates a table with columns to display the data
   table([2,1],[8,68],{"name":"va02_AllItems","title":"All items","rows":20,"rowselection":true,"columnselection":true});
   column('Item',{"table":"va02_AllItems","size":4,"name":"va02_item","position":1});
   column('Material',{"table":"va02_AllItems","size":15,"name":"va02_mat","position":2});
   column('Order Quantity',{"table":"va02_AllItems","size":15,"name":"va02_qty","position":3});
   column('Description',{"table":"va02_AllItems","size":25,"name":"va02_desc","position":4});
   

    
   

    
4. Add two push buttons labeled Extract Data To LiquidUI Table to execute the extractDataToLiquidUiTable process, and Clear Table Data to execute the clearData process on click.
   
    

   // Creates two push buttons to execute the extractDataToLiquidUiTable and clearData processes
   pushbutton([10,1],"Extract Data To LiquidUI Table","?",[0,11],{"process":extractDataToLiquidUiTable,"size":[1,27]});
   pushbutton([10,30]),{"process":"clearData"});
   

    
   

    
5. Add the extractDataToLiquidUiTable function to retrieve the data from the SAP table to the Liquid UI table.
   
    

   // Function to retrieve data to Liquid UI table
   function extractDataToLiquidUiTable(){
    onscreen 'SAPLSMTR_NAVIGATION.0100'
      enter("/nva02");
    onscreen 'SAPMV45A.0102'
      set('F[Order]', '&V[va02_Order]');
      enter("=SUCH");
    onscreen 'SAPMSDYP.0010'
      enter(); 
    onscreen 'SAPMSDYP.0010'
      enter();
     onscreen 'SAPMV45A.4001'
   // Initialize arrays to store table data
     z_va02_item=[];
     z_va02_mat=[];
     z_va02_qty=[];
     z_va02_desc=[];
   // Get attributes of the table to determine visible rows
     gettableattribute('T[All items]', {'firstvisiblerow':'FVisRow', 'lastvisiblerow':'LVisRow', 'lastrow':'LastRow'});
   
     relrow=1;
     absrow=1;
     total=0;
     println("=====> First visible row is: "+FVisRow);
     println("=====> Last visible row is: "+LVisRow);
     println("=====> Last row of the table is: "+LastRow);
   
     if(FVisRow != 1){
   	 println("=====> Scroll to first row before start...");
   	 enter('/ScrollToLine=1', {table:'T[All items]'});
     } else {
   	 enter('?');
     }
   // Loop through the visible rows and retrieve data
      newscreen:;
      onscreen 'SAPMV45A.4001'
         relrow=1;
         gettableattribute('T[All items]', {'firstvisiblerow':'FVisRow', 'lastvisiblerow':'LVisRow'});
         println("=====> New first visible row is: "+FVisRow+", new last visible row is: "+LVisRow);
   
         newlabel:;
         
         if(absrow>LVisRow){
            println("=====> Scroll to next visible row before continue...");
            enter('/ScrollToLine=&V[absrow]', {table:'T[All items]'});
            goto newscreen;
         }
   
         if(absrow>LastRow){
            println("=====> Reach the end of table, end of scrolling");
            goto end;
         }
         set('V[z_curr_item]', '&cell[All items,Item,&V[relrow]]');
         z_va02_item.push(z_curr_item);
         set('V[z_curr_mat]', '&cell[All items,Material,&V[relrow]]');
         z_va02_mat.push(z_curr_mat);
         set('V[z_curr_quan]', '&cell[All items,Order Quantity,&V[relrow]]');
         z_va02_qty.push(z_curr_quan);
         set('V[z_curr_desc]', '&cell[All items,Description,&V[relrow]]');
         z_va02_desc.push(z_curr_desc);
         
   
         absrow++;
         relrow++;
         goto newlabel;
         
         end:;
         println("=====> Scroll to the first row of table at the end");
         enter('/ScrollToLine=1', {table:'T[All items]'});
      
         
         total = absrow;
         println("This is absolute row :"+absrow+":"+total);
         
         
      onscreen 'SAPMV45A.4001'
         for(var idx=1, i=0; idx<total-1;idx++, i++){
   
            va02_AllItems.va02_item=z_va02_item;
            va02_AllItems.va02_mat=z_va02_mat;
            va02_AllItems.va02_qty=z_va02_qty;
            va02_AllItems.va02_desc=z_va02_desc;
   
         }
         enter('/n');   
         
      
   }
   

6. Add the clearData function to remove the data from the Liquid UI table.
   
    

   // Function to remove data
   function clearData() {   
      var table_value = ' ';
   
      for(i=1;i<total-2;i++) { 
         table_value += ' ';
      }
   
      onscreen 'SAPLSMTR_NAVIGATION.0100'
         set('V[va02_*]','');
         set('V[z_*]','&V[table_value]');
         enter();
         
   }
   

SAP Process

1. Refresh the SAP screen, enter the value, and click the Extract Data To LiquidUI Table push button. The extractDataToLiquidUiTable process will then execute and retrieve the data to the Liquid UI table, as shown in the image below.
   
    
   

    
2. Click on Clear Table Data to remove data from the Liquid UI table, as shown below.