Purpose
Embed an HTML dialog

Our example demonstrates a graphical user interface for IW21 notifications (PC hardware malfunction)

Solution
- Implement the graphical part of the user interface as HTML page
- Embed the HTML page into the SAP GUI window with "Control"
- Use JavaScript to exchange variables between the HTML page and GuiXT

We start by adding pushbuttons on the IW21 screen that will bring up specialized dialogs for car maintenance, car malfunction and PC malfunction:


When the user presses the "PC malfunction" button , our specialized graphical UI comes up and from this the user can select the erroneous parts and error symptoms:



A click on the save button then creates the IW21 notification. For this demo example we only display the selected HTML fields in a test message. For a real application we would run through the IW21 screens and fill in the notification fields.

 

Link to HTML page:
Display embedded HTML page "iw21.pc.html"


GuiXT Script:

if not V[IW21_mode]
  Box (1,53) (8,73) "Special functions"
    Pushbutton (2,54) "Car maintenance" size=(2,17) process="IW21_start.txt"
       using MODE = "CAR2"
    Pushbutton (4,54) "Car malfunction" size=(2,17) process="IW21_start.txt"
       using MODE = "CAR1"
    Pushbutton (6,54) "PC malfunction" size=(2,17) process="IW21_start.txt"
       using MODE = "PC"

  stop script
 endif

// delete some standard elements
 del P[Notification]
del G[Reference]
del F[Notification Type] -triple
del F[Notification] -triple

// offer option to return to standard screen
 Pushbutton (toolbar) "Back to Standard PM Notification" process="IW21_start.txt"
  using MODE = ""

// PC malfunction dialog
if V[IW21_mode=PC]

  Title "Create PM notification: PC hardware malfunction"
   Box (0,0) (29,155) "PC hardware malfunction"
   Control (0.7,0.8) (28.9,155.4) _
    progID="file://C:\GuiXT\Scripts\iw21.pc.html" _
    name="control.pc"

  Pushbutton (30,1) "Save" process="IW21_save.txt" size=(2,16)
endif

// no action on Enter
 On Enter fCode="?"

InutScript "iw21.start.txt":

Parameter MODE

// Set dialog mode for IW21
Set V[IW21_mode] "&U[MODE]"

// close previous control
 CloseControl name="control.pc"

// re-open the transaction
Enter "/Niw21"

 

InutScript "iw21.save.txt":

// Create notification with HTML user input

// Get user input from HTML page
 CallJS html_to_guixt "&V[control.pc]"

// build up a test message for HTML status
 Set V[msg] "PC: &V[status_pc]"
 Set V[msg] "&V[msg]\nMonitor: &V[status_monitor]"
 Set V[msg] "&V[msg]\nKeyboard: &V[status_keyboard]"
 Set V[msg] "&V[msg]\nMouse: &V[status_mouse]"
 Set V[msg] "&V[msg]\nCamera: &V[status_camera]"
 Set V[msg] "&V[msg]\nMicrophone: &V[status_microphone]"

// display the test message
 Message "&V[msg]"

Return

JavaScript "html_to_guixt"

 
function html_to_guixt(ie)
{

    // obtain status object from HTML page
    var status = ie.document.parentWindow.return_status();

    // Set GuiXT variable for each status property
    for (var prop in status) 
    {
        guixt.Set("status_" + prop, status[prop]);
    };
};

JavaScript in HTML page "iw21.pc.html"

 // return status of malfunction report
 function return_status()
 {
   var status = {monitor:"", 
                 pc:"", 
                 keyboard:"",
                 mouse:"", 
                 camera:"", 
                 microphone:""};

    for (var prop in status) 
    {
      status[prop] = document.getElementById(prop).value;
    };
  
    return status;
 };

Components
InputAssistant + Controls