4.02 WS Development Rules

WS Development Rules refer to the guidelines, conventions, and best practices for developing scripts in Liquid UI WS (WebScript) to customize and automate SAP GUI screens. Liquid UI is a tool used to enhance and streamline SAP user interfaces, allowing developers to modify screen layouts, automate tasks, and optimize the overall user experience. In this article, you will learn how to develop WS scripts to customize the SAP screens using Liquid UI WS. You can run the WS scripts using Liquid UI WS or Liquid UI Server.

Prerequisites

• Products: Liquid UI WS/Liquid UI Server

The following are the WS Development Rules:

Naming Conventions:

The WS script file should include both the program name and dynpro number (screen number) of the SAP screen to ensure the script is linked to the specific SAP screen.

You can find the dynpro name/program name and dynpro number of an SAP screen in your SAP GUI. These details are usually visible in the System: Status window, as shown in the image below:

Note: You can also use WS system variables to find the SAP screen program name and dynpro number.

The script file naming convention for an SAP Easy Access screen is defined as follows:

SAPLSMTR_NAVIGATION.E0100.sjs

The elements of the SAP screen script file name are explained in detail below:

Function script file naming convention

The functions scripts are loaded into the system inside the esession.sjs file and should be loaded before executing the actual processes. For screen processes, the functions are called from various processes listed in function script files. In any application, the following naming convention is used for Liquid UI WS function scripts:

scripts.proc_app_module_package_prog.sjs

proc_app_module_package_prog.sjs

Functions

Functions in the WS script facilitate the synchronization of data with SAP screens. This simplifies navigation between multiple screens and allows for screen-level data validation.

The naming convention for functions is as follows:

Function proc_app_module_package_prog()
{
//code here
}

Variable Naming Convention:

The Variable Naming Convention uses the z_ prefix for custom variables, followed by the lowercase transaction code (e.g., ie03) and the field name (e.g., selectedEquip).

The naming convention for variables is explained in detail below:

(Example: selected quiz for referring to equipment number)

Thus the variable z_ie03_selected would be used to save the selected equipment number.

Note: Variable names are case-sensitive.

Language Handling

WS scripts are language-dependent. While English is the default language in SAP GUI, you can change the language on your SAP screens and customize the screens using WS scripts. Therefore, you need to ensure that the scripts use either technical names or the label names of the screen elements in the selected language.

While saving your script file, you need to verify the language key and update the screen script file name to help the system identify the language that is used in the script file. You can add a no language key option in the guixt.sjs file to avoid including a language key in your script file name.

In this scenario, you will learn how to change the language to Spanish in the SAP GUI and create a script file for the Spanish language.

1. Open SAP GUI, enter credentials, edit the logon language code as ES (Spanish) in the SAP Logon screen, and click enter.
   
    
   
    
2. You will now be navigated to the SAP Easy Access screen, where all the text will appear in Spanish, as shown in the image below.
   
    
   
    
3. Enter VA02 in the t-code field to navigate to the Change Sales Order: Initial Screen.
   
    
   
    
4. Delete the group box and three input fields labeled Entrega, Nº pedido cliente, Solicitante, and Criterios de búsqueda.
   
    

   //Deletes three input fields and a group box
   del("F[Entrega]");
   del("G[Criterios de búsqueda]",{ "box":true});
   del("F[Nº pedido cliente]");
   del("F[Solicitante]");
   

    
   
    
5. Change the position of the three input fields labeled Doc.facturación, Material, and Elemento PEP.
   
    

   //Changes the position of the three input fields
   pos("F[Doc.facturación]", [4,1]);
   pos("F[Material]", [6,1]);
   pos("F[Elemento PEP]", [5,1]);
   

    
   
    
6. Change the position of the pushbutton using its technical name, as shown below:
   
    

   //Changes the position of the pushbutton
   pos("P[BT_SUCH]", [2,59]);