Camunda Team Blog

News from the front-(end)

Written by Valentin Vago on , under Execution category.
The front-end of the camunda BPM platform has been under heavy development.
The web-apps have been externalized and separated into different projects,
which means that the "admin", the "cockpit" and the upcoming "tasklist" have their own repositories,
and those projects are now relying on the "UI commons" and the "Javascript SDK" libraries.


The Javascript SDK

The actual JS SDK has already been implemented in the upcoming tasklist and allows us to start processes and use their embedded forms (when they use one).

The forms handling is also being re-written from scratch to be easier to use and less conflicting with the HTML you might have wrote to customize your user experience.

New embedded form:

What did change? Mostly, the attributes.
  • An embedded form must have an attribute cam-form in order to be discovered by the toolkit.
  • The fields who are relevant to the engine must have the cam-variable-name attribute with a value being the name of a variable.
  • The tags having a cam-variable-name attribute may also have a cam-variable-type attribute with one of the following values:
    • string - only supported type at the moment of writing this post
    • java primitive types, date, integer, long, short, ...
    • your own type - if you want to work with complex data
How does it work? The following things will happen:
  1. look for form tag with a cam-form attribute
  2. within the form, iterate threw the fields having a cam-variable-name attribute and collect information
  3. send a request to the engine to get information about the variables
  4. update the form fields accordingly (the values and types already present in the form are not being overridden)
  5. the user fills the form and click the submit button
  6. the data is validated (and messages are shown if necessary)
  7. if the validation succeeded, a request - using the API client - is performed
Note, if you cloned the camunda-bpm-platform repository, you will find this file under
examples/invoice/src/main/webapp/forms/start-form.html.

New API client

The API client is aimed to ease the communication between your front-end (or node.js) application and the platform engine. Using it will not only reduce the amount of code you have to write but also increase the life span of your scripts.
Our goal is to standardize as much as possible the methods and their signatures for each resources in order to make it easy to learn and use. So, most of the resources will have a list function taking
  1. an object - describing the query parameters / options - as first argument
  2. a callback - à-la node.js - to treat the response. In the case of a list call, the callback function will have 2 arguments - again, à-la node.js - like:
    1. error: should be falsy, unless an error occurred
    2. result: is going to be an object with the properties
      • count: is the total amount of records matching the "where" criteria
      • items: will be an array of objects
The following snippet is inspired by the implementation in the new tasklist.

Upcoming

As mentioned, there is a lot of work done (and to be done) on the different aspects of the web-apps.
We have a plan, we started implementing it and we will, within a few weeks, add API client resources, support additional form field types, improve the stability of our code and provide a brand new web-based user interface for the tasklist.

By the way... if you want to work on those kind of projects, with a small but great team and play some kicker: we are still looking for front-end developers.