Tuesday, August 7, 2012

SugarCRM Customization: Utilizing Custom JavaScript

SugarCRM, being a web application, naturally prompts some users to ask whether it is possible to apply customizations to the system which in turn mimic behavior they may have seen on a random web site in the course of their general web browsing. A good example would be formatting numbers entered into the phone number fields in SugarCRM, similar to the manner in which many web sites handle that type of data on a contact form.

By default, SugarCRM does not format the value one enters into any of the phone fields. For example, if one enters the value of 310.555.1212 into the Office Phone field on a contact record, it remains as such. But some users would prefer the number to be formatted, such as (310) 555-1212, or other pattern. This need gave rise to the phone formatter module that I released some years ago and made available via More importantly, it highlights the manner in which a little JavaScript code embedded within SugarCRM can be used to enrich the user experience. 

A number of other enhancements can be applied by means of custom JavaScript code, but we must first understand the manner in which it should be embedded.

Lets dissect some of the files that make up the phone formatter module to get a clearer understanding of the process one can follow to apply custom JavaScript in an upgrade-safe manner.

If you have not already done so, download the phone formatter module from We will not be installing the module, just examining some files. Thus, simply download the most current version of the module and do not concern yourself with the version of SugarCRM you are using.