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.

45 comments:

  1. Hi Tjis,

    I'm having trouble figuring out how to connect the new Activti 6 UI to LDAP since context.xml is no longer in play. I've tried including the activiti-custom-context.xml that worked with previous version of Activiti, and I've tried adding config via activiti-ldap.properties. Is LDAP integration build yet with Activiti 6? Thanks.

    ReplyDelete
  2. Hi Dustin,

    Good point. We didn't focus on that for this first beta release, but I'll add it to our todo list for the next beta version.

    Thanks,

    ReplyDelete
    Replies
    1. Cool, thanks for the response. We'll start with 5.18 and plan an upgrade before we go live. Ideally, we need to be able to point to an external LDAP properties file so that the Activiti WARs don't change between environments. We used context.xml to accomplish this on a previous project (using 5.14). Thanks again!

      Delete
  3. For anyone looking for a fast way to switch from MySQL to H2 in the web app:
    1) Open the WEB-INF/classes/META-INF/activiti-app/activiti-app.properties in the activiti-app.war for editing.
    2) Change these values:
    datasource.driver=org.h2.Driver
    datasource.url=jdbc:h2:mem:activiti;DB_CLOSE_DELAY=1000
    datasource.username=sa
    datasource.password=
    hibernate.dialect=org.hibernate.dialect.H2Dialect

    Ain't no rocket science but may save you a couple minutes. :-)

    ReplyDelete
    Replies
    1. I also struggeled with this the first time, and I think it would be a great idea to have settings for both databases added to the properties files with one commented out, like this:

      # MYSQL
      #datasource.driver=com.mysql.jdbc.Driver
      #datasource.url=jdbc:mysql://127.0.0.1:3306/activiti6ui?characterEncoding=UTF-8
      #datasource.username=alfresco
      #datasource.password=alfresco
      #hibernate.dialect=org.hibernate.dialect.MySQLDialect

      # H2
      datasource.driver=org.h2.Driver
      datasource.url=jdbc:h2:mem:activiti
      datasource.username=sa
      datasource.password=
      hibernate.dialect=org.hibernate.dialect.H2Dialect

      Delete
    2. HI Itried with both the DB connections like you mentioned but still I am not able to open activiti 6.0, when I try to open http://localhost:8092/activiti-app , it says page not found. Could you please help

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hello Tijs
    I am wondering how to handle a form with several outcomes, and then an exclusive gateway to redirect to the proper task. What is the name of the outcome property, or is there a way to specify it, so that we can use that variable in the flow condition ?
    Thanks for your help

    ReplyDelete
    Replies
    1. Hi Guilhem,
      Good point, right now the outcome variable is generated, based on the form identifier that's created at deployment. We should also provide a logical variable name, so it's easier to refer to the outcome value. Could you raise a jira for this?

      Delete
    2. Created here : https://activiti.atlassian.net/browse/ACT-4070

      So as a workaround right now, I guess I just have to check the form XML to get the generated variable name, right ?
      Noob question : where is the form XML ?

      Delete
    3. Thanks.
      The current logic creates the outcome variable:

      String targetVariable = "form" + form.getId() + "outcome";
      You can get the form id from the form key of the user task.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Just installed Activiti 6 looks really great! Noticed that I can share apps but not processes in kickstart app. Will this feature be added before the official release so users can work on the same processes in kickstart?

    ReplyDelete
  8. Thanks, no this is not on our todo list right now. You can create a JIRA issue for a feature request to see how much interest there's in the community to add this functionality.

    ReplyDelete
  9. Hi Tijs,

    When sharing an app, do you have to select a specific group/person/list of persons to share with? Is it possible to create a "public" app that is shared with all users of the system or would you have to effectively create an EVERYONE group manually to deal with this?

    Thanks

    Steven

    ReplyDelete
    Replies
    1. Hi Steven,

      A public app is not supported yet. Yes, a EVERYONE group would be a solution for now.

      Delete
  10. Hello Im unable to use activiti rest using h2 database and activti 6 please help

    ReplyDelete
    Replies
    1. Best to ask these kind of questions on the Activiti forum. Without more details it's hard to say anything useful about it.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. hello sir
    when i deploy wars into tomcat (8.0.23) and run the tomcat and link
    http://localhost:8080/activiti-app its give error.


    log4j:ERROR Could not find value for key log4j.appender.File
    log4j:ERROR Could not instantiate appender named "File".
    log4j:ERROR Could not find value for key log4j.appender.Syslog
    log4j:ERROR Could not instantiate appender named "Syslog".

    ?

    ReplyDelete
  13. hello my problem is solved now i am able to login activiti6.0 :)

    ReplyDelete
  14. Is there an option to assign task to a variable that can be resolved to a user or group? This option would support a dynamic task assignment depending on some business rules.

    How about out-of-office feature to auto delegate task to a designate user of the assignee's choice?

    ReplyDelete
  15. hello sir
    when i deploy wars into tomcat (7.0.68) and run the tomcat and link
    http://localhost:8080 its give error.


    log4j:ERROR Could not find value for key log4j.appender.File
    log4j:ERROR Could not instantiate appender named "File".
    log4j:ERROR Could not find value for key log4j.appender.Syslog
    log4j:ERROR Could not instantiate appender named "Syslog".

    ReplyDelete
  16. hello sir
    when i deploy wars into tomcat (7.0.68) and run the tomcat and link
    http://localhost:8080 its give error.


    log4j:ERROR Could not find value for key log4j.appender.File
    log4j:ERROR Could not instantiate appender named "File".
    log4j:ERROR Could not find value for key log4j.appender.Syslog
    log4j:ERROR Could not instantiate appender named "Syslog".

    ReplyDelete
  17. Not sure if you resolved this, but the log4j error may not be the thing stopping you.

    I thought the same, but if you look at the comments above, you will see that the demo depends on having a mysql DB ready for it... and that might be the real error...

    Also above, someone has mentioned how to change to the h2 memory DB.

    That was the issue I had anyway.

    ReplyDelete
  18. Could we use PostgreSQL as database?

    ReplyDelete
    Replies
    1. Of course you can. Just change WEB-INF/classes/META-INF/activiti-app/activiti-app.properties, mentioned above, for PostgreSQL and download PostgreSQL jdbc driver

      Delete
  19. Not able to login with the default username/password mentioned above. Is there a config file I need to adjust before I can login?

    ReplyDelete
  20. Hi Tijs,

    Is there a way process definition may be modified at runtime. The ProcessDefinitionBuilder which was available as a part of the API in 5.18 seems to be gone now. What is the means to define process definitions programmatically?

    ReplyDelete
  21. Hi Tijs,
    Is (or will it be) the activiti-app like the download is part of the community or Enterprise version?

    ReplyDelete
    Replies
    1. Hi, the Activiti app is part of the Activiti 6 open source / community distribution. The source is available here: https://github.com/Activiti/Activiti/tree/activiti6/modules/activiti-ui

      The Enterprise version has some additional features.

      Delete
    2. What are the differences between community and enterprise version. I can see stencil support is missing and of course whole activiti admin. Anything else?

      Delete
    3. There's a trial download for the enterprise version so you can have a look to see the differences yourself. There are a lot of differences. The Activiti admin app is open source as well with Activiti 6, but not released yet. The Enterprise version of the Activiti admin app contains additional features.

      Delete
  22. Hello Tijs, currently Im working on a bank, at Mexico, Im a Operative Eficiency Consultant, I develop small solutions for automating processes and I think the open source version of activiti its enough for the little process that I can automate, this month Im planning to have a meeting woth my boss and tell him to give a try to the tool, but My question is, do you offer any kind of training services for knowing the opensource and in a future we can modify the code to our needs? We are a small team of 4 people.

    I think if I do the things well activiti has a lot of future in the Bank.

    I hope you can tellme if you have partners in latam, because like everything I think this implementation is going to evolve from easy process to a very complex one.

    I give you my personal email, because I cant give in here my enterprise email.

    alfred0823@hotmail.com

    ReplyDelete
  23. doesnt work

    11:26:55,695 ERROR [stderr] (ServerService Thread Pool -- 70) INFO 18/11/16 11:26:liquibase: Successfully acquired change log lock
    11:26:55,744 ERROR [stderr] (ServerService Thread Pool -- 70) INFO 18/11/16

    ReplyDelete
    Replies
    1. Ehm ok, what doesn't work and do you have some more logging showing the issue?

      Delete
    2. This all looks ok. Liquibase is creating the tables as expected. What is the issue you are experiencing?

      Delete
  24. is there any other way to create the database without liquibase?

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. thanks I solved the problem, it was a problem with the role privileges. It was my fault, sorry

    ReplyDelete