Executing BAO workflows from a web page built using Angular through REST API

Version 3
    Share This:

    We can use REST services to trigger the Atrium Orchestrator workflows from a webpage (in our case Angular). Angular uses Model, view, controller (MVC/MVVM) architecture to flow data at the client end (browser). It allows user to write REST calls in services and returns data to controller. This data in controller can be used in view (HTML) through $scope binding.

     

    Angular as a seed project from Google's Angular 1.x website AngularJS — Superheroic JavaScript MVW Framework  comes along with node server but when a rest call is made from an external server to BAO REST API for login, the authentication token remains unexposed. This is due to CORS issue and could be resolved by allowing the (Access-Control-Allow-Origin: *) from CDP tomcat server end.  This is not permissible for us as we do not have control over server side code. As a different approach, the angular project has to be separated from the node server modules and should be deployed as a stand alone in the BAO's CDP\tomcat\webapps folder so that the authentication token is exposed in the login response of the BAO REST API. The direct URL to access the webpage will now be something like 'https://host-name:port/angular-seed-master/angular-seed-master/app/index.html'.

     

    To make HTTP post calls to BAO REST API, the Angular's http method (similar to AJAX) is used. The username and password for login should be sent as a JSON object. The initial call to login URL 'https://hostname:port/baocdp/rest/login' will return the authentication token in the response header, which could be extracted as below:

     

    var token = (data.headers('authentication-token')); //data is the response object received from http post method.

     

    This token should be sent in the header object in the next http post call to execute a BAO workflow along with parameter 'content-type: application/json'. The context item that is in the 'End' stage of a workflow will be the response of the http post method at Angular's side. This response could be than used in Angular to apply business logic and to display the processed data in webpage.

     

    For testing, the attached Angular project could be directly put into the 'CDP/tomcat/webapps' folder. The API REST call is written in the 'view.js' file of the attached project. The username, password and process name should be changed as per requirement.