JavaScript APIs that can be used in views

Use the following reference information to learn about JavaScript APIs that can be used in views.

The following view APIs and scenario are specific to Application Designer. For a list of view APIs that are shared between the Application Designer and Process Designer in the traditional workflow capabilities, 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.

Additionally, an application that displays documents can use getAddressableUrl to provide the user with a shareable link to display the current document. Then, subscribeAppState can be used automatically display that document when the shared link is used.

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} callback
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);
    });
  }
});
context.getAddressableUrl(appState, withPageId) Returns the application's URL with the optional application state added to the URL. If the user returns to the application by using the URL, they are return to the starting page of the application.
{object} appState (optional)
The application state information to be added to the application URL. It must be a valid JSON serialized object or array.
{boolean} withPageId (optional)
Specifies whether to return the application's URL with the ID of the current page (optional, default to false). When calling getAddressableUrl with withPageId=true, make sure that the page can be invoked as a starting page. Any steps in the flow that lead to the page will not be invoked when using the addressable URL to return to the page.
context.subscribeAppState(callback) Registers a callback function to receive a notification that is associated with the application state. A callback function should be registered in a view's load or view event handler.
{function} callback
A function to call after the page initialization. The callback function has a single parameter: appState, the object passed to the context.getAddressableUrl call. The callback can then utilize the information in the appState to bring the application back to the corresponding state.
context.isWorkflowPXServer() Checks whether the server is a Workflow Process Service Server. For the view in your application, this always returns false.

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));