Camunda BPM 7.2: Tasklist and Javascript Forms SDK (English)
7 likes8,720 views
The document provides an overview of Camunda BPM 7.2, focusing on its new tasklist features and enhancements that improve usability and integration with various technologies. It underlines the tasklist's capabilities for task management, including support for different task forms, integration with JavaScript SDK, and enhanced performance through a REST API. The emphasis is on the tasklist as a vital interface for business users, designed for adaptability and usability in a BPM context.
![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", …](https://image.slidesharecdn.com/2015-01-07tasklisten-150114060854-conversion-gate02/85/Camunda-BPM-7-2-Tasklist-and-Javascript-Forms-SDK-English-26-320.jpg)
Camunda BPM 7.2: Tasklist and Javascript Forms SDK (English)
- 1. Hands-on Webinar Camunda BPM 7.2 Tasklist and Javascript Forms SDK
- 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
- 4. Process example: Vacation Request
- 5. The process to get there…
- 7. Task Management Group Task List Personal Task List Task candidate-groups candidate-users assignee create complete claim
- 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
- 9. Tasklist in camunda BPM 1 2 3
- 10. Groups & Personal Task List (via Filters)
- 12. Task Forms
- 13. Task Forms
- 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
- 15. Demo
- 16. Tasks from different sources Processes (BPMN 2.0) Cases (CMMN 1.0) AdHoc / API
- 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); }); }); });
- 20. And still: Out-of-the-box support for JSF 2.0/CDI Reference process variables directly in Taskforms
- 21. 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
- 22. This is AWESOME!
- 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
- 26. 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", …
- 29. 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
- 30. See https://github.com/camunda/camunda- consulting/tree/master/snippets/task-assignment-absence Handle absent assignees Listener querying absent information
- 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
- 35. 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/ info@camunda.com | US +1.415.800.3908 | DE +49 30 664040 900