Fetching Additional Variables

When loading the form, the values of all variables used in the form are fetched from thebackend. This means that the form SDK only fetches those variables which are actually used in theform. The most convenient way to use a variable is the directive. However,there are some situations where directive-based usage is inconvenient. In such situations it isuseful to declare additional variables programmatically:

Submitting Additional Variables

Similar to fetching additional variables using a script, it is also possible to add additionalvariables to the submit:

<form role="form">
  <script cam-script type="text/form-script">
    var variableManager = camForm.variableManager;
    camForm.on('submit', function() {
      // this callback is executed when the form is submitted, *before* the submit request to
      // the server is executed
      // creating a new variable will add it to the form submit
      variableManager.createVariable({
        name: 'customVariable',
        type: 'String',
        value: 'Some Value...',
        isDirty: true
      });
    });
  </script>
</form>

Implementing Custom Fields

The following is a small usage example which combines some of the features explained so far.It uses custom JavaScript to implement a custom interaction with a form field which does notuse any cam-variable-* directives.

It shows how custom scripting can be used for

• declaring a variable to be fetched from the backend,
• writing the variable’s value to a form field,

• reading the value upon submit.
  

  <form role="form">
     class=&#34;form-control&#34;
     id=&#34;customField&#34;&gt;
  <script cam-script type="text/form-script">
    var variableManager = camForm.variableManager;
    var customField = $('#customField', camForm.formElement);
    camForm.on('form-loaded', function() {
  // fetch the variable &#39;customVariable&#39;
    });
    camForm.on('variables-fetched', function() {
  var value = variableManager.variableValue(&#39;customVariable&#39;);
  // write the variable value to the form field
  customField.val(value);
    camForm.on('submit', function(evt) {
  var fieldValue = customField.val();
  var backendValue = variableManager.variable(&#39;customVariable&#39;).value;
    // prevent submit if value of form field was not changed
    evt.submitPrevented = true;
  } else {
    // set value in variable manager so that it can be sent to backend
    variableManager.variableValue(&#39;customVariable&#39;, fieldValue);
    });
  </script>

The above example uses jQuery for interacting with the HTML controls. If you use AngularJS, you can also populate the $scope in the variables-fetched callback and read the values from the $scope in the submit callback:

<form role="form">
<!-- custom control which does not use cam-variable* directives
     but binds to the angular scope -->
<input type="text"
       class="form-control"
       id="customField"
       ng-model="customerId">
<script cam-script type="text/form-script">
  var variableManager = camForm.variableManager;
  $scope.customerId = null;
  camForm.on('form-loaded', function() {
    // fetch the variable 'customVariable'
    variableManager.fetchVariable('customVariable');
  });
  camForm.on('variables-fetched', function() {
    // value has been fetched, bind to $scope.customerId
    $scope.customerId = variableManager.variable('customVariable').value;
  });
  camForm.on('submit', function(evt) {
    // set value in variable manager so that it can be sent to backend
    variableManager.variableValue('customVariable', $scope.customerId);
  });
</script>
</form>