Monday, September 7, 2015

Getting started with the new Activiti 6 UI

We launched Activiti 6 with a new UI that replaces the Vaadin based Activiti Explorer application. The new UI is written in AngularJS and contains a number of new features that we'll introduce in this article.

But let's first get started with download the Activiti 6 beta package from the Activiti website: http://activiti.org/download.html. The package contains the JAR files files of the different Activiti modules including the Engine JAR file. It also contains the userguide, javadocs, readme files, database scripts and the two WAR files for the REST application and the new Angular web application (the focus of this article).

So when you downloaded and unzipped the Activiti 6 package, copy the wars/activiti-app.war file to a local Tomcat 7 or 8 installation. Before you start Tomcat, first the database needs to be taken of. By default, the application is configured for a MySQL database with name activiti6ui and username/password alfresco/alfresco. If you would like to change the database settings you can change the WEB-INF/classes/META-INF/activiti-app/activiti-app.properties file in the activiti-app.war file or create a copy of this file in the Tomcat lib folder. By default the H2 and MySQL database drivers are provided by default with the activiti-app.war file, so if you want to use another database, make sure you copy the database driver to the WEB-INF/lib folder.

Now we're ready to start the Tomcat server. The database tables will be created automatically using Liquibase. When the Tomcat server is started you can open a web browser to http://localhost:8080/activiti-app and you should get a login screen. The default username/password is admin@app.activiti.com/test. The dashboard page is now presented, showing the Kickstart (editor), Task and Identity management apps.

If you would like to create addition user and/or groups you can do this in the identity management application. But we'll go ahead with designing a simple process using the Kickstart app. You can see there are three main editor types supported, processes, forms and apps. Let's start with the process type and create a new process using the BPMN editor.


The BPMN editor hasn't changed so much when compared with the editor we shipped as part of the Activiti Explorer application. The main difference is that we added integration with the form editor. So let's add a form to the start event to be able to fill-in a BPM related buzzword. Click on the start event and select the Referenced form property.  A popup will be shown where you can select a form, but since we started with an empty database, no forms will be available yet. So click New form, and fill-in a name and an optional description to create a new form. The form editor will be opened and you can start dragging form fields to the canvas to create a start form.


There are a number of field types to choose from and you can also change the outcome buttons of the form. The default outcome button is Complete, if no other outcomes are defined. For this simple example, we only use a text field with label Buzzword. The value of this text field will be available in the process with variable name buzzword (the identifier of the form field, which can be defined in the configuration of the field).

Let's continue with defined sequence flow conditions for all three flows that are outgoing of the exclusive gateway. You can for example use the following conditions:

  1. ${buzzword == 'BPMN'}
  2. ${buzzword == 'BPEL'}
  3. empty, select default flow for this sequence flow.
Now let's configure the Great buzzword user task and define the assignment.



In addition to the static values and expressions you could fill-in in the previous BPMN editor version, you can now directly reference a group or a user you defined in the identity management application. You can also assign the task to the process initiator, and that's what we'll do for this process.

We also have to define a task form, to give feedback to the user. The value of the buzzword text field can be used to show a display text field like shown in the image.


You can add similar task forms to the other two user tasks to complete the process design. The next step is to create an app definition using the app editor. When you create a new app definition, you can define the icon, theme color and processes you would like to include in the app definition.


All the processes included will be available as part of the app, so it's basically a categorisation of processes. When you save the app definition, make sure you select the publish checkbox as well, so the app will be deployed to the Activiti Engine. In addition, you can choose to share the app definition with other user and/or groups and all users that are included there, will have the option to add the app to their dashboard.

When the app is published you'll notice that the app and process are automatically versioned. This ensures that there's always an exact version to point back to from a deployed application and process model. Go back to the dashboard by clicking on the Alfresco Activiti logo in the left top. You can add the newly deployed app to your dashboard by clicking the + button in the grey rectangle and choosing the app in the popup and clicking the Deploy button. The app is available in the dashboard now.


When opening the Buzzword app, a view with a task and process section is shown. We can now start a new process instance of the Buzzword process by filling in a buzzword.


After starting the process with buzzword BPMN, a new process instance is created and the Great buzzword user task is available.


There are a lot of options you can explore in the process instance details view and task view. For example, there's the possibility to show the process diagram.


But also the possibility to add comments to a running process or task. In the task details view, you can fill-in and complete the form, but also involve other people in the task and add file attachments. Take your time to explore and tryout these options and let us now if you think we should add specific actions and/or information.

There's a lot more to talk about regarding the new Activiti 6 UI, but this should be sufficient for a first introduction. Let us know what you think, this should be the start of great new UI to work with the Activiti Engine and we are looking for feedback on how to improve it.

Wednesday, September 2, 2015

Activiti 6 Beta 1 released

Today is a big day for the Activiti project and community. We released the first beta of the first major revision of the Activiti Engine.  The main reasons to introduce Activiti 6 are:

  • Complete backwards compatibility with version 5: database-wise, concept-wise and code-wise.
  • Rewrite of the core engine: direct execution of BPMN 2.0 (vs transformation to intermediate model)
  • Simpler and cleaner runtime execution data structure, where predictability of the structure is crucial
  • Decoupling of persistence layers for future possible different implementations
We also introduce a new test application to work with the Activiti Engine, that replaces the Vaadin Explorer application. The new application is just named Activiti app and uses Angular JS. It contains a lot of the Explorer functionality but there are some differences:
  • We introduced a new form editor that allows you to design task and start forms using a visual editor. There are also quite a couple of additional form field types.
  • There's a new task UI to start process instances and work with tasks.
  • There's a new concept of app definitions. App definitions is a grouping of process models and forms that can be deployed on the Activiti Engine. Each deployed app can be made available on the user dashboard.
We very much welcome any feedback on this first beta release and in specific testing the Activiti 5 backwards compatibility with your process definitions would be great. 

A couple of standard warnings about a beta release. It's not meant to be used in production and we didn't focus on performance yet.

We'll do more blog posts in the next days and weeks to talk about more details of Activiti 6. In the meantime please give feedback and help to get Activiti 6 stable and well tested!