13.11 Clear table row selection

Prerequisites

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

Purpose

In this scenario, you will learn to remove the selection of a row on the table. We will walk you through the following steps.

1. Delete an image container on the SAP Easy Access screen using the del command
2. Add a Liquid UI table
3. Add a push button to execute a process on click
4. Add functionality to the push button and clears the row selection

User Interface

//Create this file inside your script folder for customizing the SAP Easy Access screen: SAPLSMTR_NAVIGATION.E0100.sjs
//Now, let's start adding the Liquid UI script to the above file and save it.

Customization

1. Logon to SAP and delete the image container on the SAP Easy Access screen using the del command.
   
    

   //Deletes an image container
   del("X[IMAGE_CONTAINER]");
   

    
   
   
   
    
2. Add a Liquid UI table with three columns labeled Item, Material, and Plant on the SAP screen.
   
    

   //Creates a table with Material List as title. The technical name is z_table, total number of rows is 100 and is defined as noneditable
   table([1,3], [10,27], {"name":"z_table", "title":"Material List","rows":100, "singlerowselection":true,"readonly":true});
   //Creates column with Item as title, at the first position, size as 4 and is readonly
   column("Item", {"position":1,"table":"z_table","name":"z_itemcolumn", "size":4,"readonly":true});
   //Creates a column with Material as title in the z_table, size as 9 and is noneditable
   column("Material", {"position":2,"table":"z_table","name":"z_matcolumn", "size":9,"maxlength":18,"readonly":true});
   //Creates a column with Plant as title in the z_table, size as 4 and is noneditable
   column("Plant", {"position":3,"table":"z_table","name":"z_plantcolumn", "size":4,"readonly":true});      
   

    
   
   
   
    
3. Add a pushbutton with the label Clear Selection on the screen.
   
    

   //Creates a pushbutton at row 1 and column 30 with Clear Selection as title, and on click executes deSelect process
   pushbutton( [1,30], "Clear Selection",{"process":deSelect});
   

    
   
   
   
    
4. Add a function deSelect to declare the three arrays with their respective values, and assign these values to the columns of a Liquid UI table.
   
    

   //Declares array values 
   item_array = ['10','20','30','40'];
   material_array = ['L-10Y','100-300','L-80F','CP-100'];
   plant_array = ['1000','1200','1200','1000'];
   
   //Assigns array values into the table columns
   for(j=0;j<material_array.length;j++){
      z_table.z_itemcolumn[j] = item_array[j];
      z_table.z_matcolumn[j] = material_array[j];
      z_table.z_plantcolumn[j] = plant_array[j];      
   }// Function to clear the row selection
   function deSelect(){
   onscreen '*'
   for(j=0; j<item_array.length; j++){   // Deselect line items
   z_table.selectedrows[j] = " ";
   }
   enter('?'); 
   }

    
   
    

SAP Process

1. Refresh the SAP Easy Access screen and select any row on the table. After selection, the row will appear in blue. Now, click the Clear Selection push button that executes the deSelect function and removes the selected table row values.
    
   
   
   
    

Next Steps

Clear Liquid UI table
Learn how easy is to clear all the table values.

10 min.

This article is part of the 4.0 Take a deep dive into the SAP table and Liquid UI table