Consider this image below.
The screen shows the Key Attributes tab in the company context for a customised system. The screen shows a series of check boxes in the different categories used within the system.
A customer had a requirement for their staff to have a strong visual pointer for those checkbox fields that had been selected as shown below.
Note: Within the screen the checkboxes are visually represented by image files rather than standard HTML checkboxes.
The Key Attributes screen does not have a Custom Content box or an obvious way of allowing the screen to be controlled by JavaScript.
The change was made by using the custom script library feature of Sage CRM that allows a script file added to the custom folder to be automatically included in the screen.
My system had an install name of CRMTraining and consequently the path to the folder was
C:\Program Files (x86)\Sage\CRM\CRMTraining\WWWRoot\js\custom
The script needed to execute automatically when the page loaded. It needed to check whether this was the Key Attribute screen before it attempted any changes to the display of the fields.
Below is the script used.
[code language="javascript"]
crm.ready(function () {
var queryVariables = crm.getArgs()
if (queryVariables.Act == 1272)
{
var jTags = $("img[src*='FilledCheck.gif']");
jTags.each(function () {
$(this).css('border', "solid 2px red");
})
}
})
[/code]
This was edited within Visual Studio.
The code example mixed the client side API with JQuery. The JQuery has simplified the search for the image files that represent the filled check boxes. Once the image tags were found it was just a question of then adding styling to them for the desired effect.