How would you go about changing the font color of a caption in CRM?

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

How would you go about changing the font color of a caption in CRM?

  • Comments 5
  • Likes

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.

I am using Sage CRM 7.3 sp3 for this example but everything in this article applies for Sage CRM 7.2 onwards.

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>

Comments
  • What if you need to change the font for all the fields on Screen in CRM 7?

  • Parisa

    What version of Sage CRM are you using?  Are you using cloud or on-premise?

  • i have tried the above script on the top content of the company screen but it doesnt change the field color, the field in the summary does change though, do you have a workaround for this

  • Darren

    I've updated the article to include the information you wanted.

  • Thanks for the script, Jeff. It will soon come pretty handy for me. For now, I'll just bookmark this for future reference. Great job.