14.08 Opening a webpage on an SAP screen using pushbutton

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: pushbutton(), view(), set(), del()

Purpose

In this article, you will learn how to:

• Open a webpage using the Liquid UI toolbar pushbutton created on the native SAP screen.
• View the webpage opened using the view command.

To demonstrate the above aspects, we’ll walk you through the following steps:

1. Delete unnecessary elements on the SAP screen using the del command.
2. Add three toolbar pushbuttons to call the function that opens the respective web pages.
3. Create a function to open and view the web pages mentioned.

User Interface

Create the file SAPLSMTR_NAVIGATION.E0100.sjs inside your script folder for customizing the SAP Easy Access screen.
//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 it using the del command, as shown below:
    

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

   
    
2. Add three toolbar pushbuttons with labels LiquidUI, Liquid UI for Desktop, and Liquid UI for Mobile to open the web pages https://www.liquid-ui.com, https://www.liquid-ui.com/products/desktop, and https://www.liquid-ui.com/products/mobile respectively, when clicked.
    

   // Creates three pushbuttons with labels as LiquidUI, Liquid UI for Desktop, and Liquid UI for Mobile to open the web pages mentioned.
   pushbutton([TOOLBAR,"@01\\@01\\Qwww.liquid-ui.com@LiquidUI", "?",{"size":[1,25]",{"process":pm_launchpad,"using":l_layout":"htmlview", "l_html":"https://www.liquid-ui.com/"}}); pushbutton([TOOLBAR,"@01\\Qwww.liquid-ui.com/products/desktop@Liquid UI for Desktop", "?",{"size":[1,25]",{"process":pm_launchpad,"using":l_layout":"htmlview", "l_html":"https://www.liquid-ui.com/products/desktop"}}); pushbutton([TOOLBAR,"@01\\Qwww.liquid-ui.com/products/mobile@Liquid UI for Mobile", "?",{"size":[1,25]",{"process":pm_launchpad,"using":l_layout":"htmlview", "l_html":"https://www.liquid-ui.com/products/mobile"}});

   
    
3. Now, add the following Liquid UI script to this file, and save it. Here, the function  pm_launchpad allows you to view the respective web pages by clicking the pushbuttons.
    

   function pm_launchpad(param){
     pm_layout = param.l_layout; 
     pm_html = param.l_html; 
    } 
   if(pm_layout=="htmlview"){ 
     view([3,38]),[30,193(["&V[pm_html]",[27,118]),{""floating":true"}); 
     set("V[pm_layout]"," "); 
     set("V[pm_html]"," "); 
    

    

SAP Process

1. Now, refresh the SAP screen, and click on the LiquidUI toolbar pushbutton to open and view the webpage https://www.liquid-ui.com, as shown in the image below.
    
   
    
2. To view the webpage http://www.liquid-ui.com/products/desktop, click the Liquid UI for Desktop toolbar pushbutton, as shown below.
    
   
    
3. Similarly, to view the webpage http://www.liquid-ui.com/products/mobile, click the Liquid UI for Mobile toolbar pushbutton, as shown below.