To Change Font color for standard Case fields depending on picklist value

Question

I want to change the color of the Standard field of a Case object say CaseNumber. It is a mandatory field for the object. The criteria for this is that whenever a Case Status value is changed, that is whenever picklist value for Status is changed from New to Working or in Progress. The Case Number needed to given in Blue or Red. Case number value should be changed to Different and NOT the case number label.

Is this possible ? I have explored about conditional colouring and formatting. Also tried using jQuery under Home page custom components to make this possible. Have anyone come across this situation . need help ! TIA

Answer 1

You won't be able to do this exactly as you describe without overriding your standard layout with a Visualforce page. But there are some alternatives that will provide a visual indicator of the status without having to completely override the page.

First, you can use a formula field with a CASE() function that displays a different image depending on the picklist value. You can put the formula field above, below or next to the CaseNumber field so they are near each other. The formula will look something like this:

IMAGE( 
  CASE(
    Status, 
    "New", "/path/to/image/file",
    "Closed", "/path/to/image/file",
    "Escalated", "/path/to/image/file", 
    "/path/to/image/file"), /* default */
  "Status"
)

Here are some links for more information about images in formulas:

• Sample Image Link Formulas
• IMAGE() function
• Salesforce Labs Graphics Pack contains lots of icons to use

Option two would be to create a Visualforce page with the Case standard controller, that sets the background color of a div based on the Status field value. There doesn't have to be anything in the div, though you could display the CaseNumber value in a contrasting color. Then add a single-column section with no header at the top of your page layout, and add the VF page to that section, setting the height to 20-30 pixels. You'll end up with a colored bar along the top of your page which will convey the status.

The Visualforce would look something like this:

<apex:page standardController="Case" showHeader="false" standardStylesheets="false" sidebar="false">
    <div style="background: {! CASE(Case.Status, 'New', '#f00', 'Closed', '#0f0', '00f') }; text-align: center;">
        <apex:outputField value="{!Case.CaseNumber}" />
    </div>
</apex:page>

Answer 2

You need to build a custom VF page for this type of customization. You're not going to be able to conditionally format that standard field using the normal UI.

Answer 3

Here is what I did on a VF page where inline edit was enabled. Field took on values of 'Red', Yellow', or 'Green' and I wanted to colorize it. jQuery structured to make it easy to colorize many fields over time. Solution is somewhat fragile as it depends on SFDC conventions for inline edit component ids.

You can adapt as needed

VF component being colorized:

<apex:outputField id="myRedYellowGreen" value="{!Foo__c.RedYellowGreen__c}" />

JQuery

    $j = jQuery.noConflict();       //  reassign $ to $j to avoid conflict with VF
    $j(function() {                 //  jQuery shorthand for $(document).ready(function() ..  Wait until page loads 
        //  define the application
        var MyFoo   = {};

        (function(app) {            //  Define anon function                
            //  --------------------------
            //  init:   do initializations
            //  --------------------------
            app.init    = function() {
                app.styleInlineEditFields();    
            };

            //  -----------------------------------
            //  styleInlineEditFields : SFDC style doesn't work on inlineEdit outputFields so we have to find the DOM and do it ourselves
            //  -----------------------------------
            app.styleInlineEditFields = function() {
                $j('span[id$="myRedYellowGreen_ileinner"]').css(
                    {'color'    : app.getCssRiskColor(
                                   {!"'" & Foo__c.RedYellowGreen__c & "'"})
                    });
            }
            //  -----------------------------------
            //  getCssRiskColor : based on a RYG field value, return the CSS color
            //  -----------------------------------
            app.getCssRiskColor = function(sfdcVal) {
                var res = 'black';
                switch(sfdcVal) {
                    case 'Red'      : res = 'red';          break;
                    case 'Yellow'   : res = 'GoldenRod';    break;
                    case 'Green'    : res = 'green';        break;
                }
                return res;
            }

            app.init();             // Anon function invokes its own init function
        }) (MyFoo);     // Execute anon function passing in an object representing our application


    }); 
</script>