CiviCRM Community Forums (archive)

So I got inspired by the work of idea15
who added colour-coded custom data via wordpress admin using Jquery
http://idea15.wordpress.com/2014/08/26/how-to-colour-code-data-inputs-in-the-wordpress-admin-interface/

I had a client who asked for similar - but only needed it for the Contact summary page -
So decided to try and pull the idea15 approach into an extension.
I am just learning much of this,  - so maybe you civicrm folks have better ideas than mine - very happy for feedback, but maybe what follows could help someone..


The hook i used was just
http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_summary

SO I first created the basics of the extension the normal way by following -
http://wiki.civicrm.org/confluence/display/CRMDOC/Create+a+Module+Extension

then in the PHP file I just pointed to the above hook and an as yet not created colours.js file by adding the code:
function extensionname_civicrm_summary( $contactID, &$content, &$contentPlacement ) { 
{
CRM_Core_Resources::singleton()->addScriptFile('org.test.extensionname', 'colours.js');
}
You will have to rename 'extensionname' and 'org.test.extensionname' to your extension..

Then i created colours.js and saved it in the same extensions folder.. In it - i plonked the jquery -

cj(function ($) {
  'use strict';
  // Variables declared here will be globally available within this closure


//The following changes the colour of the External ID label - this uses the inline css method
  $("div.crm-label:contains(External ID)").css({"background-color": "yellow", "font-weight": "bold"})
   
//The following changes the background colours of the custom fields - if refers to the custom css classes you can find in plugins / files / civicrm / custom_css

  $("div.crm-custom-data:contains(Heavy Metal)").addClass('metal');
  $("div.crm-custom-data:contains(Industrial)").addClass('industrial');
  $("div.crm-custom-data:contains(Reggae)").addClass('reggae');
 
   
}
 
To explain - the three options "Heavy Metal / Industrial / Reggae" are in a custom field "Music taste" drop down menu that is set to display one option at a time on the contact summary page inline.

the bit that says ("div.crm-custom-data:contains(Heavy Metal)") just means if you see the word "Heavy Metal" as custom data - then apply this css class

So above there are two ways to pull css colours - Idea15 used css classes first created in a custom CSS file - dropped into a folder (you will have to create if not there) like 'custom_css'  - and then you need point to the right file at System Settings / Resource URLs.  This approach is probably best if you want to use the same class on different pages and forms etc

The example of my custom css looked like this:
/* The following classes change the background colour - for membership status */

.metal {
color: #000000 !important;
background-color: #FF3399 !important;
padding: 3px;
}

.industrial {
color: #000000 !important;
background-color: #00CCFF !important;
padding: 3px;
}

.reggae {
color: #000000 !important;
background-color: #FF9900 !important;
padding: 3px;
}
The other way to do it is shown by the line
$("div.crm-label:contains(External ID)").css({"background-color": "yellow", "font-weight": "bold"})

This just uses the .css jquery to add css right there in the code ..
if you do it this way its probably faster - the quick an dirty way - and you wont need a custom css file at all.
so if you want to do the same thing to the custom fields it would be something like -
$("div.crm-custom-data:contains(Heavy Metal)").css({"background-color": "red"})

The other thing to note is the two different selectors i used -
("div.crm-label:contains(External ID)") - works for labels on the summary page,
while
$("div.crm-custom-data:contains(Heavy Metal)")
works for the custom data

You can just change the words in the brackets to match your custom data or labels (titles)

There are endless ways to select the area you want to colour - My way is the same as idea15 - which is pretty lose - if i have say 'Heavy Metal' anywhere else on the summary page - say in a note - then it will change the colour of that too.

You can find heaps of selectors here;
http://www.w3schools.com/jquery/trysel.asp

Anyway - maybe there is a much easier way than this - but i like the extension format so i can turn it on and off quickly. As i said feedback welcome..

Hey Scrubba - that is really cool work - you might want to write a blog post out of that since I think it deserves a bit more attention and it could be inspiring for others who want to do something similar / take your worth further - people who don't necessarily look in the forums.

Michael