12.14 Integrate a webpage on an SAP screen

Prerequisites

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

Purpose

Learn how to position a screen element on the SAP screen using relative and non-relative positioning. And, view a webpage with a pushbutton created on an SAP screen. We will walk you through the following steps. 

1. Create a box to view the webpage
2. Create a scenario to view a webpage using relative positioning
3. Create a scenario to view a webpage using non-relative positioning
4. Add pushbuttons to call the functions
5. Create functions to view the webpage

User Interface

Create this file inside your script folder for customizing the Change Order: Initial Screen SAPLCOIH.E0101.sjs
//Now, let's start adding the Liquid UI script to the above file and save it.

Customization

1. Logon to SAP, and navigate to the IW32 (Change Order: Initial Screen).
    
   
    
2. Now, create a box with the label View Webpage to view the webpage on the SAP screen relatively with the Order input field.
   
    

   // Creates a rectangular box with the label View Webpage to view the webpage mentioned. 
   box([F[Order]+[5,0],"F[Order]+[28,120]",{"View Webpage"});

    
   
    

Now, let’s look into the process of how to view a webpage using relative positioning and non-relative positioning.

Viewing a webpage with relative positioning

Relative positioning - Refers to positioning a screen element on the SAP screen using the offset command with respect to the subsequently specified elements.

Learn more about the relative positioning of the SAP screen elements.

To demonstrate the process to view the given webpage using relative positioning, we'll walk you through the following:

1. Add a pushbutton with the label View with relative positioning to call the function viewWebpage on click.
   
    

   // Creates a pushbutton with the label as View with relative positioning to call a function, when clicked. 
   pushbutton([F[Order]+[2,0],"View with relative positioning","?",{"size":[2,24]",{"process":viewWebpage,"using":PTYPE":"WITHREL"}});

    
   
    
   

   Note: The usual offset option does not work with the view command, instead we are using the getCoords function.
    
2. Now, add the following Liquid UI script code to this file, and save the file.
   
    

   //function to view the webpage using relative positioning 
   if(z_iw32_scr == "WITHREL"){ 
    view([getCoords("F[Order]",[6,1]),[getCoords(["F[Order:true]",[27,118]),{"http://www.guixt.com/"}); 
     } 
    //Related Functions 
    function viewWebpage(param){ 
    onscreen 'SAPLCOIH.0101'  
    set('V[z_iw32_scr]','param.PTYPE);
    enter('?');
     } 
    function getCoords(field, offset){ 
    return([<field>.pos[0] + offset[0], <field>.pos[1] + offset[1]]; 
    } 

    
3. Now, refresh the SAP screen, and click the View with relative positioning button to view the given webpage (https://www.guixt.com/) relatively with respect to the Order input field in the box created, as shown in the image below.
    
   
    

Viewing a webpage without relative positioning

Non-relative positioning - Refers to the positioning of a screen element anywhere on the SAP screen by specifying the fixed row and column values.

Learn more about the non-relative positioning of the SAP screen elements.

To demonstrate the process to view the given webpage using non-relative positioning, we'll walk you through the following:

1. Add a pushbutton with the label View without relative positioning to call the function viewWebpage on click.
   
    

   // Creates a pushbutton with the label as View without relative positioning to call a function, when clicked. 
   pushbutton([F[Order]+[2,30],"View without relative positioning","?",{"size":[2,24]",{"process":viewWebpage,"using":{"PTYPE":"WITHOUTREL"}});

    
   
    
2. Now, add the following Liquid UI script code to this file, and save the file.
   
    

   //function to view the webpage using non-relative positioning 
   
   if (z_iw32_scr == "WITHOUTREL"){ 
    view([9,2],[30,118],{"https://www.guixt.com/"}); 
    } 
   //Related Functions 
    function viewWebpage(param){ 
    onscreen 'SAPLCOIH.0101'  
    set('V[z_iw32_scr]','param.PTYPE);
    enter('?');
    } 

    
3. Now, click the View without relative positioning button to view the given webpage (https://www.guixt.com/), as shown below.