Phone Formatting in Editable SData Grids in Infor CRM

In the 8.4 Infor CRM web client, if you add a phone number column to an SData grid it does not handle formatting phones that contain extensions. Phones that are just 10 digits format fine as (nnn) nnn-nnnn but if you add a phone value like “6515554444×123” that value does not show formatted but instead shows the data as-is, 6515554444×123. This behavior can be overriden by extending the phone column widget.

The first thing you will want to do is to get the Custom Loader module. It makes extending widgets so much easier.

Then you will want to add a new sub folder under the portal manager in Slxclient/support files/custom/modules. I would recommend something like “PhoneColumnFormatter”. Inside this you will add a single file called main.js.

In the main.js we will add a function to extend the Sage/UI/Controls/GridParts/Columns/Phone widget and replace its format function with one of our own using dojo’s lang library. The code looks like the following:

//Formats phone column
require([
    'dojo/_base/lang',
    'Sage/UI/Controls/GridParts/Columns/Phone'
], function (
    lang,
    phone    
) {
    lang.extend(phone, {
        format: function (val, data) {
             
            var number = val;
			if(number) {
				number = number.replace('(', '').replace(')', '').replace(/-/g, '').replace(/\s/g, '');
				if (number.length<10) {
					//do nothing as it is less than 10 characters
				}
				else if (number.includes('x') || number.includes('X') || number.length==10) {
					var areacode = number.substring(0, 3);
					var prefix = number.substring(3, 6);
					var suffix = number.substring(6, 10);
					var extra = (number.length === 10 ? '' : number.substring(10));
  
					number = '(' + areacode + ') ' + prefix + '-' + suffix;
					if (extra) number += ' ';
					number += extra;
				}
				else {
					//do nothing as it does not contain an extension
				}
				return '<a href="tel:' + val + '">' + number + '</a>';
			}
			else
				return val;
        }
         
    });
});