Purpose
Creating a Custom HTML Menu in SAP GUI

To go beyond the standard GuiXT interface elements—like buttons, group boxes, texts, and images—you can embed an HTML page directly into the SAP GUI. This allows for a more dynamic and visually rich user menu experience..

Solution

To implement an HTML-based menu within SAP GUI, follow these steps:

  • Design the menu as an HTML page. Create a visually appealing menu using standard HTML and CSS.

  • Embed the HTML page using the WebView command. Integrate the HTML content into the SAP GUI window via GuiXT’s WebView functionality.

  • Enable interaction with connectHTML and JavaScript. Use JavaScript to trigger GuiXT InputScripts from within the HTML page, allowing seamless communication between the HTML interface and GuiXT logic.

 

Example
To demonstrate the concept, we’ll build a simple HTML menu with clickable images representing different categories:

 

When a user clicks on an image:

  • A JavaScript function is triggered.

  • The selected category is passed as a parameter to an InputScript.

  • The InputScript can then perform any desired action—such as navigating to a sub-menu or executing a transaction.

For this example, we’ll simply display the selected category to illustrate the interaction.

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

 

GuiXT 

del X[IMAGE_CONTAINER]

// Display menu selection
WebView (0,0) (12.5,97.6) "menu100.html" name="mymenu" -transparent

// Connect HTML page to GuiXT
ConnectHTML name="mymenu"

 

HTML page

HTML

Components
InputAssistant + Controls