Events

1. The form is parsed, and variable names are collected from the markup. This means that directives like cam-variable-name are evaluated and the resulting variables are declared in the variableManager.
   Events:
   • form-loaded is fired after the form has been parsed, and all form directives have been evaluated.


2. In the second phase, a request is made to the server to gather the values of the variables declared in the variable manager.
   Events:
   • variables-fetched is fired after the request returns and the values of the variables have been merged into the variableManager.


3. If a saved state of the form exists, the variable values are replaced with the saved state.
   Events:
   • variables-restored is fired after the saved values of the variables have been merged with the values in the variableManager.


4. Next, the variables are applied to the form controls. This means that HTML input fields and select boxes are populated with the variable values present in the variableManager.
   Events:
   • variables-applied is fired after the values of the variables have been applied to the form controls.


5. The user interacts with the form. In this phase no events are fired.


6. The user can save the form, which causes the current values of the variables to be stored in the localStorage. If the user comes back to the form later, the values are restored.
   Events:
   • store is fired before the values of the variables are written to the localStorage. An event handler may prevent the values from being stored.
   • variables-stored is fired after the values are written to the localStorage.


7. Finally, the form is completed. Triggering an [BPMN error or escalation event](/manual/latest/reference/bpmn20/tasks/user-task/#reporting-bpmn-error) will submit the form .
   Events:
   • submit, error or escalation is fired before the submit request is sent to the server. An event handler may prevent the form from being submitted by setting the property `submitPrevented`, `errorPrevented` or `escalationPrevented` to true.
   • submit-success, error-success or escalation-success is fired after the server successfully treated the submission.
   • submit-failed, error-failed or escalation-failed is fired after the server failed at treating the submission or when a network error happened.



Event Listeners

Event listeners can be registered from custom JavaScript:

<form role="form" name="form">

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

    camForm.on('form-loaded', function() {
      // handle form loaded
    });

    camForm.on('variables-fetched', function() {
      // handle variables fetched
    });

    camForm.on('variables-restored', function() {
      // handle variables restored
    });

    camForm.on('variables-applied', function() {
      // handle variables applied
    });

    camForm.on('store', function(evt) {
      // handle store
      // may prevent the store from being executed
      evt.storePrevented = true;
    });

    camForm.on('variables-stored', function() {
      // handle variables stored
    });

    camForm.on('submit', function(evt) {
      // handle submit
      // may prevent the submit from being executed:
      evt.submitPrevented = true;
    });

    camForm.on('submit-success', function() {
      // handle submit-success
    });

    camForm.on('submit-failed', function(evt, res) {
      // handle submit-failed:
      var error = res[0];
    });

    camForm.on('error', function(evt) {
      // handle error
      // may prevent the error from being executed:
      evt.errorPrevented = true;
    });

    camForm.on('error-success', function() {
      // handle error-success
    });

    camForm.on('error-failed', function(evt, res) {
      // handle error-failed:
      var error = res[0];
    });

    camForm.on('escalation', function(evt) {
      // handle escalation
      // may prevent the escalation from being executed:
      evt.escalationPrevented = true;
    });

    camForm.on('escalation-success', function() {
      // handle escalation-success
    });

    camForm.on('escalation-failed', function(evt, res) {
      // handle escalation-failed:
      var error = res[0];
    });

  </script>

</form>