Purpose
Display an HTML page transparently so that the SAP GUI background remains visible

Solution
In the HTML <body> tag,  set the background color to "transparent":

<body style="background-color: transparent; margin: 0px;">

And in the WebView command add the -transparent option:

WebView    ....   -transparent

Example
In transaction VA01, we add an HTML page that allows the user to select the sales area and the sales office by clicking on a region displayed in a map:

Quartz Theme

SAP Signature Theme

 

Without the "transparent" option, the HTML page is displayed with the default white background. Also, since it is a bit too large to fit in the SAP GUI box, it overlaps the box's frame:

Without "transparent" option 

 

GuiXT Script

BoxSize   G[Organizational Data]   (9,94)
WebView
   (4.8,45)  (13.7,96.1)    "worldmap.html" _
 
name="worldmap" -transparent -closeOnHide
connectHTML
name="worldmap"

HTML

<!DOCTYPE html>
<html>
<head>

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

    <title>Select the sales area</title>

    <script type="text/javascript">	

        var guixt = null;

        function guixt_initialize(obj) {
            guixt = obj;
        };

        function select_salesarea(key) {
            var parts = key.split(',');
            var vkorg = parts[0];
            var vtweg = parts[1];
            var spart = parts[2];
            var vkbur = parts[3];

            guixt.input("VBAK-VKORG:" + vkorg);
            guixt.input("VBAK-VTWEG:" + vtweg);
            guixt.input("VBAK-SPART:" + spart);
            guixt.input("VBAK-VKBUR:" + vkbur);
        };

    </script>
</head>

<body style="background-color: transparent; margin: 0px;">

    <img src="worldmap.png" style='width: 320px; height: 160px;' 
         usemap="#worldmap">
    <map name="worldmap">
        <area title="North America" 
                onclick='select_salesarea("1710,10,00,170")' 
                shape="poly" coords="...">
        <area title="South America" 
                onclick='select_salesarea("1020,20,00,212")' 
                shape="poly" coords="...">
        <area title="Europe" 
                onclick='select_salesarea("1010,10,00,100")' 
                shape="poly" coords="...">
        <area title="Africa" 
                onclick='select_salesarea("1050,10,00,500")' 
                shape="poly" coords="...">
        <area title="Asia" 
                onclick='select_salesarea("1060,10,00,380")' 
                shape="poly" coords="...">
        <area title="Australia" 
                onclick='select_salesarea("1070,10,00,160")' 
                shape="poly" coords="...">
    </map>
</body>

</html>


Download


You can download the required files here: worldmap.zip


Components
InputAssistant + Controls