CamundaCon 2023 ― The Process Orchestration Conference of the Year on Sep 27-28

Save your Seat

News from the front-(end)

  • Blog
  • >
  • News from the front-(end)

30 Day Free Trial

Bring together legacy systems, RPA bots, microservices and more with Camunda Platform 8

Join the Camunda Developer Newsletter

Get the latest events, release notes, and product updates straight to your mailbox.

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"

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

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

  <div class="control-group">
    <label class="control-label"
    <div class="controls">
      <input cam-variable-name="amount"
      <div class="help">
        (i.e. "30$")

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

Note, if you cloned the camunda-bpm-platform repository, you will find this file under

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;
  // ...


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.

Try All Features of Camunda Platform

Related Content

Did you know that you can keep your process instances moving with Operate? Learn how in this tutorial.
Event-streaming technology has many advantages. Learn how your business processes can benefit from using it for process orchestration.
Combining a process orchestration solution like Camunda with an observability solution like Instana can break down silos and help teams better understand their systems.