Learn how to get the best out of Camunda Tasklist, an HTML 5 application for human workflow management. You will also hear how to benefit from the Camunda Javascript forms SDK in your very own frontend applications.
2. 10+ years experience with workflow and Java EE
Co-Founder of Camunda
Evangelist
Head of Consulting
@berndruecker
bernd.ruecker@camunda.com
Bernd Rücker
3. What is Human Task Management?
Introduction to Camunda Tasklist
Demo & Hands-On
More details on Camunda Tasklist
Summary
Agenda
8. 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
14. 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
17. 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>
18. By the way – easy to build: Form Builder
see e.g. https://github.com/minikomi/Bootstrap-Form-Builder
19. 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);
});
});
});
23. 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)
24. 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
25. 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
31. 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
32. 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
33. 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