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
<form role="form"
      cam-form
      class="form-horizontal">

  <div class="panel panel-info">Please fill in the details for the invoice you received</div>

  <div class="control-group">
    <label class="control-label"
           for="creditor">Creditor</label>
    <div class="controls">
      <input cam-variable-name="creditor"
             id="creditor"
             class="form-control"
             type="text"/>
      <div class="help">
        (i.e. "Great Pizza for Everyone Inc.")
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label"
           for="amount">Amount</label>
    <div class="controls">
      <input cam-variable-name="amount"
             id="amount"
             class="form-control"
             type="text"/>
      <div class="help">
        (i.e. "30$")
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label"
           for="invoiceNumber">Invoice Number</label>
    <div class="controls">
      <input cam-variable-name="invoiceNumber"
             id="invoiceNumber"
             class="form-control"
             type="text"/>
      <div class="help">
        (i.e. "I-12345")
      </div>
    </div>
  </div>
</form>

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 false, 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.

processModule.controller('processStartModalFormCtrl', [
        '$scope', 'camAPI',
function($scope,   camAPI) {
  var ProcessDefinition = camAPI.resource('process-definition');
  // ...
  $scope.loadProcesses = function() {
    $scope.totalProcesses = 0;
    $scope.processes = [];
    var where = {};


    ProcessDefinition.list(where, function(err, res) {
      if (err) {
        throw err;
      }

      $scope.totalProcesses = res.count;

      $scope.processes = res.items;
    });
  };
  // ...

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.