Flowable User Interface

Flowable provides several web applications to demonstrate and leverage the functionality provided by the Flowable project. These web applications can be used with a Petals-SE-Flowable instance.

UI Applications

Flowable offers four web applications enbaling Flowable engine monitoring:

Flowable IDM
Flowable Modeler
Fowable Task
Flowable Admin

The Flowable User Interface does not need the four web applications to work correctly. In our case we will only use Flowable IDM and Flowable Admin:

Flowable-IDM: an Identity Management application that provides single sign-on authentication functionality for all the Flowable UI applications, and, for users with the IDM administrative privilege, it also provides functionality to manage users, groups and privileges.
Flowable Admin: an administrative application that allows users with admin privilege to query the BPMN, DMN, form and content engines and provides several options to change process instances, tasks, jobs and so on. The admin application connects to the engines through the REST API that is deployed with the Petals-SE-Flowable instance.

Flowable UI Admin Installation

Here, you can find some information to install Flowable UI Admin linked with a Flowable engine embedded into a Petals SE Flowable. More information about Flowable UI Admin can be found into the Flowable's documentation.

For our sample installation, the required configuration is:

a working Apache Tomcat installation. Apache Tomcat can be downloaded at : http://tomcat.apache.org/,
a Petals container where the Petals SE Flowable is running,
the Flowable's REST API is enabled on the Petals SE Flowable.

And download the Flowable's distribution whose the version is the same as the Flowable engine embedded into Petals SE Flowable. This version can be downloaded at : http://www.flowable.org/downloads.html.

Petals SE Flowable must be configured with a database reachable by external clients. So, using an in-memory or embedded database can be troubling.

Installation

Flowable UI Admin requires Flowable UI IDM for its identity management that's why it is needed to deploy both webapplications.

Configuration of Flowable UIs is defined in a properties file 'flowable-ui-app.properties' located in Tomcat classpath ($TOMCAT_HOME.lib or /var/lib/tomcatX/lib/ according to your Tomcat's installation). Create it with the following content (or from https://github.com/flowable/flowable-engine/blob/master/modules/flowable-ui-admin/src/main/resources/META-INF/flowable-ui-app/flowable-ui-app.properties):

datasource.driver=org.h2.Driver
#datasource.url=jdbc:h2:tcp://localhost/flowableadmin
datasource.url=jdbc:h2:mem:flowable;DB_CLOSE_DELAY=-1

#datasource.driver=com.mysql.jdbc.Driver
#datasource.url=jdbc:mysql://127.0.0.1:3306/flowable?characterEncoding=UTF-8

#datasource.driver=org.postgresql.Driver
#datasource.url=jdbc:postgresql://localhost:5432/flowableadmin

#datasource.driver=com.microsoft.sqlserver.jdbc.SQLServerDriver
#datasource.url=jdbc:sqlserver://localhost:1433;databaseName=flowableadmin

#datasource.driver=oracle.jdbc.driver.OracleDriver
#datasource.url=jdbc:oracle:thin:@localhost:1521:FLOWABLEADMIN

#datasource.driver=com.ibm.db2.jcc.DB2Driver
#datasource.url=jdbc:db2://localhost:50000/flowableadmin

datasource.username=sa
datasource.password=

#
# Default REST endpoint configs
#
# Process engine
rest.process.app.name=Flowable Process Engine app
rest.process.app.description=Flowable Process Engine REST config
rest.process.app.host=0.0.0.0
rest.process.app.port=8089
rest.process.app.contextroot=flowable-rest-api
rest.process.app.restroot=/
rest.process.app.user=rest-api-user
rest.process.app.password=user-api-rest-password

idm.app.url=http://localhost:8080/flowable-idm
idm.admin.user=kermit
idm.admin.password=kermit

First, starts to install the Flowable UI IDM deploying the WAR file 'flowable-idm.war' available in the Flowable's distribution archive with the Tomcat manager (http://localhost:8080/manager). Check this installation going to http://localhost:8080/flowable-idm and login with a user having an admin role. You should be able to manage users, groups and privileges.
Next, install the Flowable UI Admin deploying the WAR file 'flowable-admin.war' available in the Flowable's distribution archive with the Tomcat manager (http://localhost:8080/manager).

Connection between database and Flowable UI

Several types of database work with Flowable UI:

h2
mysql
oracle
postgre
db2
mssql

A database, whose the type belongs to the list above, has to be deloyed with the Petals-SE Flowable instance. This database will store Flowable UI users and deployed processes.
To connect a database to the Flowable UI you need to follow these steps:

Go to "/var/lib/tomcatX/lib/".
Edit "flowable-ui-app.properties" file:
1. Comment all datasource.driver properties which does not refer to the type of yout database and uncomment the convenient datasource.driver property.
2. Uncomment the datasource.url property and change the value property by the path/address to your database. Comment others database.url properties which are uncommented.
3. Assign database login and database password to the datasource.username and database.password properties.
In "/var/lib/tomcatX/lib/", create a file called db.properties.
Edit this file copying the text which is available at this address : https://github.com/flowable/flowable-engine/blob/master/modules/flowable-app-rest/src/main/resources/db.properties.
Like in "flowable-ui-app.properties" edit the properties of this file :
- db: assign the type of your database (h2, mysql, oracle, postgres, db2, mssql).
- datasource.driver, datasource.url, datasource.username, datasource.password: assign the values that you gave to these properties in "flowable-ui-app.properties" file.

NB: If you use a h2 database, you have to change Flowable UI web applications h2 jar files.

Get the convenient jar file at: https://search.maven.org/remotecontent?filepath=com/h2database/h2/1.4.178/h2-1.4.178.jar.
Go inside "/var/lib/tomcatX/webapps/flowable-admin/WEB-INF/lib" and delete h2-1.3.176.jar file.
Copy the downloaded h2 jar file in this directory.
Go inside "/var/lib/tomcatX/webapps/flowable-idm/WEB-INF/lib" and delete h2-1.3.176.jar file.
Copy the downloaded h2 jar file in this directory.

Access to Flowable UI

Go to "/var/lib/tomcatX/bin and execute startup.sh (startup.bat on Windows) script to start Tomcat.
Go to http://localhost:8080/flowable-idm and you will have access to Flowable IDM, and http://localhost:8080/flowable-admin for Flowable-Admin.

Wiki

Helpful links

Flowable UIs