SugarCRM Customization: Custom Blur Event

One of the ideas that I regularly try to convey when talking about the customization capabilities of the Sugar 7 framework relates to leveraging JavaScript wherever possible. This is especially true for projects where our objective is to upgrade heavily customized versions of Sugar up to version 7.x.

In the pre-7.x world, some customizations that can now be implemented natively via the Sugar 7.x framework used to require the use of SugarLogic functionality or inclusion of third party JavaScript libraries. The case of SugarLogic can be particularly problematic if one utilizes a large number of such customizations, as it might imply the execution of additional server side code. The greater the number of these type of customizations and the greater the potential to introduce performance problems. This is also true for logic hooks. For example, a hook that automatically converts the last name field to upper case upon a record being saved.

If we step back and analyze these customizations, we would likely find that some could be implemented via JavaScript. Doing so would in turn offload some of the server load to the client -- likely helping correct performance problems. The latter example of the logic hook upper casing the last name field is a good case in point. 

Suppose we wanted to convert such a customization to implement it through JavaScript instead of using a logic hook. How would we do that? 

The general idea would be to use a standard onBlur() event, tied to the last_name field of a module such as Contacts and then automatically updating the content of that same field when focus is lost.

As it turns out, the Sugar 7.x framework makes this a very easy task. The code for making such a customization is found below:

	({
	/* Author: Angel Magaña -- cheleguanaco@cheleguanaco.com
	* File: ./custom/modules/<Module>/clients/base/views/record/record.js
	*
	* Custom RecordView controller for automatically converting
	* last_name value to upper when focus is lost
	*/
	extendsFrom:'RecordView',
	initialize: function(options){
	this._super('initialize', [options]);
	//Add event that listens for blur event on last_name field
	this.events['blur input[name=last_name]'] = 'doUpperLast';
	},
	doUpperLast: function(){
	//Get current value of last_name
	var sLast = this.model.get('last_name');
	//Convert last_name value to upper if not empty
	if (!_.isEmpty(sLast))
	{
	this.model.set('last_name', sLast.toUpperCase());
	}
	},
	})

view raw record.js hosted with ❤ by GitHub

I hope you find it helpful!