Altering the SugarCRM UI to highlight areas

Recently I have been looking at ways of highlighting certain feelings of information in SugarCRM. I use the community edition at work and have been working on a few modifications.

A recent task has been looking at highlighting some fields to a user if a certain field is activated, or showing a message to the user. There are two ways of doing this:

  1. highlighting a field in a different colour, and
  2. flashing a message on the screen

The first way, highlighted on the SugarCRM developer blog, is to change the field when it is active. This was suggested by Angel Magalafia‘s blog and was reposted by John Mertic. In essence, the post just adds a quick bi of styling to the data in the detail view. To do this, create a custom field in which ever module you like. The add the field to the edit and detail views in the admin section. This adds to the field to the module and allows you to view and edit it in the user interface.

To change the style, you need to add:
'customCode' => '<span style="color: red">{$fields.interest_c.value}</span>',
to the /custom/modules/<type of module – Custom/Accounts/Leads>/metadata/detailviewdefs.php file. To add it, open the file up and search for the relevant line in the array. Under label and name, add the customCode line then save it. Refresh your SugarCRM screen (you may need to click on “Save and Deploy” as discussed below) and, when the field has some data in it, the value will be shown in red. It is simple but could be very effective.

Yet sometimes you need to make something more visible to the user as it could be really easy to miss the marker. For example, you might want to show an AJAX message on screen load. The SugarCRM post had an example of doing this with a very simple addition using ajaxStatus which prints out a brief message on the top of a screen.The code itself is really rather simple (in the best way of doing somethings ):
// Display a message to the user before the action
ajaxStatus.showStatus('Message to display while doing the action');
ajaxStatus.hideStatus();

All you need to do is to place the code into your own Javascript files (and if you want to do something and then hide it, just add in some Javascript between the show and hide statuses, or you can add it to the detailviewdefs.php file as described above if you are only putting this on a single field. For example, a field may have some data which needs a proper message rather than just running an action and disappearing. In this case add it to view defs, otherwise place it in your own Javascript. If you do place it in the detailviewdefs.php file, you may need to go into the Admin section and into the detail view of the relevant module and click on “Save and Deploy” to redeploy the file and make the changes visible in the relevant view.

One thing that did get me (being a relative newby to Smarty templating) is that you want to make the field conditional, so that the message only shows if a condition is met, then there is another thing to be careful of in terms of putting inline Javascript in the template. Smarty uses { and } as delimiters for its tokens. If you want to use:
if (something == '1') {
ajaxStatus.showstatus('Print something');
}

then you need to replace the {} in the Javascript with {ldelim} and {rdelim} so the code becomes:
if (something == '1') {ldelim}
ajaxStatus.showstatus('Print something');
{rdelim}

Smarty swaps out the ldelim and redelim for {} automatically.

Of course, the resulting HTML needs some styling but that is a different matter to this post. This does two ways of drawing user attention to certain things. Personally I prefer the second way of using message flashing as it is harder to miss and is in the same vein as most sites.