ADF 11g – Extend and Override standard client side behavior by manipulating the Javascript prototype

This article describes a way to extend and override the standard behavior of ADF client side JavaScript libraries. In this particular case we needed to learn about the client side validation errors in order to feed our expertise manager: when the user submits the form, client side validations are performed and when errors are found, these are presented to the end user. We would like to intercept this standard flow and also listen in to the list of validation error messages that will be shown to the end user.

A little debugging using Firefox quickly made it clear that the submitForm() method is invoked when a command button is activated and that it in turn (indirectly) makes use of the function processValidators() on the AdfHtmlPage object. This function will return true or false, depending on whether any validation error messages were produced by the collected validators that fire.

We can extend this function – without having to change any of the source code. The standard JavaScript way of overriding a method on an object is through the prototype of that object – and a reference to the original function.

The steps are:

1. create a JavaScript function that is executed when a page is loaded;
2. in that function, create a new variable (_oldProcessValidators) and assign a reference to the current _processValidators function to it
3. create a new function with the same signature as the original _processValidators and have it call the original function using the reference in new variable (_oldProcessValidators); surround the code that makes that call with your own logic

function extendAdfDhtmlPage() {
    AdfDhtmlPage.prototype._oldProcessValidators = AdfDhtmlPage.prototype._processValidators;
    AdfDhtmlPage.prototype._processValidators = function(x261,x262,x263) {
        var result = this._oldProcessValidators(x261,x262,x263);

        if(result == false) {
            // validation resulted in messages
            // we can do something with those messages
        }

        return result;
    }
}

The function that extends the AdfDhtmlPage object is called from a client listener that fires upon the onLoad event of the ADF Document:

 <af:document id="doc" >
    <af:clientListener method="extendAdfDhtmlPage" type="load" />

Of course we can also use this extension of the _processValidators method as a hook to add form level validations: client side validations that refer to multiple input components.

Credits

I worked with Robert on the investigation that led to these insights – so many credits go to him!