Purpose
Data is to be visualized in the form of a diagram or chart on the SAP GUI.
|
Solution
Embed an HTML page that uses a JavaScript library for visualizing data. Use the GuiXT object in JavaScript to obtain the data. |
Example:
There are a number of sophisticated javaScript frameworks for data visualization.
Many of them are open-source and can be used straight away.
In this example the Chart.JS library is used. The library is embedded into a local HTML page
and this page is then embedded and controlled with the GuiXT control on the screen.
The chart is intended to show the items with the highest sales of a customer's purchase orders: |
The GuiXT Script:
Control
(7.5,69.7)
(23.9,173.4) _
connectHTML
name="mychartcontrol"
// -showNames
Pushbutton
(5,103)
"@GZ@Visualize top order positions" _
InputField
(6,72) "Maximum elements"
(6,92) _
InputField
(5,72) "Customer"
(5,92) _ |
The connection between GuiXT and the embedded HTML file
The embedded page is a standard document that you can modify and test in your browser. The idea is that you then use the keyword connectHTML so you can use GuiXT to invoke JavaScript code and also use the data in GuiXT variables in JavaScript functions. You can use the option -showNames to display the name of any element when you point the mouse onto it. Our InputScript will push the button with the ID "create", so the name in the option is "button_create". We also set display:none in the style for the button so it is not visible on the SAP GUI screen. |
The InpuScript
CreateStructure
V[return] _
// items
CreateTable
V[salesorders] _
// items
CreateTable
V[salesorders2] _
Set
V[SALESORG]
"1010"
Call
"BAPI_SALESORDER_GETLIST" _
Sort
table="salesorders"
columns="NET_VALUE"
-descending
connecthtml
name="mychartcontrol"
click="button_create"
return |
The HTML page
The connection to GuiXT is made by: var guixt; function guixt_initialize(obj) { guixt = obj; }; We can then fetch the data from GuiXT with the command: guixt.Get("salesorders.SHORT_TEXT." + i Please download the HTML page with the embedded JavaScript library here: chartjs_guixt.zip Further Information: Object "guixt" in VBScript and JavaScript |
Components
InputAssistant + Controls
|