My Journey With Camunda — Part 6 — Custom Tasklist Application

Let’s create our own tasklist. Photo by Hal Gatewood on Unsplash

This is multipart series where I wrote my journey using Camunda from a non-java developer perspective.

In Part 5, we have seen Camunda Tasklist. It’s a good web app that normal user can use to perform their daily tasks. However, to further customize task form in Camunda Tasklist, we will need to use Java stack. For example, in some cases, user might want to have different UI for their applications or maybe they already have existing application that need to be updated with Tasklist capability. In this part, we will see how to create a custom Tasklist app.

Another component that we should add is authentication to Camunda REST API. I have mentioned in previous post that Camunda REST API is not protected by default. We can add basic authentication but I think this is not a good approach for web app because users will need to specify their username and password each time they want to do something. Depending on how the app will be implemented, we can have session (similar to Camunda apps) or token based authentication (e.g. JWT). Here, we will create an authentication proxy for Camunda REST API that uses JWT. User will login with his/her username and password that we created in Camunda Admin, proxy will return with a JWT token that will be used for next requests.

Overall architecture of our applications will be like following image:

Frontend (Nexus)

For the frontend, I will use CoreUI Vue.js Admin Template to create our UI. I will call my application Nexus. If you have to ask why Nexus? Nexus means a connection or series of connections linking two or more things. So this app is intended as connection between people and teams inside a company. That is what workflow is used for.

Below is the login page.

After logged in, user can see homepage. Obviously this needs improvements, but we will leave that for later.

Then, we have forms. Currently we only have single form that is Leave Requests.

When a user submit a Leave Request form, it will trigger process instance in Camunda and it will create user tasks assigned to specific group to approve the requests. For example, in above Leave Request form, we logged in as Sam Purple and we ask for 10 days leave. Note that because we developed this application, we can auto-fill the forms with user information that we already have.

Our DMN will assign this group manager and if we logged in as Sophia Green (who is the Manager), we will see that she has tasks to approve the requests.

task approval form

Proxy

The next part is the proxy. This is a web application that use Echo framework. Echo is a high performance and simple Golang web application framework. Proxy APIs is protected by JWT middleware and used by Nexus for all UI functionality. This proxy will call Camunda REST API to start process instance, get user tasks and complete user tasks. I used Resty as my HTTP client.

When log in, we will check to Camunda if username and password is correct using verify-user API. This is shown in following snippet. Below is Camunda REST API client.

And below is how I used in Echo request handler

This is the pattern that I used

  1. See what API is needed by the Frontend
  2. Add Camunda REST API wrapper
  3. Add handler in Echo so that Frontend can use it.

Source Code

Source code for this part is available in Github.

The code is enough for demonstrating the how we can develop application that use Camunda BPM. But there will be some efforts needed to polish the application if you want to use it for real world usage. Please fork it, improve it and do pull requests (if you want).

This repo also contain external task service that we already have in Part 4 — External Service Task with Golang. External tasks handler is currently still doing nothing because it will be very implementation specific.

Next Step

The next part will be deploying this application to servers and get logs and monitoring that we needed to operate this application. We want to be close to real deployment scenario. There are also some improvements that I want to add to Nexus app.

software engineer. product design, planning and development.