task-form-embedded-json-variables

Json Variables in Embedded Forms

This example demonstrates how to work with json variables in embedded forms.

Overview

This example uses Jakarta API. It is compatible with the latest releases of Camunda Tomcat and WildFly distributions.

Creating a Json Variable in a Start Form

The process instance is started using a form. The form is a plain HTML form which is displayed inside Camunda Tasklist (or inside a custom application using the camunda-bpm-sdk-js library).

<form role="form" class="form-horizontal">

  <script cam-script type="text/form-script">

    var customer = $scope.customer = {};

    camForm.on('form-loaded', function() {

      // declare a 'json' variable 'customer' 
      camForm.variableManager.createVariable({
        name: 'customer',
        type: 'json',
        value: customer
      });
    });

  </script>

  <div class="control-group">
    <label class="control-label" for="firstName">First Name</label>
    <div class="controls">
      <input id="firstName" class="form-control" type="text" ng-model="customer.firstName" required />
    </div>
  </div>

  <!-- ... Additional fields ommitted -->

  </div>
</form>

The custom java script creates a Javascript Object and binds it to the angular $scope of the form as a variable named customer. We then hook into the lifecycle of camunda SDK JS Form and create a process variable named customer and provide as type information 'json' used for serialization.

The form itself is a plain angular js form (see ng-model binding of input field).

Accessing an existing Json Variable in a Task Form

In a task form, an existing Json variable can be accessed using custom Javascript. The pattern is to first fetch the value of the variable and then bind it to an angular scope variable:

camForm.on('form-loaded', function() {
  // tell the form SDK to fetch the json variable named 'customer'
  camForm.variableManager.fetchVariable('customer');
});

camForm.on('variables-fetched', function() {
  // work with the variable (bind it to the current AngularJS $scope)
  $scope.customer = camForm.variableManager.variableValue('customer');
});

Changing the value of the Json Variable in a Java Delegate

In a JavaDelegate, you can access the Json variable with the help of the Spin libraries. You can get a typed variable as JsonValue and use the Spin API to set an additional attribute:

public void execute(DelegateExecution execution) throws Exception {
  JsonValue jsonCustomer = execution.getVariableTyped("customer");
  jsonCustomer.getValue().prop("isValid", true);
  execution.setVariable("customer", jsonCustomer);
}

Running the example

1. Download a Camunda Platform Distribution
2. Checkout this repository using Git
3. Build the example using mvn clean package
4. Deploy the .war file located in the target/ folder to the server
5. Open Camunda Tasklist using the URL http://localhost:8080/camunda/app/tasklist
6. Start a new instance of the Process.