17.22 How to create hidden Liquid UI fields to display a description?

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: pushbutton(), box(), set(), del(), onscreen, enter(), return(), text(), onUIEvents()

Purpose

In this article, you will learn how to:

• Create invisible Liquid UI fields on the SAP Easy Access Screen.
• Display the description of the given input value on an SAP screen using Liquid UI WS 

To showcase this feature, we’ll guide you through a scenario consisting of the following steps.

1. Set the Directory Path in the guixt.sjs file to customize the SAP screen.
2. Delete unnecessary elements on the SAP Easy Access screen using the del command.
3. Create a box using the box command to display the hidden input fields and descriptions.
4. Create five input fields to enter the values.
5. Add text commands for input fields to display the description on the SAP screen.
6. Add a function to read the text value of the fields.
7. Add an onUIEvents command to trigger the function.

User Interface

//Create the file SAPLSMTR_NAVIGATION.E0100 inside your script folder for customizing the SAP Easy Access screen

//Now, let's add the Liquid UI script to the above file and save it.

Customization

1. Open the guixt.sjs file and set the directory path, as shown in the following image.
    
   
    
   

   Note: The guixt.sjs file can be found in the following path.

   C:\Program Files\SAP\FrontEnd\SAPgui --> 32-bit O.S

   C:\ProgramFiles(x86)\SAP\FrontEnd\SAPgui --> 64-bit O.S

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

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

    
   
    
3. Now, create a box using the box command with the label Organizational Data, where you can add the hidden input fields and their description fields, as shown in the image below.
    

   // Creates a box with the label Organizational Data to create the input fields. 
   box([3,0],[8,98], "Organizational Data");
   

    
   
    
4. Create five input fields with labels as Order Type, Sold-To Party, Sales Organization, Distribution Channel, and Division to enter the values, as shown below.
    

   // Creates five input fields with labels as Order Type, Sold-To Party, Sales Organization, Distribution Channel, and Division to enter the input.
   inputfield([1,2],"Order Type",[1,20],{"name": "z_ordertype","size":5});
   inputfield([4,2],"Sold-To Party",[4,20],{"name": "z_soldtoparty","size":8});
   inputfield([5,2],"Sales Organization",[5,20],{"name": "z_salesorganization","size":8});
   inputfield([6,2],"Distribution Channel",[6,20],{"name": "z_distrchnl","size":8});
   inputfield([7,2],"Division",[7,20],{"name": "z_div","size":8}); 

    
   
    
5. Now, add a text command for each input field created to display their description on the SAP Easy Access screen, as shown below. 
    

   // Creates five text commands to display the description of the created input fields. 
   text([1,27],"&V[z_ordertype]",{"size":20});
   text([4,30],"&V[z_soldtopartyvalue]",{"size":22});
   text([5,30],"&V[z_salesorg]",{"size":20});
   text([6,30],"&V[z_distributionchannel]",{"size":22});
   text([7,30],"&V[z_division]",{"size":20});
   

    
   
    
6. Now, add a function named getvalue to read the Text/Name value of the fields, as shown below.
    

   // Function to read the Text/Name Value of the Fields. 
   function getvalue(){ 
    onscreen 'SAPLSMTR_NAVIGATION.0100' 
    enter("/nva01"); 
    onscreen 'SAPMV45A.0101' 
    set("F[Order Type]","&V[z_ordertype]"); 
    set("F[Sales Organization]","&V[z_salesorganization]"); 
    set("F[Distribution Channel]","&V[z_distrchnl]"); 
    set("F[Division]","&V[z_div]"); 
    enter(); 
    onerror 
    enter("/n");message(_message); 
    goto End; 
    onscreen 'SAPMV45A.4001' 
    set("F[Sold-To Party]","&V[z_soldtoparty]"); 
    enter(); 
    onscreen 'SAPMV45A.4001' 
    enter("/2"); 
    set("F[Sold-To Party]);","&V[z_soldtoparty]"); 
    enter(); 
    onscreen 'SAPMV45A.4001' 
    enter("/2"); 
    set("V[z_soldtopartyvalue]);","&F[KUAGV-TXTPA]"); 
    enter("/3"); 
    onscreen 'SAPMV45A.4001' 
    enter("/3"); 
    onscreen 'SAPLSPO1.0100' 
    enter("=NO"); onscreen 'SAPMV45A.0101' 
    set("V[z_salesorg]);","&F[TSPAT-VTEXT]"); 
    set("V[z_distributionchannel]);","&F [TVTWT-VTEXT]"); 
    set("V[z_division]);","&F[TSPAT-VTEXT]"); 
    enter("/3"); 
    End:; 
    } 

    
7. Now, call the getvalue function using the OnUIEvents command.
    

   // Creates five text commands to display the description of the created input fields.
   //Calling the Function through on User Event (onUIEvents):
   onUIEvents["Enter"]={"process":getvalue};

    
   

   Note: Here, the function getvalue is recorded using Liquid UI Designer.

    

SAP Process

1. Now, refresh the SAP Easy Access screen, and enter the values for the input fields created as follows.
   • Order Type: OR
   • Sold-To Party: 1460
   • Sales Organization: 1000
   • Distribution Channel: 10
   • Division: 00
    
   
    
2. Click enter to get the description of the values entered for the input fields on the SAP screen, as shown in the image below.