Automation of HTML pages

Automation of HTML pages

With the View command you can display an HTML page (internet, intranet, or using your own file or template file). The view can either be integrated into the SAP screen or can be shown as a separate window. The URL that you specify in the View command can contain one or more variables &V[xxx], e.g.

View (10,40) (30,120) "http://is0012/catalog/docu/&V[material].html"

In addition to this flexibility in building the URL string, GuiXT provides the possibility to define automatic actions on the page displayed and to enter and read values from the page.

You need the components InputAssistant and Viewer in order to use this feature.

We start with a simple example, displaying financial information for a company by invoking a web page, entering the company name into an entry field on the web page, and clicking a button on the page.

On the SAP screen, you offer the user a small menu where she can select the company (or enter the name directly) and then press a button to display the internet information:

// GuiXT Script
Offset (18,1)

Box (0,0) (7,36) "Company information"
Radiobutton (1,1) "DaimlerChrysler AG" name=Company value="DaimlerChrysler"
Radiobutton (2,1) "Intel Corporation" name=Company value="Intel"
Radiobutton (3,1) "SAP AG" name=Company value="SAP"
InputField (4,1) "Company name" (4,16) size=16 maxlength=60 name=Company
Pushbutton (6,1) "Financials" process="show_financials.txt"

The InputScript "show_financials.txt" opens an HTML View, fills in the company name and presses the "Search" button:

// InputScript "show_financials.txt"
View (0,0) (40,120) "http://finance.google.com" -floating

// Set company name and click "Search" button
Set html[text_q] "&V[Company]"
connectHTML click="submit_Search"

As you can see in the InputScript, the entry field in the HTML page can be addressed with Set like a normal InputAssistant variable, but instead of Set V[...] "value" you use Set html[...] "value". To press a button on the HTML page, or to click on a link, you use the connectHTML click="..." statement.

How do you know that the entry field in the HTML page has the name "text_q", and that the button has the name "submit_Search"? GuiXT uses a well defined set of rules to build the names of the elements; they are explained in the documentation of the statement connectHTML . There are two ways to get these names displayed:

