How would you go about changing the font color of a caption or field in Sage CRM?
Below is a screen shot from my own system. This is the system that I use for testing ideas and proving concepts. The system has been integrated with a Sage BMS and the image below shows a customised opportunity summary screen.
You can see that I have changed the oppo_description, oppo_source, and oppo_type fields. The changes to the display of the fields can be made to apply when the screen is in Edit mode.
Note: You can of course decide exactly when the style changes apply - I only want to make the point that you can do what you want.
The code below demonstrates how the Client Side API allows the style to be changed. These methods are all described in the documentation which you can find on the Help Center. http://help.sagecrm.com/js-api/
The example can be pasted into the custom content box of OpportunityDetailBox screen.
<script>
crm.ready(function(){
//grab the fields
var mydescription = crm("oppo_description")
var mysource = crm("oppo_source")
var mytype = crm("oppo_type")
//set the description style
mydescription.bold()
mydescription.italic()
mydescription.underline()
//set the source style
mysource.background("red")
mysource.color("white")
//set the caption style
var mytypeCaption = mytype.caption()
mytypeCaption.background("red")
mytypeCaption.color("white")
})
</script>
The job of the API is to make things as straight forward as possible for a developer and I think these methods allow pretty cool style changes to be made very simply.
Handling fields in the TopContent area.
The fields in the Top Content area are not tagged as fields in the same way they are in the main area of the screen.
But they are marked in a way that you can find them. The screen shot above shows that I have opened up the developer tools in Chrome and I am inspecting the HTML. You can see that the caption is a 'td' with a class 'TOPCAPTION'.
We can find this using either plain old javascript or JQuery.
For example you can use JQuery like
myx = $( "td[class*='TOPCAPTION']:contains('Company')" );
myx.css('background', 'blue');
If added to the custom content box of the CompanyBoxLong then this would be
<script>
crm.ready(function()
{
myx = $( "td[class*='TOPCAPTION']:contains('Company')" );
myx.css('background', 'blue');
})
</script>
TopContent Fields added using the TopContent Screens.
Additional fields can be added to the TopContent area using the various TopContent Screens e.g.
- Company - CompanyTopContent
- Person - PersonTopContent
- Opportunity - OpportunityTopContent
- Case - CaseTopContent
If a field is added to the TopContent using one of these screens then the field is added to the HTML is a different way.
The caption and data of the default fields (e.g. Company Name/comp_name) are added as a TD.
<td align="RIGHT" width="100" class="TOPCAPTION" style='background: blue;'>Company: <span class='TOPHEADING'></span></td>
The caption and data of the additional TopContent fields (e.g. Account Manager/comp_primaryuserid) are added as a SPAN.
<span id="_Capt_TopContentcomp_primaryuserid" class="TOPCAPTION">Account Manager:</span>
This means that you need to change the code slightly.
<script>
crm.ready(function()
{
myx = $( "span[class*='TOPCAPTION']:contains('Account')" );
myx.css('background', 'blue');
})
</script>