JavaScript APIs for making xhr with views

Use the following reference information to learn how to make xhr requests from your view to other offering services.

The following view APIs and scenario are specific to Application Designer. For a list of view APIs that are shared between Application Designer and Business Automation Workflow, see API reference.

If you need to make an xhr request from your view to other offering services, due to the cross-domain security protection, you need to rewrite your xhr connection string by using the rewriteURI method that is available in the view context object. The rewriteURI appends the connection string with Application Engine Proxy connection information. When you send the xhr request from your view with the updated connection string, the request is sent to the Application Engine Proxy. The proxy looks up the application resource for your offering, and then routes your request to the offering service. You need to define an application resource for the offering service and pass the name of the application resource to the rewriteURI API. If the application resource is not defined or found, Application Engine Proxy does not route the request and returns an error to your view. The following APIs are what you need to perform this scenario:

Table 1. JavaScript functions that can be used in views.
Function Description
context.rewriteURI(uri, resourceName, resourceKeySuffix) This API returns a proxy URI string for making REST API calls to a backend server. If a proxy or resourceName is not defined, the original URI is returned.
{string} uri
The offering service URI.
{string} resourceName
application resource name of the offering service
{string} resourceKeySuffix
Appended to the common group key that is defined in the application resource to dynamically identify a single resource from a set of resources. Only for the "Registry Lookup" type of an application resource.
context.getCSRFTokenHeaderName() Returns the HTTP header name for cross site request forgery.
context.getCSRFToken() Returns the cross site request forgery token value to be used in all future HTTP requests by setting the header if this value is not "undefined".
context.loadFile(file, callback) Handles loading of a file into a DocumentFile business object.
{file} file
A file object.
{function} callbal
A function to call when loading is complete. The callback function has a single parameter: a DocumentFile business object.
The following sample code shows how to use this API. 
var fileInput = this.context.element.getElementsByTagName("input")[0];
var onChangeHandle = connect.connect(fileInput, "onchange", this, function (event) {
  var context = this.context;
  var files = event.target.files;
  var file = files[0];
  if (file) {
    context.loadFile(file, function (docFile) {
      context.binding.set("value", docFile);
    });
  }
});

Sample: Connect to Watson™ Translation Service

  1. Create a "Defined Endpoint" application resource; for example, watson. Then, add host, port, and authentication information to the application resource.
  2. Use the following sample code to send xhr request in your view.
    var pillarStr = "watson";
var connectionStr = "/language-translator/api/v3/translate?version=2018-05-01";
connectionStr = this.context.rewriteURI(connectionStr, pillarStr);

xhr.open("POST", connectionStr, true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");

// set CSRF Token
xhr.setRequestHeader(this.context.getCSRFTokenHeaderName(), this.context.getCSRFToken());

var _this = this;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log("response translation: ", json.translations[0].translation);
console.log("response: ", json);
} else {
console.log("post request problem: " + xhr.readyState);
console.log("post request problem: " + xhr.status);
}
};
var senddata =
{text: this.context.binding.get("value"),
source: this.context.options.fromLang.get("value").name,
target: this.context.options.toLang.get("value").name
};
// Add JSON body

xhr.send(JSON.stringify(senddata));