Skip navigation
2014

bpmn2 user's Blog

January 2014 Previous month Next month

jBPM6 provides various predefined strategies for handling knowledge sessions. An simple example using singleton strategy is shown in https://community.jboss.org/people/bpmn2user/blog/2014/01/14/jbpm6--angularuing-grid-web-example.  It uses a single knowledge session to execute all the process instances. A different strategy ‘PerRequestRequestManager’ is used in this blog. This approach creates a new knowledge session for each request.

 

 

explore.PNG

 

 

RuntimeManager is craeted using the strategy 'PerRequestRuntimeManager' as shown below.

perreqmgr.PNG

 

A knowledge session is created for each request for performing various tasks such as process create, query and approve etc.

createsessionexample.PNG

 

 

taskgridkris.PNG

 

taskgridskrisapprove.PNG

 

taskgridjohn.PNG

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.

modal1.png

 

modal-window.PNG

 

explore.PNG

 

$modal service has only one method open.

modalservice.PNG

 

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.

openmethod.PNG

In the NGModalInstanceCtrl method invoke the RESTFul service call to complete the task using the retrieved parameters.

modalinstancecontrol.PNG

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.

 

explorer.PNG

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.

 

1.) Add refereneces to jQuery, AngularJS and ng-grid javascript and css files.

nggridlinks.PNG

2.) Add 'ngModule' in the module list in app.js

appmodule.PNG

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

taskhtml.PNG

basestyle.PNG

 

4.) Task data ($scope.taskData) is obtained using RESTFul call and it is bound to grid option.

controllercode.PNG

 

tasks1.PNG

taskdetail.PNG

 

task2john.PNG

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.

arch.PNG

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.

 

 

explorer1.PNG

 

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.

 

RESTAPI.PNG

 

Following method in Angular JS controller (controller.js) retrieves the data and binds the data to $scope variable taskresults.

 

service.PNG

Then the task data is rendered in the view (usertasks.html) using the following Angular directive ng-repeat and Bootstrap.

 

tasklist.PNG

admin1.PNG

 

admin2.PNG

 

taskaccess1.PNG

 

taskaccess2.PNG

 

taskaccess3.PNG

 

taskaccess4.PNG

 

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.

Filter Blog

By date:
By tag: