5.3 Customize SAP with Liquid UI SDK

Using the Liquid UI SDK, you can simplify the SAP screens easily. It provides you the ability to replicate and customize the SAP screen using WYSIWYG or Script editor of the Liquid UI Designer. You can make several changes on the SAP screen using the WYSIWYG editor of Liquid UI Designer, and the associated script will be generated automatically in the script editor. In the script editor, you can also edit the script to add the required functionality to the SAP screen. Once the SAP screens are customized, then using Liquid UI Server, you can view these simplified screens on your client devices.

To customize an SAP transaction screen with Liquid UI SDK, please follow the below steps:

1. To launch Liquid UI Designer on your system, navigate through C:\Program Files (x86)\Liquid UI SDK\LUI Designer. Select the Designer and run as an administrator.
    
   
2. Login to SAP and navigate to the MM01 transaction on your SAP GUI. Click refresh in the Liquid UI Designer to sync Designer and SAP GUI.
    
   
3. To delete the Industry Sector input field and the dropdown list associated with it, select them using a CTRL-key. Then, perform a right-click on it to view the context menu and select the delete option.
    
   
4. After deleting the field in the WYSIWYG mode as shown below:
    
   
5. Click Save to save the newly created script file for the changes made on the MM01 transaction. Remember, you need to save this file in your scripts directory.
    
   
    
   

   Note: You need to save the script file in the same script directory path set for Liquid UI Server. Also, you can set the script directory path under Designer Options.

    
6. Switch Designer to the WYSIWYG mode, and select the required fields to rearrange them as shown below.
    
   
7. Click the groupbox icon in the designer and place it in the desired location on the screen.
    
   
8. Double-click on the box to open its property window. Edit the text field to add the label name as Industry Sector and click Apply and then click OK.
    
   
9. To add a radiobutton, click the radiobutton icon and place it on the groupbox, as shown below:
    
   
10. Now, double click on the radiobutton to add the label name as Beverage. The screen now appears, as shown below:
     
    
11. Likewise, add more radiobuttons for replacing the Industry Sector types on the WYSIWYG editor of the Designer.
     
    
12. The script editor window will generate the script automatically after completing every action under the WYSIWYG editor. Click save to see the changes done in the Designer to replicate on your SAP GUI.
     
    
13. Finally, refresh the MM01 transaction screen to see all the customizations. Now you can select the desired Industry Sector with a single click.
     
    

WS Development Rules
Learn how to name your script files – naming convention.

5 min.

This article is part of the 1.0 Get started with the Liquid UI development tutorial.