A simple JBPM6 web example using ng-grid component of Angular UI is shown in JBPM6 - AngularUI/ng-grid Web Example. This blog shows another Angular UI component, ui.bootstrap.modal, for creating modal windows.
Modal window requires users to interact with it before returning to the parent window. In this example, when user clicks on 'Work on Task' button, the task details are presented in a modal window.
$modal service has only one method open.
In open method provide templateUrl, the path to the template that represents modal's, i.e., task data, content. Provide the controller for the modal instance to initialize the scope used by modal. It also needs a resolve method to resolve and pass the members to controller as locals.
In the NGModalInstanceCtrl method invoke the RESTFul service call to complete the task using the retrieved parameters.
A simple web example using Angular JS example is shown in JBPM6 - Angular JS Web Example. Angular JS provides model-view-controller capability and one can use various UI components.
A simple AngularJS directive (e.g., ng-repeat) in HTML is used in JBPM6 - Angular JS Web Example to show the task table. One can also use other UI componets such as AngularUI (http://angular-ui.github.io/). This example shows a more feature rich grid using ng-grid component of AngularJS. It provides various features such as filtering, scrolling, sorting etc.
Here are the main steps to plug-in the ng-grid component to display jBPM tasks and refer to http://angular-ui.github.io/ for more details about ng-grid.
2.) Add 'ngModule' in the module list in app.js
3.) In the task html file (usertasks.html), add grid options variable, e.g., 'gridtwoOptions', and it needs to be bound to the task data in controller.js.
Also add a style class, e.g., gridStyle, that needs to be defined in the style file (e.g., nggridstyles.css).
4.) Task data ($scope.taskData) is obtained using RESTFul call and it is bound to grid option.
JBPM 6 provides new improved user interface using UberFire. It can also be used as a an embedded workflow engine in application and one can have UI based on various technologies (e.g.,GWT, JSF, HTML5, .Net etc) where the UI can communicate with workflow engine using jBPM API. A simple jBPM web example is shown jBPM6 - Tomcat 7 - Web Example using jsp/servlets.
This blog provides a different UI (Angular JS and Bootstrap) approach considering the same example shown in jBPM6 - Tomcat 7 - Web Example. Angular JS augments browser based applications with model-view-controller (MVC) capability and Bootstrap, a popular responsive design framework, provides various HTML and CSS based design templates for forms, buttons and various navigation components. Please refer to http://getbootstrap.com/ and http://angularjs.org/ for documentation and examples.
Model: The data that comes from the REST API in JSON format.
View: HTML that has various Angular directives and Bootstrap templates.
Controller and custom services: Perform the necessary REST API queries against the JBPM engine deployed on a server and put the required data into $scope for View.
Following directory shows various files in the sample project.
BPMRestService.java provides the necessary REST API that can be used from Angular JS controller or service.
ServletBPMNContext.java is Servlet listener class to start H2 database and create the Runtime Manager using Singleton strategy.
Partials folder has html files for views and js folder has router, controller and service Java script files.
The first step in making this example run using Angular JS framework is to create RESTful API for the jBPM tasks, e.g., process create, request tasks etc. This example uses Jersey framework to provide REST API for all the necessary logic provided the jsp/servlets. For example, following method ( in BPMRestService.java) exposes RESTful webservice for the tasks for a given user and the data is transferred in JSON format.
Following method in Angular JS controller (controller.js) retrieves the data and binds the data to $scope variable taskresults.
Then the task data is rendered in the view (usertasks.html) using the following Angular directive ng-repeat and Bootstrap.
How to deploy the application?
Create the war file (e.g., mvn install or mvn pacakage) and deploy in Tomcat. Follow the instructions provided in (jBPM6 - Tomcat 7 - Web Example) to configure JNDI. It should be noted that though the UI and REST API code is packaged using a single war file for the simplicity, UI component can be deployed on a different server.