8.11 Web Server Commands

Purpose

List of the commands that are specific to the WebUI interface.

Most of the commands included in this reference library can be used on multiple interfaces. However, the following commands can only be used with Liquid UI's Web Server and WebUI interfaces. These commands are as follows:

• htmlnode
• usecss
• usejs

We will explain these three commands in the following sections of this document.

htmlnode

The htmlnode command is used to read or to display HTML on SAP screens in WS. This can be very useful when users want to view images in Web Server or implement a Google map, to name two very common uses of the Htmlnode command. The syntax to display or read HTML in WS is as follows. The parameter '101' in the syntax example refers to the type of control - in this case it references an entry field.

htmlnode('101',[row,col],"html string");

1. Select an image to display. The supported file types are JPGs and GIFs.
2. Go to the Easy Access screen in SAP.
3. Open the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, and enter the following code. Create the file if it does not already exist.

   htmlnode(200,[5,70],[10,90],"<image src='./demo_img/branding-image.gif' width='301' height='245'>");

   In this example, we will display our image in a window beginning on Row 5, Column 70 and ending on Row 10, Column 90. The image area will be 301 pixels wide and 245 pixels high.

4. Save the changes and refresh the SAP screen. The relevant image will now display on the screen

To view Google maps with htmlnode:

1. Go to the Easy Access screen in SAP.
2. Open the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, and enter the following code to create a prototype string function. Create the file if it does not already exist.

   string.prototype.trim = function ( ) {
     return this.replace(/^\s+|\s+$/g,"");
   } 

   This function uses regular expressions to strip spaces from any strings.

3. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, create variables to store the values in the SAP fields. An example is shown below:

   var street;
   var district;
   var city;
   var state;
   var country;
   var zipcode;
   var customer; 

4. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, use the set command to copy the values from the SAP fields to the GuiXT variables we created in the previous step. An example is shown below:

   set("V[street]", "&F[Street/House Number]");
   set("V[customer]","&F[Customer.text]");
   set("V[district]","&F[District]");
   set("V[city]","&F[ADDR1_DATA-CITY1]");
   set("V[state]","&F[ARRD_DATA-REGION]");
   set("V[country]","&F[ADDR1_DATA-COUNTRY]");
   set("V[zipcode]","&F[ADDR1_DATA-POST_CODE1]"); 

5. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, generate the iFrame that will go into the HTML node. An example is shown below:

   var z_sold_to_address = "<iframe scrolling=no width=100% 
   height=360 frameborder=0 src=\"http://www.agawarehouse.com/tools/map/?address="
   +encodeURIComponent(street.trim( ))+"%20"+encodeURIComponent(district.trim( ))
   + "%20"+encodeURIComponent(city.trim( ))+ "%20"+encodeURIComponent(state.trim( ))
   + "%20"+encodeURIComponent(state.trim( ))+ "%20"+encodeURIComponent(country.trim( ))
   + "%20"+encodeURIComponent(zipcode.trim( ))+"\"></iframe> 

6. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, create the htmlnode. An example is shown below:

   htmlnode(200,[5,85],[50,140],z_sold_to_address); 

7. Save the changes and refresh the SAP screen. It will now display as shown below:

usecss

Modifying Web Server css files.

The usecss command is used to modify the included CSS format in the WS Web Server. These modifications are usually for personalizing the WS platform to match a customer's corporate environment, but can be for a variety of purposes. Some possible uses might be to add background image or to specify an external location for a CSS file. In this section we will demonstrate how to use the usecss command. 

Options

The usecss command does not take any options.

Adding a background image

To add a background image to the CSS, use the following syntax:

usecss("string");

The string in the preceding syntax would include the specifications for the background image. For example, if we wished to use the image file 'Synactive.jpg', we would need to add the following code to the config.sjs file in the C: \Program Files\Synactive Inc\GuiXTFuzion directory:

usecss("body.urBdyStd {background-image: url('.demo_images/synactive.jpg'); No-repeat;}");

This code will result in a background image being added to the server. CSS files are also maintained in the server.

Specifying an external CSS file

You can also specify an external file to use as the CSS file with GuiXT Web Server. The syntax is as follows:

usecss("C:\\Program Files\\Synactive Inc\\GuiXTFuzion\\test.css");

GuiXT Web Server will now use the specified file as the source for the CSS.

usejs("println('Hello, World')");

usejs("filename");

usejs("TestFunction.js");

usejs("C:\ScriptFiles\TestFunction.js");