Pre-Submit Validation

   MaestroThe UI design product.  |   Form Builder Platform Developer |  19.05 This feature was introduced in 19.05.

Journey Maestro allows you to implement a Pre-Submit validation call to a Manager server before a form is submitted. This is a rather common requirement of many user journeys.

A Pre-Submit validation flow can be as follows:

1. A user clicks a submit button when the form is completed
2. The form validates that all the mandatory rules and validation rules have passed
3. The form calls a Dynamic Data service to pass the data from the form to the Manager server instead of processing the submit immediately
4. The Dynamic Data service processes the data, which may include calls to various back-end services, and returns a go or no-go decision back to the form
5. If the decision is a go, then the submit event occurs
6. If the decision is a no-go, then an error or an appropriate message is displayed to the form user

This is illustrated in the sequence diagram below:

While passing the data to the server, one common pattern is to explicitly invoke a background save method which results in an XML data become available to the Dynamic Data service. Another pattern is to collect the data as a JSON object and pass it in the Dynamic Data service.

The problem with these approaches is that each of the functions called asynchronouslymeaning that they don't return immediately, but rather some time later. To accommodate this, you need to use promises.

Let's look at the implementation of the Submit click event of a standard Maestro form:

Form.submit(item.properties.submissionMethod, item.properties.legacyMethod).then(function(response){
    Form.fireRule("onSuccess", item, data, response);
}, function(err) {
    Form.fireRule("onFailure", item, data, err);
});

Here, the Form.submit() method includes a validate() call to perform local mandatory rule validation. You can implement this using the Pre-Submit event at the Form level, which can be found under Form > Navigation > Right > Submit > Properties > Rules > Click.

It's important to note that if the method returns false or a promise rejected from the Pre-Submit event, then it will not submit the form. However, if it doesn't return anything, so the form may still be submitted.

To accommodate the behavior mentioned above, you should try using the following code:

parameters.param = data.lastName;
Form.backgroundSave()
.then(function(backgroundSaveSuccessful) {
    return Form.validate();
}).then(function(validateSuccessful){
    return DynamicData.call("MyDynamicDataService", parameters);
}).then(function(dynamicDataCallResult){
    console.log(dynamicDataCallResult.result);
    if (dynamicDataCallResult.result=="success"){
        return dynamicDataCallResult.result;
    } else {
        throw new Error(dynamicDataCallResult.result)
    }
}).then(function(dynamicResult){
    return Form.submit(item.properties.submissionMethod, item.properties.legacyMethod);
}).then(function(submitResult){
    Form.fireRule("onSuccess", item, data, response);
}).catch(function(err){
    console.log(err);
    Form.fireRule("onFailure", item, data, err);
    Form.showDialog("errordialog");
});

Next, learn about promises in Maestro.