Monthly Archives: November 2015

Soft Validation Popup in IBM BPM

When it comes to doing validations in IBM Business Process Manager (IBM BPM) it is usually sufficient to use the standard techniques of the CoachValidation framework. But what if you only want to warn the user and give them the option to either review their input or continue anyways? How can this be modelled?

In this example we have a Coach where the user can enter input for three Decimal fields. If any of the Decimals is empty when the user hits Submit we want to open a modal window which warns the user. Below you can see the Coach Step 1 with the Decimal controls, a Submit button and the Dialog (from the Dashboards toolkit).

To control when the Dialog is shown we need a Boolean variable showWarning. The text in the dialog is filled dynamically and stored in the warningMessage String. Together with the Decimals the variables in our Heritage Human Service look like this:

The showWarning variable is initialised in the step Prepare Coach right before we enter the Coach.

The full diagram looks like this:

When the user clicks Submit the validation is executed. In case the validation was successful the flow continues to the Show Warning step. This contains the logic for the “soft validation”. While the Validate script contains blocking validations as usual (such as required fields which are empty), the Show Warning script contains the logic for showing the warning dialog (e.g. if any of our optional Decimal fields is still empty).

If this “soft validation” results in the warning dialog needing to be shown the showWarning variable is set to true and the Show Warning? gateway leads to a stay on page instead of continuing to the next Coach Step 2.

Now the user is presented with the warning dialog and can choose to either Submit anyway, which will lead the process flow to Step 2 (as if the warning had not appeared), or they can click Review input which will cause the user to stay on the page and close the dialog by setting showWarning to false in the Close Warning script.

This results in a “soft validation”, this case checking whether the optional Decimals fields were set at all.

Wrapping Existing Event Handlers in JavaScript

When working with frameworks, such as Intrexx or IBM Business Process Manager, you often want to extend existing UI controls. You want to prepend or append event handlers to the ones already in place. This post explains how this can be done.

Why not addEventListener?

The obvious solution is simply using addEventListener. However, sometimes you want to do a little more, and need a little more control. Perhaps the event handler that needs to be extended is not a standard event. Or perhaps you need to do something specifically before or after the existing function is called.

Wrapping an existing function

Suppose we have an object obj with a property change(). The trick is to store the original function away and replace it with a new function which calls the original function. The concept looks like this:

// Store original function:
var _change = obj.change;

// Replace with new function:
obj.change = function(){
  // Do something before...
  _change();
  // Do something after...
}

A full example can be seen below. Changing the value of the text field triggers the change funtion. In the JavaScript tab you can see the additional function that “wraps” the original function, i.e. calls the original function.

See the Pen Example 1 by Christian Templin (@cianty) on CodePen.

Fixing this

The above pattern is a bit buggy. Since we “move” the original function into our new function any code which uses the this keyword gets broken. Take a look at the following example: On every change the original functionality calls an alert which prints the text input’s value. By moving the function, this no longer refers to the text input.

See the Pen Example 2: We broke this by Christian Templin (@cianty) on CodePen.

The solution to this is using call or apply. When executing the function via call/apply you can explicitly provide the this context, so that the original functionality is kept intact.

See the Pen Example 3: Fixed this by Christian Templin (@cianty) on CodePen.

Conclusion

The following pattern can be used to prepend or append code to an existing JavaScript function. Whether to use call or apply depends on how you want (need) to pass your arguments.

// Store original function:
var _change = obj.change;

// Replace with new function:
obj.change = function(){
  // Do something before...
  _change.call(this);
  // Do something after...
}