Controls
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.
If an HTML control is not supported, you need to write custom JavaScript.
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>