The Forms SDK provides a set of directives which simplify working with process variables in an HTML form. These directives work on most of the HTML controls and allow users to declaratively fetch variables from the process engine and have their values written to and read from input fields.

The cam-variable-name Directive

The cam-variable-name directive allows providing the name of a process / task / case variable. If the directive is discovered on an HTML control, the value of the variable is fetched from the server and written to the control.

<input type="text"
       cam-variable-name="CUSTOMER_ID">

The cam-business-key Directive

The cam-business-key is aimed to be used on a free text input field in order to define a businessKey at the start of a process.
This attribute is only relevant when the form is aimed to start a process.

<input type="text"
       cam-business-key>

See also: Setting the business key using Javascript

AngularJS support and cam-variable-name

If you use the AngularJS integration, the cam-variable-name directive will automatically bind the input to the model in case no binding is provided by the user.

The following two markup examples have the same semantics:

<input type="text"
       cam-variable-name="CUSTOMER_ID">

is the same as

<input type="text"
       cam-variable-name="CUSTOMER_ID"
       ng-model="CUSTOMER_ID">

If the user provides a customer ng-model binding, it is respected:

<input type="text"
       cam-variable-name="CUSTOMER_ID"
       ng-model="customerId">

Current value: {{customerId}}

The cam-variable-type Directive

The cam-variable-type directive allows specifying the type of a process / task / case variable. This is required if the variable does not yet exist.

The following markup creates a text input field bound to a variable of type Double:

<input type="text"
       cam-variable-name="INVOICE_AMOUNT"
       cam-variable-type="Double">

Supported Variable Types

See the section on variable types for a list of variable types which are supported out of the box.

AngularJS Support and cam-variable-type

The cam-variable-type directive can be used as validation directive:

<input type="text"
       name="invoiceAmount"
       cam-variable-name="INVOICE_AMOUNT"
       cam-variable-type="Double">

<span ng-show="myForm.invoiceAmount.$error.camVariableType">
  Input must be a 'Double'.
</span>