Lifecycle and Events
Events
-
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 thevariableManager
.
Events:form-loaded
is fired after the form has been parsed, and all form directives have been evaluated.
-
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.
-
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.
-
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.
- The user interacts with the form. In this phase no events are fired.
-
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.
-
Finally, the form is submitted.
Events:submit
is fired before the submit request is sent to the server. An event handler may prevent the form from being submitted by setting the propertysubmitPrevented
true.submit-success
is fired after the server successfuly treated the submission.submit-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-error', function(evt, res) {
// handle submit-error:
var error = res[0];
});
</script>
</form>