Colouring fields using Studio in SugarCRM

sugarcrmdevelopers —  March 7, 2012

So you’ve used SugarCRM for a while and you’re wanting to colour certain fields – maybe to highlight individual pieces of information that you want emphasise on the screen but you’ve been able to do so without modifying the CSS behind the scenes? Maybe you can do this via a module but you don’t want to do that either?

No problem. It’s as easy as peas.

– Firstly, log in as an Admin into Sugar.
– Secondly, browse to Studio

Add your new HTML field and configure the control, modifying the settings

Add the code for the control you want to adjust – in this case we’re colouring the background of the contact’s ‘last name’

This works via JavaScript and you’re directly controlling each HTML cell/row by getting its ID. You’ll need to browse the live source code of the page to get the correct ID’s for each individual item you want to control. To do this, I suggest using Firefox and Firebug and viewing individual items accordingly.

Click Update to save that HTML. Click Save at the top.

Now you’ll need to add this to the layout. We’re going to add this to the DetailView.

Drag and drop a new row. Drag the new field you created onto the new row.

Click Save & Deploy.

Browse to your new page.

You should see your changes – much like what we’ve prepared here.