HTML pages can easily be embedded into the SAP GUI window via  GuiXT Controls. We have two possibilities:

  • We specify the http address as ProgID in the control statement. This will automatically open up the Internet Explorer control with the given URL. We can read and set HTML values and perform automated user actions (e.g. click on a button) using the  connectHTML statement.

  • Or we specify the Microsoft Explorer Control directly with progID="Shell.Explorer". We can then use both the connectHTML interface of GuiXT and the explorer control methods (DOM access) in the VBScript functions.

As an example we embed a "Google" search window into the SE37 screen (function library). We offer a pushbutton that searches the specified function module in SAP SDN. Following the method shown in tutorials 4 and 5, we offer the user the possibility to display and hide our additional window:

 if V[show_se37_sdn=X]
  Box (6,0) (32,90) "SAP SDN"
  Pushbutton (6,91) "x" process="toggle_se37_sdn.txt" size=(1,2)
  Control (7,1) (32,90) progID="http://www.google.com" name="se37_sdn"
 else
  Pushbutton (8,1) "Search function in SAP SDN (Demo GuiXT Controls)" process="toggle_se37_sdn.txt" size=(1,62)
endif

 

With this script the user interface is as follows::

The user clicks the "Search function ... " button:

A Google search window is displayed.

Next development step: we copy the given function module name into the Google search field and start the search in "sdn.sap.com", both with the connectHTML statement. Since the "Search" button first has the name "Google_Search" and then "Search", we have both names in our script. You can display the button and field names that connectHTML uses for the HTML elements with the command connectHTML -showNames.

if V[show_se37_sdn=X]
  Box (6,0) (32,90) "SAP SDN"
  Pushbutton (6,91) "x" process="toggle_se37_sdn.txt" size=(1,2)
  Control (7,1) (32,90) progID="http://www.google.com" name="se37_sdn"

  connectHTML object="&V[se37_sdn]"
 
  Set html[text_q] "&F[RS38L-NAME] site:sdn.sap.com"
 
  if html[submit_Google-Suche]
    connectHTML click="submit_Google_Search"
  else
    connectHTML click="submit_Search"
  endif

else
  Pushbutton (8,1) "Search function in SAP SDN (Demo GuiXT Controls)" process="toggle_se37_sdn.txt" size=(1,62)
 endif

Now the Google search is processed automatically with the given function module and the user gets the matching pages of SAP SDN:

In a similar manner we can use the  "Shell.Explorer" control:

if V[show_se37_sdn=X]
  Box (6,0) (32,90) "SAP SDN"
  Pushbutton (6,91) "x" process="toggle_se37_sdn.txt" size=(1,2)
  Control (7,1) (32,90) progID="Shell.Explorer" name="se37_sdn" initFlag="se37_sdn_init"

if V[se37_sdn_init=X]
  CallVbs ie_init "&V[se37_sdn]" "http://www.google.com"
 endif

  connectHTML object="&V[se37_sdn]"
 
  Set html[text_q] "&F[RS38L-NAME] site:sdn.sap.com"
 
  if html[submit_Google-Suche]
    connectHTML click="submit_Google_Search"
  else
    connectHTML click="submit_Search"
  endif

else
  Pushbutton (8,1) "Search function in SAP SDN (Demo GuiXT Controls)" process="toggle_se37_sdn.txt" size=(1,62)
 endif

Our VBScript function "ie_init" calls the "Navigate()" method of the control in order to navigate to the specified URL:

 Function ie_init(ie, url)
    ie.Navigate(url)
End Function


 The same actions can be executed using direct DOM access (document object model). In doing so we need to observe the following:

  • After processing the "Navigate()" it is necessary to wait until the web page has been loaded before we can interact with its elements. We can query the document state and can call the "guixtDoEvents()" function in a loop until the document is loaded. The function "guixt.DoEvents()" (see VBScript below) waits a few milliseconds and then processes all asynchronous Windows messages that the browser control uses to load the document.

  • When we now use the DOM for addressing the search entry field and the button, we need the internal element names. You can either look at the source code (which is not simple for Google type web pages) or use a suitable HTML developer tool to obtain the internal names. Note that these can change from one day to the next.

Considering the degree of difficulty with the internal names, it is advisable to restrict direct DOM access to web pages that are developed internally in your company.

The entire example, without using connectHTML, is then as follows:

if V[show_se37_sdn=X]
  Box (6,0) (32,90) "SAP SDN"
  Pushbutton (6,91) "x" process="toggle_se37_sdn.txt" size=(1,2)
  Control (7,1) (32,90) progID="Shell.Explorer" name="se37_sdn" initFlag="se37_sdn_init"

if V[se37_sdn_init=X]
  CallVbs ie_init "&V[se37_sdn]" "http://www.google.com"
 endif

 CallVbs ie_google_search "&V[se37_sdn]" "&F[RS38L-NAME] site:sdn.sap.com"

else
  Pushbutton (8,1) "Search function in SAP SDN (Demo GuiXT Controls)" process="toggle_se37_sdn.txt" size=(1,62)

endif

VBScript function "ie_google_search":

Function ie_google_search(ie,s)

 ' wait until document is loaded
  Const READYSTATE_LOADING = 1
  
  Do
   guixt.DoEvents()
   Loop While ie.ReadyState = READYSTATE_LOADING


   ' document
   Dim doc
   Set doc = ie.document
  
  ' set search string
  doc.getElementsByName("q")(0).value = s
  
  ' click search button
  doc.getElementsByName("btnG")(0).click()

    
End Function

 

Communication with GuiXT in your own HTML pages

If you embed your own HTML pages into the SAP GUI window, you may want to exchange data between HTML script functions (JavaScript or VBScript) and GuiXT. This can be done using the "guixt" object in HTML: you can set and get GuiXT variables and long text variables, execute RFC commands, set SAP entry fields and perform SAP actions.

The communication is established with the connectHTML statement. You use connectHTML and, with object="...",  specify the reference to the web browser control. The connectHTML then searches a script function "guixt_initialize" in your HTML code and, if found, calls this function passing the "guixt" object. You can save the "guixt" object reference and use it later on in your HTML script functions.

This perhaps sounds more complicated than it actually is. We demonstrate the technique with a "Hello World" example:

GuiXT Script:

Set text[ot] "Hello World!"

Control (20,1) (24,120) progID="file:///C:\temp\gcomm.html" name="wb"

ConnectHTML object="&V[wb]"

Our HTML page "gcomm.html" reads the long text variable "ot" via the  "guixt" object and displays the text:

<html>
<head>

<script type=text/vbscript>

  dim guixt

  // This function is called by GuiXT connectHTML command:
  Function guixt_initialize(obj)
    Set guixt = obj
    document.write(guixt.getText("ot"))
  End Function

</script>

</head>

<body>
</body>

</html>

 

Result: