Extending the Infor CRM (formerly Saleslogix) Web Client Email Control for Better Validation

By default the email control in the Infor CRM web client has very basic, I would argue, insufficient validation of the email that a user inputs.  The standard validation simply checks for a string like *@*, where the * can be anything except a < or space.  That leaves a lot of room for bad data.

Lets take a look at how to fix this.  We are going to be extending the control.  The nice thing about doing this is that it will automatically take affect for any email control in the web client, regardless of what screen the field exists on.  There are a couple of steps to doing this.  I am going to skip some of the details, but this should give you a good step by step for those who know their way around the Application Architect.

Step 1

Add a new folder within the jscript folder.  This is to contain the javascript files we will use to extend the control.  I would recommend naming it something like your company name.  I will call mine CFX.

Step 2

Inside this folder we need to create a new main.js javascript file. in here we wire up the main initialization of our custom control extension. here is the code for that:

define([
    'CFX/CustomControlsModule',
],
    function (CustomControlsModule) {
    var customControlsModule = new CustomControlsModule();
    customControlsModule.initailize();
});

Make note you need to be consistent with the prefix you are adding in these js files. In mine I am prefixing as CFX.

Step 3

Inside the same folder, add another js file called CustomControlsModule.js. This is where we are actually going to extend the base email control. We need to pass in the Email control. Remember again to consistently prefix your stuff, as I have done with CFX. Here is the code:

define('CFX/CustomControlsModule', [
        'dojo/_base/declare',
        'dojo/ready',
        'dojo/aspect',
        'dojo/_base/lang',
        'Sage/UI/Controls/Email'
],
function (declare,
            ready,
            aspect,
            lang,
            email
        ) {
    var customControlsModule = declare('CFX.CustomControlsModule', null, {
        initailize: function () {
            lang.extend(Sage.UI.Controls.Email, {                
                regExpGen: function () {                                                          
                    var validationString = "^([\\w\\.\\-_']+)?\\w+@[\\w-_]+(\\.\\w+){1,}$";
                    return validationString;
                }
            });
        }
    });
    return customControlsModule;
});

The standard email control has a regExpGen property that we are replacing with our version when the custom extension is initialized. You can see the standard unminified version of the Email control’s js file in Jscript/Sage/UI/Controls/Email.js. you cant modify this directly, hence our extension of it. The property contains a function that returns a Regex expression.
The standard looks like this:

var validationString = "[^< ]+@[^< ]+\\.+.[^< ]*?";

Ours looks like

validationString = "^([\\w\\.\\-_']+)?\\w+@[\\w-_]+(\\.\\w+){1,}$";

One thing to note is that the escape character within the normal regex string needs to be escaped again (i.e.. \\).

Step 4
The last step is to wire up the web client to actually use our new spiffy javascript. We do this by modifying the base.master file. This master file is used by all the pages in the web client and is where all of the javascript files actually get wired up. We need to look for 2 spots to update.

Search for “var dojoConfig = {“. You will see this contains a paths property that will look like:

paths: { 'Sage': '../../../jscript/Sage'},

We need to change this to also add the path to our new folder (in my case CFX):

paths: { 'Sage': '../../../jscript/Sage', 'CFX': '../../../jscript/CFX'},

Lastly we need to invoke our main.js which is the entry point to our custom stuff. Again, search for an area in the code that looks like:

<script type="text/javascript">
        require([
            "dojo/_base/html",

There are a whole bunch of items in this list. At the very end we need to add one more, ours. Type this after the last require statement:

,"CFX/main"

That is all there is to it. Redeploy the web client and take a look. Your email validations should be much more robust now.