Liquid UI - WS Reference Library

htmlnode()


Purpose

With htmlnode(), you can read or display HTML on SAP screens.

htmlnode() can be very useful when users want to view images or to implement a Google map in web server.


Syntax

htmlnode('101', [row,col], "html string");
The parameter '101' in the syntax example refers to the type of control - in this case it references an entry field.
 
Note: This command is very similar to the view command. However, the htmlnode command produces read-only results, while the view command can produce user-editable files and forms.


Options

The htmlnode() command does not take any options.

Viewing images

To view an image in SAP:

  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.

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

Viewing Google maps

To view a Google map in SAP:

    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.

  1. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, create variables to store the values in the SAP fields:
var street;
var district;
var city;
var state;
var country;
var zipcode;
var customer; 
  1. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, use the set() command to copy the values from the SAP fields to the Liquid UI variables, we created in the previous step:
 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]"); 
  1. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, generate the iFrame that will go into the htmlnode:
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> 
    1. In the 'SAPLSMTR_NAVIGATION.E0100.sjs' script file, enter the command:
htmlnode(200, [5,85], [50,140], z_sold_to_address); 
    1. Save the changes and refresh the SAP screen.

The screen appears as shown: