Liquid UI - WS Reference Library

Scrolling


Purpose

Scrolling helps you to view the additional information which will not fit in your window. Liquid UI allows you to scroll the tables, listscreens, and fetch the required data from the SAP screens. Scrolling can be performed in two ways.

  1. Vertical scrolling
  2. Horizontal scrolling

Vertical and horizontal scroll bars appear to the right and bottom of the document pane whenever the view does not show the entire table or listscreen of SAP screen. You can fetch data from the list screens or tables dynamically using the enter command.


User Interface


Example1:

In this scenario, you will learn how to scroll vertically and horizontally on a listscreen using enter command with hscrollto and scrolltoline parameters.

  1. Navigate to the VKM1 transaction and click on execute button as shown below:

  2. You can view the listscreen with two toolbar pushbuttons created. Click on Scroll Vertical to scroll the screen vertically.

  3. Click on Scroll Horizontal to scroll the screen horizontally.


Liquid UI Script

RVKRED01.E0120.sjs

//pushbutton to call z_HorScroll  function
pushbutton( [TOOLBAR], "Scroll Horizontal",{ "process": z_HorScroll }); // pushbutton to call z_VerScroll function
pushbutton( [TOOLBAR], "Scroll Vertical",{ "process": z_VerScroll });

function z_HorScroll(){
// function to horizontal scrolling on listscreen
onscreen 'RVKRED01.0120'
enter("/hscrollto=20");
}

function z_VerScroll (){
// function to vertical scrolling on listscreen
onscreen 'RVKRED01.0120'
enter("/scrolltoline=10");
}


Example2:

In this scenario, you will learn how to scroll the SAP table to fetch required values and assign them into Liquid UI fields using scrolling mechanism.

  1. Navigate to the VA02 transaction and enter an Order Number to fetch the required Order details from the SAP table of the VA02 second screen.

Learn more about Table Scroll.


Example3:

In this scenario, you will learn how to assign values to the SAP table from Liquid UI table using scrolling mechanism.

  1. Open SAP Easy Access screen and enter the values into the Liquid UI table.
  2. Click on the Assign to SAP Table toolbar pushbutton to assign these values to the SAP table of the VA01 second screen. Select the sales organization value from the pop-up window to continue the process.


Liquid UI Script

SAPLSMTR_NAVIGATION.E0100.sjs

del("X[IMAGE_CONTAINER]"); // deletes image 
pushbutton( [TOOLBAR], "Assign to SAP Table","?",{  "process":z_AssigntoSAPTbale,"size":[2,23]}); // pushbutton to call function 
//creating table  
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":"z_va01_material","position":2}); 
column('Order Quantity',{"table":"va01_AllItems","size":15,"name":"z_va01_Orderquantity","position":3}); 
 
//function to assign values to All Items table 
function z_AssigntoSAPTbale(){ 
 i = 0; //declaring variables and arrays 
 temp_items=[]; 
 temp_material=[]; 
 temp_quantity=[]; 
  
  // code to fetch data from Liquid table to arrays 
 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)){ 
  goto ENDLOOP; 
 } 
  
 temp_items.push(z_temp1); 
 temp_material.push(z_temp2); 
 temp_quantity.push(z_temp3); 
 i=i+1; 
 goto STARTLABEL; 
  
 ENDLOOP: 
 enter('/nva01'); 
 
// Create Standard Order: Overview 
onscreen 'SAPMV45A.0101' 
 set('F[Order Type]', 'OR'); 
 enter(); 
// Create Standard Order: Overview 
onscreen 'SAPMV45A.4001' 
 set('F[Sold-to party]', '1460'); 
 enter(); 
// Logic to assign array values to All item table 
onscreen 'SAPMV45A.4001' 
 gettableattribute("T[All items]", {"lastvisiblerow":"LVisRow"}) // gets lastvisible row 
 var z=1; 
 for(j=0;j<LVisRow;j++){  // assign values to visible rows in table 
  z_item_temp = temp_items[j]; 
  z_item_material = temp_material[j]; 
  z_item_quantity = temp_quantity[j];     
  set("cell[All items,Item,&V[z]]" , "&V[z_item_temp]");    
  set("cell[All items,Material,&V[z]]" , "&V[z_item_material]"); 
  set("cell[All items,Order Quantity,&V[z]]" , "&V[z_item_quantity]"); 
  z=z+1; 
 } 
 
 // on enter cursor moves to next row in table 
 START: 
 enter(); 
// logic assign values to rows after scrolling table using enter() 
onscreen 'SAPMV45A.4001'    
 z_item_temp = temp_items[j]; 
 z_item_material = temp_material[j]; 
 z_item_quantity = temp_quantity[j];  
 set("cell[All items,Item,&V[LVisRow]]" , "&V[z_item_temp]");  
 set("cell[All items,Material,&V[LVisRow]]" , "&V[z_item_material]"); 
 set("cell[All items,Order Quantity,&V[LVisRow]]" ,  "&V[z_item_quantity]");  
 j=j+1; 
 
 if(j<=i){ // loops until all liquid ui table values are assigned to sap table 
  goto START; 
 } 
 enter(); 
}