Purpose
Embed an HTML menu

A user menu that goes beyond the normal GuiXT means, such as buttons, group boxes, texts and images, can be realized by embedding an HTML page.

Solution
- Implement the menu as HTML page
- Embed the HTML page into the SAP GUI window with "Control"
- Use connectHTML and JavaScript to call up an InputScript from HTML

Example
To show the principle we implement the following menu:

 


When the user clicks on one of the images, we call an InputScript and pass the selected city as parameter. The InputScript can now perform arbitrary actions, such as executing a transaction. For the example we only show the selected city:

// parameter passed from HTML page
 
Parameter DEST
 
 
// display a test message
 
Message "&U[DEST]" -statusline
 
 
// return
 
Return

 

GuiXT script

del X[IMAGE_CONTAINER]
 
Control (1,1) (12.5,97.6) progid="file://menu100.html" name="mymenu"
 
connectHTML name="mymenu"

 

HTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">

// GuiXT object
var guixt;
 
// called by connectHTML, passes GuiXT object
function guixt_initialize(obj)
{
  guixt = obj;
};


function select(destination)
{

 // start InputScript "myscript.txt"
 // pass selected destination as parameter DEST
 guixt.Input("U[DEST]:" + destination + ";OK:/0,process=myscript.txt");

};
</script>


</head>

<body style="margin: 10px; background-color: white">

<span style="font-family: Verdana; font-size: 36px; color: #808080">
Please select your destination:</span><br />

<img style="height:180px; margin-right:10px; cursor:pointer;"  
   src="rome.png"  
   alt="Rome" title="Destination Rome"
   onclick="select('Rome');"/>

<img style="height:180px; margin-right:10px; cursor:pointer;" 
   src="london.png" 
  alt="London" title="Destination London"  
  onclick="select('London');"/> 

</body>

</html>

Components
InputAssistant + Controls