Camunda BPM 7.2: Tasklist and Javascript Forms SDK (English)

Hands-on Webinar

Camunda BPM 7.2

Tasklist and Javascript Forms SDK

10+ years experience with workflow and Java EE

Co-Founder of Camunda

Evangelist

Head of Consulting

@berndruecker

[email protected]

Bernd Rücker

What is Human Task Management?

Introduction to Camunda Tasklist

Demo & Hands-On

More details on Camunda Tasklist

Summary

Agenda

Process example: Vacation Request

The process to get there…

Task Management

Boss Human Ressources

Task Management

Group Task List

Personal Task List

Task

candidate-groups candidate-users assignee

create complete

claim

Complete rewrite

Improved Usability & Layout

Exposes more existing features of the core engine

Added new features

Goal: Production-Ready / Usable out-of-the-box

Camunda BPM 7.2 ships a new tasklist

Tasklist in camunda BPM

1 2 3

Groups & Personal Task List (via Filters)

Filters and Authorization

Task Forms

Task Forms

Different types of task forms

Embedded Task Form

Generated Task Form

Generic Task Form

External Task Form

HTML-Form provided by Process Application (HTML File) Rendered in Tasklist

Form Data Metadata provided by Process Application (BPMN 2.0 XML) Rendered in Tasklist

Completely generic, shows all process variables Rendered in Tasklist

Forwards to external URL handing over parameters (e.g. taskId) E.g. HTML5, JSF, PHP, …

Shown embedded in tasklist

Demo

Tasks from different sources

Processes (BPMN 2.0)

Cases (CMMN 1.0)

AdHoc / API

Greatly simplifies the implementation of task forms.

You can directly bind HTML form controls to process variables.

The Forms SDK handles the fetching of the variable values from the process engine, type conversions and so on.

The Forms SDK optionally integrates with AngularJS to take advantage of AngularJS form validation and other AngularJS goodies.

Examples for e.g. DatePicker exist in the docs

Camunda JavaScript Forms SDK

<form> <input type="text" cam-variable-name="CUSTOMER_ID" cam-variable-type="String"> <input type="text" cam-variable-name="CUSTOMER_REVENUE" cam-variable-type="Float"> </form>

By the way – easy to build: Form Builder

see e.g. https://github.com/minikomi/Bootstrap-Form-Builder

Client API for JavaScript available: https://github.com/camunda/camunda-bpm-sdk-js

Uses REST-API internally

Can be used o build HTML5 applications easier/faster

Could be used for server side Javascript (e.g. node.js), see https://github.com/camunda/camunda-bpm-examples/tree/master/sdk-js/nodejs

Javascript SDK

var CamSDK = require('camunda-bpm-sdk-js');

var camClient = new CamSDK.Client({apiUri: 'http://localhost:8080/engine-rest', mock: false});

var processDefinitionService = new camClient.resource('process-definition');

// query process definitions

processDefinitionService.list({ latest: true, active: true}, function (err, results) {

definitions.forEach(function(definition) {

console.log('start process instance ' + definition.name);

processDefinitionService.submit({id: definition.id}, function (err) {

console.log(err);

});

});

});

And still: Out-of-the-box support for JSF 2.0/CDI

Reference process variables directly in Taskforms

Camunda Engine

HTML5

REST-Backend

−JAX-RS

Frontend

−AngularJS

−Bootstrap

−JQuery

−RequireJS

−Camunda BPM SDK JS

Development: Grunt, Protractor, Karma, browserify, npm, …

Technology used in Tasklist

JAX-RS REST-API

HTML + AngularJS

JSON

This is AWESOME!

You can search for tasks (Server side! With correct pagination.)

You can navigate through tasks using the keyboard

You can maximize task forms

You can add comments

Logo and Color Schema can be easily changed

Using bpmn.io for visualization of current task

If you get assigned to a task in the same process immediately after completing one – you get a notification (according to the UI-Mediator-Pattern)

Tasklist is internally prepared for Plugins

…

Nice Usability features (I often forget in the demo)

Work on API level (Server side!)

Are stored in the database

Available via REST

Currently only for tasks – but not tied to it

Can leverage expression language

Task Filters

Tasklist can be built by single REST-Request and uses pagination:

−…/filter/0bd751ec…/list?firstResult=0&maxResults=15

−Result = Single JSON (next slide)

Optional HAL Relations Cache (http://docs.camunda.org/7.2/api-references/rest/#overview-hypertext-application-language-hal-caching-of-hal-relations)

Results in great performance for typical use cases

Tasklist and Performance

HAL-Response

{

"_embedded": {

"assignee": [

"id": "demo",

"firstName": "Demo", ...

}

],

"processDefinition": [

{

"_links": {

"deployment": {

"href": "/deployment/0bbfab20..."

}...

},

"id": "invoice:1:0bcca373...",

"key": "invoice",

"version": 1, ...

}

],

"task": [

{

"_links": {

"assignee": {

"href": "/user/demo"

},

"processDefinition": {

"href": "/process-definition/invoice:1:0bcca373..."

}, ...

},

"_embedded": {

"variable": [

{

"name": "amount",

"value": "30€",

"type": "String", ...

}, ...

"id": "5c4ca688-8f6a-11e4-83d5-1c4920524153",

"name": "Assign Approver",

"assignee": "demo",

"created": "2014-12-29T15:52:50", …

I18N

see https://github.com/camunda/camunda

-tasklist-translations

Extensability &

Deveoper-Friendlynes (some examples)

See https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-assignment-email

Task Assignment Email

Listener to send email to assignee / members of group

See https://github.com/camunda/camunda-consulting/tree/master/snippets/task-assignment-absence

Handle absent assignees

Listener querying absent information

Four eyes principle

Automatically added escalation

Set default due date via configuration

Change task names on the fly (e.g. I18N)

…

More requirements can be easily built

Camunda Tasklist - build with reality in mind

“ The tasklist is the central point of contact for

business users with the BPM platform and is therefore an essential component. The innovative implementation of the Camunda tasklist matches the DAB bank's web technology stack perfectly and saves extensive in-house development. The functionality is optimally aligned to the Camunda BPM platform and due to its flexible adaptability also fulfills the needs of a bank. Karl Brandner, Chief Architect

Enhance Authorizations

Plug-ins in the Tasklist (compare to Cockpit)

Allow creation of tasks not related to processes or cases

Roadmap always depends on usage and feedback!

Next steps and further ideas

Thank you!

Questions?

Start now!

Open Source Edition • Download:

www.camunda.org • Docs, Tutorials etc. • Forum • Meetings

Enterprise Edition • Trial:

www.camunda.com • Additional Features • Support, Patches etc. • Consulting, Training

http://camunda.com/bpm/consultation/

[email protected] | US +1.415.800.3908 | DE +49 30 664040 900