Activiti v6 UI (Activiti Community Day Paris 2015)

Launching Activiti 6 June 10, Paris

Joram Barrez & Tijs Rademakers

Activiti Leads, Alfresco

3  

Why we badly needed a new UI

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  

Introduction to the new UI

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

BPMN editor (not much changed here)

8  

New form editor

9  

New form editor (2)

10  

•  Drag and drop form editor •  Support for most common form field types •  Label, id, required and placeholder

configuration

New form editor (3)

11  

•  Outcome configuration •  Default button is ‘complete’

App editor

12  

•  Create app definition •  Include process models •  Choose icon + theme color

What’s an app?

13  

•  Grouping of process definitions •  Name, description, icon + theme color •  JSON definition •  Can be exported (zip) •  Can be imported (zip)

Publishing an app

14  

•  Generate BPMN XML •  Deploy to Activiti Engine and store app and forms in runtime tables

Starting a process with a start form

15  

•  Form renderer including required field validation

A completed form can be viewed afterwards

16  

•  Submitted values are stored in a separate table

Demo!

17  

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

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

Next steps

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

Update the user guide

22  

•  Update the documentation of the UI

Gather feedback and act upon it

23  

•  Gather feedback with the beta builds •  Make changes accordingly

Questions?

24