Next, we can define a set of constants to globally represent the various states that work items can be found in through the business process:

app.constant('Constants', {
   PROCESS_STATE: {
       0: 'PENDING',
       1: 'ACTIVE',
       2: 'COMPLETED',
       3: 'ABORTED',
       4: 'SUSPENDED'
   }
});

Lastly, we can configure the routing of the application to map addresses to relevant controllers and views:

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl'
        })
        .when('/dataCorrection', {
            templateUrl: 'views/dataCorrection.html',
            controller: 'DataCorrectionCtrl'
        })
        .when('/manager', {
            templateUrl: 'views/manager.html',
            controller: 'ManagerCtrl'
        })
        .when('/applicant', {
            templateUrl: 'views/applicant.html',
            controller: 'ApplicantCtrl'
        })
        .when('/appraiser', {
            templateUrl: 'views/appraiser.html',
            controller: 'AppraiserCtrl'
        })
        .when('/troubleshoot', {
            templateUrl: 'views/troubleshoot.html',
            controller: 'TroubleshootCtrl'
        })
        .when('/downPayment', {
            templateUrl: 'views/downPayment.html',
            controller: 'DownPaymentCtrl'
        })
        .when('/financialReview', {
            templateUrl: 'views/financialReview.html',
            controller: 'FinancialReviewCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }]);

The AngularJS controllers mapped above, in this use case, largely consist of calls to the Java back-end for API manipulation and code regarding UI formatting and notifications. The Data Correction controller lists various prime examples of how various workflow actions related to work items, such as claiming, starting, stopping, releasing and completing a task, can be invoked from within the UI:

dataCorrection.js:

'use strict';

angular.module('app')
    .controller("DataCorrectionCtrl", ['$scope', '$http', 'Constants', '$location', '$timeout',
        function ($scope, $http, Constants, $location, $timeout) {

            $scope.consts = Constants;
            $scope.taskInProgress = false;

            fetchTasks();

            function fetchTasks() {
                $http.get("service/broker/dataCorrectionTasks").success(function (data) {
                    $scope.tasks = data;
                });
            }

            $scope.claimTask = function (taskId) {
                $http.post("service/broker/claimTask", taskId).then(
                    function (data) {
                        $scope.successMessage = "Task claimed Successfully";
                        $scope.successVisible = true;
                        fetchTasks();
                        $timeout(function () {
                            $scope.successVisible = false;
                            $scope.successMessage = "";
                        }, 2000);
                    },
                    function (data) {
                        $scope.errorMessage = "Error occurred while attempting to claim task";
                        $scope.errorVisible = true;
                        fetchTasks();
                        console.log("ERROR: " + JSON.stringify({data: data}));
                        $timeout(function () {
                            $scope.errorVisible = false;
                            $scope.errorMessage = "";
                        }, 2000);
                    });
            };
....
            $scope.submitApp = function() {

                var $application = {
                    applicant : {
                        name: $scope.applicantName,
                        ssn: $scope.applicantSsn,
                        income: $scope.applicantIncome,
                        creditScore: null
                    },
                    property : {
                        address: $scope.propertyAddress,
                        price: $scope.propertyPrice
                    },
                    downPayment: $scope.downPayment,
                    amortization: $scope.amortization,
                    appraisal : null,
                    mortgageAmount: ($scope.propertyPrice - $scope.downPayment),
                    apr: $scope.apr
                };

                $http.post("service/broker/completeTask/" + $scope.taskInProgressId, $application).then(
                    function(data) {
                        $scope.successMessage = "Data Correction submitted successfully";
                        $scope.successVisible = true;
                        $timeout(function() {
                            $scope.successVisible = false;
                            $scope.successMessage = "";
                            $location.path("/home");
                        }, 2000);
                    },
                    function (data) {
                        $scope.errorMessage = "Error occurred while attempting to submit Data Correction";
                        $scope.errorVisible = true;
                        console.log("ERROR: " + JSON.stringify({data: data}));
                        $timeout(function() {
                            $scope.errorVisible = false;
                            $scope.successMessage = "";
                        }, 2000);
                    });
            };
        }]);

Similar controllers are utilized for each of the various points in the business process where human interaction is required.

The dataCorrection.html file gives a great example of how data can be both displayed from scope, as responses to server queries are received, as well as how information can be collected and passed along for submission to other back-end controller points, thereby giving us the means to relay and receive information from the human task portions of the business process:

Intelligent Process Server human task items are particular about the format that must be met for inbound data. This means that in order to supply information needed for entry points of these steps, we must adhere to the custom JSON format required, rather than simply trusting a mapping framework to generate a default JSON format and anticipating successful consumption. The following is an example mapping for the Application POJO from the data model which properly generated the necessary wrapper JSON elements and adherence to generics properties lists:

public final class ApplicationMapper {
...
        try {
            Map<String, Object> wrapper = new HashMap<>();
            Map<String, Object> appContent = new HashMap<>();
            Map<String, Object> applicant = new HashMap<>();
            Map<String, Object> property = new HashMap<>();

            applicant.put("name", application.getApplicant().getName());
            applicant.put("ssn", application.getApplicant().getSsn());
            applicant.put("income", application.getApplicant().getIncome());

            property.put("address", application.getProperty().getAddress());
            property.put("price", application.getProperty().getPrice());

            appContent.put("applicant", applicant);
            appContent.put("property", property);
            appContent.put("downPayment", application.getDownPayment());
            appContent.put("amortization", application.getAmortization());

            if (application.getAppraisal() != null) {
                Map<String, Object> appraisal = new HashMap<>();
                appraisal.put("property", property);
                appraisal.put("value", application.getAppraisal().getValue());
                appContent.put("appraisal", appraisal);
            }

            wrapper.put("com.redhat.bpms.examples.mortgage.Application", appContent);
            payload.put("application", wrapper);

        } catch (Exception e) {
...
}