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.

  • Monitoring Camunda Platform 7 with Prometheus

    Monitoring is an essential facet of running applications in a production system. Through this process, organizations collect and analyze data, and determine if a program is performing as expected within set boundaries. When combined with alerting, monitoring allows for detecting unexpected system behavior to mitigate exceptional situations as fast as possible. Furthermore, tracking the performance of a system enables organizations to improve those aspects that have the biggest impact with higher priority. One essential aspect of monitoring is the list of key metrics you want to observe. There are different categories of statistics that can be of interest here. To observe the defined metrics, there are plenty of application monitoring tools on the market today. They differ in many aspects...

    Read more
  • Securing Camunda 8 self-managed cluster and applications...

    Directory services are an effective way to manage an organization’s users, groups, printers, devices, and more. Most organizations accomplish this using Active Directory, Apache Directory, Oracle Internet Directory, or other similar tools. Recently I worked with a customer who wanted to see how he could secure the Camunda 8 Platform and process applications with such a directory. Their requirements consisted of: Allowing Directory users to access Camunda applications (Tasklist, Operate, Optimize) Accessing secured Tasklist & Operate APIs from our custom project Securing the custom project In this article, I’ll briefly explain the 3 easy steps taken to fulfill their requirements which include: Federate users from the Directory service into Keycloak Declare an application in Identity to access Camunda APIs Configure...

    Read more
  • Accelerate Connectivity with Camunda Platform 8.1

    We’re thrilled to announce Camunda Platform 8.1, the latest release of our process orchestration solution. This new version introduces features that accelerate connectivity to the many different systems and technologies that are required for true digital transformation, including: Create custom Connectors with our Integration Framework to accelerate connectivity New out-of-the-box Connectors for popular services Enhancements to Camunda Modeler that improve productivity Hot backups and official support for Amazon EKS and Red Hat OpenShift Plus, several upgrades requested by Camunda Platform 7 customers Organizations across all industries rely on complex technology stacks to adapt and enhance their operations in response to market dynamics, new disruptive companies, and increasing consumer expectations. Your technology stack likely includes everything from cutting-edge technologies to legacy...

    Read more

Ready to get started?

Still have questions?