It is possible to participate in the lifecycle of the form. See Form Lifecycle andEvents for more details.

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 cam-variable-name directive. However,there are some situations where directive-based usage is inconvenient. In such situations it isuseful to declare additional variables programmatically:

  1. <form role="form">
  3.   <div id="my-container"></div>
  5.   <script cam-script type="text/form-script">
  6.     var variableManager = camForm.variableManager;
  8.     camForm.on('form-loaded', function() {
  9.       // this callback is executed *before* the variables are loaded from the server.
  10.       // if we declare a variable here, its value will be fetched as well
  11.       variableManager.fetchVariable('customVariable');
  12.     });
  14.     camForm.on('variables-fetched', function() {
  15.       // this callback is executed *after* the variables have been fetched from the server
  16.       var variableValue = variableManager.variableValue('customVariable');
  17.       $( '#my-container', camForm.formElement).text(variableValue);
  18.     });
  19.   </script>
  21. </form>

Submitting Additional Variables

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

  1. <form role="form">
  3.   <script cam-script type="text/form-script">
  4.     var variableManager = camForm.variableManager;
  6.     camForm.on('submit', function() {
  7.       // this callback is executed when the form is submitted, *before* the submit request to
  8.       // the server is executed
  10.       // creating a new variable will add it to the form submit
  11.       variableManager.createVariable({
  12.         name: 'customVariable',
  13.         type: 'String',
  14.         value: 'Some Value...',
  15.         isDirty: true
  16.       });
  18.     });
  19.   </script>
  21. </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.

    1. <form role="form">
    2. <!— custom control which does not use cam-variable* directives —>
      <input type="text"
    3.    class=&#34;form-control&#34;
    4.    id=&#34;customField&#34;&gt;
    5. <script cam-script type="text/form-script">
        var variableManager = camForm.variableManager;
        var customField = $('#customField', camForm.formElement);
    6.   camForm.on('form-loaded', function() {
    7. // fetch the variable &#39;customVariable&#39;
    8. variableManager.fetchVariable(&#39;customVariable&#39;);
    9.   });
    10.   camForm.on('variables-fetched', function() {
    11. // value has been fetched from the backend
    12. var value = variableManager.variableValue(&#39;customVariable&#39;);
    13. // write the variable value to the form field
    14. customField.val(value);
    15.   });
    16.   camForm.on('submit', function(evt) {
    17. var fieldValue = customField.val();
    18. var backendValue = variableManager.variable(&#39;customVariable&#39;).value;
    20. if(fieldValue === backendValue) {
    21.   // prevent submit if value of form field was not changed
    22.   evt.submitPrevented = true;
    24. } else {
    25.   // set value in variable manager so that it can be sent to backend
    26.   variableManager.variableValue(&#39;customVariable&#39;, fieldValue);
    27. }
    28.   });
      </script>

</form>

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:

  1. <form role="form">
  3. <!-- custom control which does not use cam-variable* directives
  4.      but binds to the angular scope -->
  5. <input type="text"
  6.        class="form-control"
  7.        id="customField"
  8.        ng-model="customerId">
  10. <script cam-script type="text/form-script">
  11.   var variableManager = camForm.variableManager;
  13.   $scope.customerId = null;
  15.   camForm.on('form-loaded', function() {
  16.     // fetch the variable 'customVariable'
  17.     variableManager.fetchVariable('customVariable');
  18.   });
  20.   camForm.on('variables-fetched', function() {
  21.     // value has been fetched, bind to $scope.customerId
  22.     $scope.customerId = variableManager.variable('customVariable').value;
  23.   });
  25.   camForm.on('submit', function(evt) {
  26.     // set value in variable manager so that it can be sent to backend
  27.     variableManager.variableValue('customVariable', $scope.customerId);
  28.   });
  29. </script>
  31. </form>

原文: https://docs.camunda.org/manual/7.9/reference/embedded-forms/javascript/lifecycle/