The easier is to use the statement connectHTML -shownames in an InputScript. During development you can add onto the SAP screen a button that executes a script containing this statement, or you can put the statement directly into the InputScript that you are currently developing (but don't forget to remove it when you have finished). GuiXT will then display all internal names as tooltips on the page itself:

The second way is to use the statement connectHTML listelements="elm" in an InputScript. This fills the text "elm" with a list of all elements on the page. In some cases this is useful in an application, but normally it is used during development, since you can then pick up the elements from a small test display of the text (Textbox command).

// GuiXT Script
Pushbutton (0,80) "get HTML variables" process="get_variables.txt"
Textbox (1,80) (30,140) name="elm"

// InputScript "get_variables.txt"
// get all HTML elements
ConnectHTML listElements="elm"

// display current URL
ConnectHTML getURL="url"
Message "URL=&V[url]"

When you first have to perform several actions on a page, you can also start the View as a small window, and enlarge it as soon as all actions are completed. The user then gets a clear signal when the display is ready:

// Enhanced InputScript "show_financials.txt"
// Start with a small window
View (0,0) (8,60) "http://finance.google.com" returnWindow="ViewWindow"

// Set company name and click "Search" button
Set html[text_q] "&V[Company]"
connectHTML click="submit_Search"

// wait until page is completely loaded
connectHTML

// Enlarge window
WindowSize (40,120) window="&V[ViewWindow]"

Reading data from html pages can be done as well. When you use a variable &html[...] in a script statement, GuiXT will automatically look for an active HTML view and then try to find the variable. When you have more then one HTML view open, use the connectHTML statement preceded by the window= parameter to indicate from which view the html[..] variables should be read.

As a possible application, imagine that a company already has an internet based article information system, from which you can select articles and fill a shopping basket. In the SAP order entry transaction you can offer a new button that opens this catalog with a View statement. The user then selects the articles, displays the shopping basket and finally presses a second button in the SAP transaction. Now an InputScript starts; it reads the shopping basket items and enters all article numbers and quantities into the entry table of the SAP transaction.

An internet based shopping basket is read into the order item table of transaction VA01.

(with kind permission of ESA, Switzerland, http://www.esashop.ch)

As an example of how an HTML table can be read, look at the following temperature table (below, left hand side). Here we have already used the connectHTML -shownames statement to display a cell name. Since there are other tables on the page, this is table number 15. We want to read all temperatures in our InputScript and then display a message with the yearly average temperature for each city (below, right hand side) to demonstrate the technique.:

Source: http://www.visitusa.org

The InputScript reads the temperature table from the HTML page, calculates the average temperature for each city, and displays the result in a message box:

// Sample script to read an HTML table

// clear message variable
Set V[msg] ""

Set V[row] 2 // first row contains column headers, so start with second

label next_row

// end of table?
if not html[cell_15.&V[row].1]
goto end_of_table
endif

Set V[city] "&html[cell_15.&V[row].1]"

Set V[col] 2
Set V[temperature] 0

label next_col
if V[col=14]
goto end_of_row
endif

Set V[temperature] &V[temperature] + "&html[cell_15.&V[row].&V[col]]"

Set V[col] &V[col] + 1
goto next_col

label end_of_row

// Average temperature
Set V[temperature] &V[temperature] / 12 decimals=1

Set V[msg] "&V[msg]&V[temperature]\t&V[city]\n" // \t = tab \n = newline

Set V[row] &V[row] + 1
goto next_row

label end_of_table

// display message
Message "&V[msg]" title="Average temperature in &html[cell_15.1.1]"

When you automate HTML pages, in particular when they are not under your own control, it is often a good idea to add safety checks, since the page layout might change one day. You can also check the current URL if you want to be sure that the user has not left the page:

// Check URL first
connectHTML getURL=viewURL
if not V[viewURL=http://....]
Return "This function works on page xxx only, you have navigated to a different page"
endif

// Safety check for page layout
Set V[month01] "&html[cell_15.1.2]"
Set V[month12] "&html[cell_15.1.13]"
if not V[month01=Jan.] or not V[month12=Dec.]
Return "Layout of HTML page changed, GuiXT script needs to be adapted"
endif

When you work with your own HTML pages in the View command, as described in Designing display transactions with GuiXT Viewer and in Display complex business objects with HTML, the automation techniques described here can be used to simplify the scripts, and we can provide additional interactive features. To communicate with the HTML page, you can use hidden fields and buttons, since they can be addressed by the connectHTML automation as well. This allows us to write HTML pages that offer an interface for a certain display or data entry functionality.

Here we present an HTML page of this type that can be used in many cases, namely a general table display. It is well suited to demonstrate the basic principles, and you also can immediately use the page for your applications.

Imagine that you have some tabular data available in your script, for example as the result of a BAPI call. You want to display the data in the form of a table in an HTML view, where it can also be printed by the user. In some cases you also want to have some kind of interaction, like selecting a line.

The interface that we use here consists of the following elements:

Table title
Table subtitle
Column width specification
Column headers
Data

Typical table displays of this kind look like this:

Or, with more columns:

In the HTML page, we define the (hidden) interface as follows:

The interface accepts the following data:

title: A string with the table title. Example: "Business areas". If not given, no title is displayed.
subtitle: A sting with the table subtitle. Example: "List of all business area ...". If not given, no subtitle is displayed.
width: A list of column widths (in pixel), separated by ";" or the given delimiter string. Example: "60;400". If not given, a default column width is used.
header: A list of column headers, separated by ";" or the given delimiter. Example: "BA;Business area". If not given, no column headers are specified.
delimiter: A string that is not contained in the data. Example: "||". If not given, ";" is used.
row1,...row9: A list of data for each row, separated by ";" or the given delimiter. Example: "1000; Mechanical Engineering". Each time row9 is filled, all rows are automatically saved so that the script can start again filling row1. This is for performance reasons, to minimize context switches between the GuiXT script and the Browser.
DisplayTable button: A click on this button will display the whole table

More elements (such as a color or a footer text) can easily be added.

Click here to display the HTML file guixt_tabledisplay.html. Feel free to use it in your own applications.

The InputScript that displays the Business Areas list uses the BAPI_BUSINESSAREA_GETLIST:

// Get list of all business areas from SAP database
Call "BAPI_BUSINESSAREA_GETLIST" table.BUSINESSAREA_LIST="bal"

// Try to use open view window, or open a new one
ConnectHTML window="&V[viewwindow]"
if not Q[ok]
View (14,0) (40,80) "guixt_tabledisplay.html" -floating returnwindow="viewwindow"
endif

// Set table display parameters
Set html[text_title] "Business areas"
Set html[text_subtitle] "List of all business areas defined in system &V[_database] client &V[_client]"
Set html[text_header] "BA;Business area"
Set html[text_width] "60;400"

// Now transport all data to HTML page
Set V[i] 1
Set V[k] 1

label set_row
CopyText fromText="bal" toString="ba" line=&V[i]

// all lines processed?
if not Q[ok]
goto done
endif

// single fields according to BAPI definition
Set V[f1] "&V[ba](BAPI0003_1-BUS_AREA)"
Set V[f2] "&V[ba](BAPI0003_1-BUS_AR_DES)"

// to HTML page
Set html[text_row&V[k]] "&V[f1];&V[f2]"

// next interface row, start with first one if necessary
Set V[k] &V[k] + 1
if not html[text_row&V[k]]
Set V[k] 1
endif

Set V[i] &V[i] + 1
goto set_row

label done
connectHTML click="button_DisplayTable"

return

The example with the sales order display is fairly similar. Only the "packed decimals" used in the BAPI table need special handling:

Parameter SDNO // Sales document number

// Force leading 0000...
Set V[sdno] "&U[SDNO]" + 10000000000
Set V[sdno] "&V[sdno](2-11)"

Call "BAPI_SALESORDER_GETSTATUS" in.SALESDOCUMENT="&V[sdno]" table.STATUSINFO="sdinfo"

// Try to use open view window, or open a new one
ConnectHTML window="&V[viewwindow]"
if not Q[ok]
View (14,0) (40,80) "guixt_tabledisplay.html" returnwindow="viewwindow"
endif

// Set table display parameters
Set html[text_title] "Sales document &U[SDNO]"
Set html[text_subtitle] "Overview as of &V[today_d.m.y]"
Set html[text_header] "Product;Text;Quantity;Unit;Net value;Net Price;Currency;Delivery;Date;Quantity;Purchase No; Req.Date"
Set html[text_width] "80 ;300 ;50 ;40 ;100 ;100 ;50 ;120 ;100 ;50 ;120 ;100"

Set V[i] 1
Set V[k] 1

label set_row
CopyText fromText="sdinfo" toString="sdline" line=&V[i]

// all lines processed?
if not Q[ok]
goto done
endif

// single fields according to BAPI definition
Set V[f1] "&V[sdline](BAPISDSTAT-MATERIAL)"
Set V[f2] "&V[sdline](BAPISDSTAT-SHORT_TEXT)"
Set V[f3] "&V[sdline](BAPISDSTAT-REQ_QTY)" -unpack
Set V[f3] "&V[f3]" / 1000

Set V[f4] "&V[sdline](BAPISDSTAT-SALES_UNIT)"
Set V[f5] "&V[sdline](BAPISDSTAT-NET_VALUE)" -unpack
Set V[f5] "&V[f5]" / 100 decimals=2 decimalseparator=UserDefault groupseparator=UserDefault

Set V[f6] "&V[sdline](BAPISDSTAT-NET_PRICE)" -unpack
Set V[f6] "&V[f6]" / 100 decimals=2 decimalseparator=UserDefault groupseparator=UserDefault

Set V[f7] "EUR" //"&V[sdline](BAPISDSTAT-CURRENCY)"
Set V[f8] "&V[sdline](BAPISDSTAT-DELIV_NUMB)"
Set V[f9] "&V[sdline](BAPISDSTAT-DELIV_DATE)"
Set V[f10] "&V[sdline](BAPISDSTAT-DLV_QTY)" -unpack
Set V[f10] "&V[f10]" / 1000

Set V[f11] "&V[sdline](BAPISDSTAT-PURCH_NO)"
Set V[f12] "&V[sdline](BAPISDSTAT-REQ_DATE)"

// to HTML page
Set html[text_row&V[k]] "&V[f1];&V[f2];&V[f3];&V[f4];&V[f5];&V[f6];&V[f7];&V[f8];&V[f9];&V[f10];&V[f11];&V[f12]"

// next interface row, start with first one if necessary
Set V[k] &V[k] + 1
if not html[text_row&V[k]]
Set V[k] 1
endif

Set V[i] &V[i] + 1
goto set_row

label done

connectHTML click="button_DisplayTable"

return

Using the same HTML file, it is also possible to define interactions on the table display, or to allow data entry:

We will describe this in a separate "Special Topic".