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 15
  • 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.

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.

The example can be pasted into the custom content box of OpportunityDetailBox screen.

//grab the fields
var mydescription = crm("oppo_description")
var mysource = crm("oppo_source")
var mytype = crm("oppo_type")
//set the description style
//set the source style
//set the caption style
var mytypeCaption = mytype.caption()

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

myx = $( "td[class*='TOPCAPTION']:contains('Company')" );
myx.css('background', 'blue');

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.

myx = $( "span[class*='TOPCAPTION']:contains('Account')" );
myx.css('background', 'blue');

  • 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.

  • This option for font is great :)

  • Hi Jeff,

    I don't seem to get mine to work, I have put the Account Manager field in the top content and in the CompanyBoxLong I have put in the following and it doesn't see to work.

  • My post seemed to strip out the example I put in, basically I took your example above and replaced 'company' with 'account' and 'blue' with 'orange'

  • Bultark

    I've just updated the article to explain the slight difference in the way CompanyTopContent fields are added to the screen.

  • Hi Jeff

    That's perfect thanks.

  • Jeff:  Is it possible to change how a workflow rule displays on the screen (font, color, bold?)?  I would like the transition rule to stand out over the global rules.  The next true step in my workflow is the transition rule - Submitted.  All the remaining rules on the workflow are Global and are not required to move the workflow forward.  I would like to make Submitted standout from the rest other than just placing it first.  At the present time, I cannot think of how I can do this.  Thanks!

  • Jeff:  Sorry..I got this.  Just a temporary brain block.  :-)

    Based on the theory of what you were doing above (using custom content), I added this to the custom content area of my screen.

  • Hi Michele,

    I have been trying to get my head around different font colours for the workflow actions. How did you end up executing this?

    Cheers Stephen  

  • Hello

    The HTML of a  workflow button looks like this

    <a class="WFBUTTON" href="/crm/eware.dll/Do?SID=197769144822897&Act=400&Mode=1&CLk=T&Key-1=4&Key0=7&Key1=56&Key2=1662&Key7=65&Key27=51&Key50=1351&trid=310&I=&HNA=260&E=Opportunity" id="Button_Qualify">Qualify</a>

    You can identify a button by the class 'WFBUTTON' and the individual workflow state by its id 'Button_Qualify'.

  • Thanks used the Button id to change the font color -

    document.getElementById("Button_Withdraw").style.color = "#993333";