Activiti v6 UI (Activiti Community Day Paris 2015)

1. Launching Activiti 6
June 10, Paris

2. Joram Barrez
& Tijs Rademakers
Activiti Leads, Alfresco

3. 3

4. Why we badly needed a new UI

5. Main reasons for the new UI
• New app concept
• New DnD form builder
• Vaadin 6 is not up-to-date anymore
• And …… the current UI sucks
5

6. Introduction to the new UI

7. New UI Summary
7
• Apps, process and form builder
• Task and form UI
• Simple identity management
• Process state diagram
• Angular JS application
• Spring MVC REST layer on Activiti
Engine

8. BPMN editor (not much changed here)
8

9. New form editor
9

10. New form editor (2)
10
• Drag and drop form editor
• Support for most common form field types
• Label, id, required and placeholder
configuration

11. New form editor (3)
11
• Outcome configuration
• Default button is ‘complete’

12. App editor
12
• Create app definition
• Include process models
• Choose icon + theme color

13. What’s an app?
13
• Grouping of process definitions
• Name, description, icon + theme color
• JSON definition
• Can be exported (zip)
• Can be imported (zip)

14. Publishing an app
14
• Generate BPMN XML
• Deploy to Activiti Engine and store app and forms in runtime tables

15. Starting a process with a start form
15
• Form renderer including required field validation

16. A completed form can be viewed afterwards
16
• Submitted values are stored in a separate table

17. Demo!
17

18. Database model
18
• For the app we’ve added additional tables (not needed by the Engine)
• Liquibase script for version management, Hibernate for data access
• Compatible with Activiti Enterprise

19. Application layering and frameworks
19
• Angular JS for frontend
• Spring MVC for REST layer
• Hibernate JPA for persistence
• Spring security
• Liquibase for database model versioning

20. Next steps

21. Get it on Github!
21
• Almost ready with cleaning up the code
• We’ll do a beta version release together with the Activiti 6 Engine

22. Update the user guide
22
• Update the documentation of the UI

23. Gather feedback and act upon it
23
• Gather feedback with the beta builds
• Make changes accordingly

24. Questions?
24