Purpose
 Calculate the distance between two addresses via an asynchronous JavaScript call to the Google API

There are many useful services that can be accessed via a JavaScript API. However, these calls are often asynchronous. With GuiXT you can call the JavaScript methods defined in an HTML page and save the results directly into GuiXT variables and use them for further processing or to display the result on the sap screen.

In this example, we use the Google API to calculate the distance between two addresses:

Solution
 In our main script we embed our HTML file, use the connecthtml command to connect to the view and create some InputFields and a pushbutton:
 

Control     (1.1,67.1)  (8.5,115.8) _ 
  progID="file://C:\guixtscripts\distance_google.html" _
  name="google_distance"
 
connecthtml name="google_distance"
InputField (16,0) "from" (16,20) _
  size=50     name="from"
 
InputField  (17,0) "to" (17,20) _
  size=50 name="to"
InputField  (20,3) "Result" (20,23) _
  size=10     name="result"
 
Pushbutton  (19,16) "Calculate distance" _ 
  process="calculate_distance_google.txt"

Hint: You can use the -showNames option for the connectHTML command to display the names of elements when hovering over with the mouse.

In the HTML file we need the following methods:

- a method that is called by GuiXT automatically when connecthtml is used in a script
- a method that calls the google API to calculate the the distance
- a callback method that is called by the google API when the asynchronous call delivers a result
- a callback method that is called in case of an error


When the user clicks on "calculate distance", an InputScript will be processed: It just invokes a click on the button on the HTML site to start the google API JavaScript method.

connecthtml click="button_distance" _ 
name="google_distance"
 
return

When the callback method from the google API returns a result, it will be saved (and displayed on the screen) in a GuiXT variable. In addition, another InputScript is started there so that the normal processing with GuiXT can continue at this point: 

 (status == google.maps.DirectionsStatus.OK)
{
  var route = response.routes[0];
  var calcdist = route.legs[0].distance.text;

  guixt.Set("result", route.legs[0].distance.text);
  guixt.input("OK:/0,process=distance_calculated.txt");
}

Download:

 All files for this project can be downloaded here:
google_distance.zip

Components InputAssistant+Controls