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
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
Top Related