Monday, February 23, 2015

Display Images based on field value in Salesforce

It's very common requirement to display images for a specific field value in a record, as pictorial representation will be more conveying than text.

For example, to display Status of a record pictorially, lets have some rule as
  • If status Open - display Green image
  • If status Planning - display Amber image
  • If status Closed - display Red image

To implement this requirement in Salesforce, we have to store images in Salesforce , either in Documents or Static Resources and then, using Formula Field in the object, by comparing data of the actual field, we will set Image  relative path of the stored images

Lets do step by step as shown as below

Step 1 : Create images with the 3 colors as required and zip them.


Step 2: Add this zip file to the static resources and set the access of it as public
To do this , follow below steps
  1.  Login to salesforce environment and Go to Setup
  2. Under Build, select 'Develop' and then 'Static Resources
  3. Click on New and fill in the required information by uploading the Zipped file
  4. select Cache Control 'Public' and save



Step 3: Open the Object in which we need to set the images and create a Choice field to select Status and then a new Formula field to set image according to the data of the created Choice Field
To do this, follow below steps
  1. Go to Setup
  2. Under Build, Select 'Create' and then 'Objects'
  3. List of all objects displayed. Click the object in which we need to create these fields
  4. Go to Custom Fields section and click 'New'
  5. Choose 'Picklist' for Data type and provide required information as below

  6. Save it and then in similar way click on 'New' in Custom Fields section and for Data type, choose 'Formula'
  7. Provide Field name and label, then select Return type as 'Text'
  8. Now, under 'Advanced Formula' section, write formula as below
     IMAGE(CASE( Status__c ,  
     'Open', '/resource/status/green.png',  
     'Closed', '/resource/status/red.png',  
     'Planning', '/resource/status/yellow.png',  
     ''), "rating")  
    

  9. And, for Blank Field Handling, select Treat blank fields as blanks'
  10. Provide the required access and also add it into the layouts

Step 4: Now, add this formula field in detail screen layout and also View if required.
Once you add it into the layout, you can see the same in detailed screen of a record. Also, if you add these fields in a View, it will be displayed as in below image


No comments:

Post a Comment