Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,984 views

Published on

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.

Published in: Software

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

  1. 1. Hands-on Webinar Camunda BPM 7.2 Tasklist and Javascript Forms SDK
  2. 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. 3.  What is Human Task Management?  Introduction to Camunda Tasklist  Demo & Hands-On  More details on Camunda Tasklist  Summary Agenda
  4. 4. Process example: Vacation Request
  5. 5. The process to get there…
  6. 6. Task Management Boss Human Ressources
  7. 7. Task Management Group Task List Personal Task List Task candidate-groups candidate-users assignee create complete claim
  8. 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. 9. Tasklist in camunda BPM 1 2 3
  10. 10. Groups & Personal Task List (via Filters)
  11. 11. Filters and Authorization
  12. 12. Task Forms
  13. 13. Task Forms
  14. 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. 15. Demo
  16. 16. Tasks from different sources Processes (BPMN 2.0) Cases (CMMN 1.0) AdHoc / API
  17. 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. 18. By the way – easy to build: Form Builder see e.g. https://github.com/minikomi/Bootstrap-Form-Builder
  19. 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. 20. And still: Out-of-the-box support for JSF 2.0/CDI Reference process variables directly in Taskforms
  21. 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. 22. This is AWESOME!
  23. 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. 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. 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. 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", …
  27. 27. I18N see https://github.com/camunda/camunda -tasklist-translations
  28. 28. Extensability & Deveoper-Friendlynes (some examples)
  29. 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. 30.  See https://github.com/camunda/camunda- consulting/tree/master/snippets/task-assignment-absence Handle absent assignees Listener querying absent information
  31. 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. 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. 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
  34. 34. Thank you! Questions?
  35. 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

×