One day we received the request: “Would it be possible to see the status of task via image?” In fact, the image is always better recognizable then the text. But, how can we show the image on the page layout?

There are 3 options in Salesforce.com

  • Create visualforce page which will be the copy of the page layout – complex and not easy to customise
  • Create visualforce only with the image and use it as embeded page on the page layout – easy, but it takes some space on page layout
  • Use formula field, which will show the image

We decided for the last option as it looks easy, so let’s try to implement it.

Firstly, we need some images that can be then uploaded into salesforce as documents.

Go to ‘Documents’ and click on NEW button. TIP: create folder for your images in order to manage them easier.

When the image is uploaded, click on ‘View File’ on detail page of image. You can now store url of the image – I recommend to use only part after ‘force.com’, so after refresh your sandbox your images can work.

Next step is to create formula field. Go to your object description in Setup and create new field with data type ‘Formula’ and return type ‘Text’.

We will use function IMAGE(image_url, alternate_text, height, width) for showing images. The parameters are:

  • Image_url – url address of the mage, you can also use external URL, but make sure that image will be available also in the future
  • Alternate_text – text which is shown, when image is not loaded
  • Height – height of the image
  • Width – width of the image

You can read ore details about function in salesforce documentation  https://help.salesforce.com/articleView?id=customize_functions_i_z.htm&type=0&language=en_US#IMAGE

It is good to use CASE(expression,​value1, result1, value2,​ result2,…,​ else_result) to decide which image should be shown.

  • Expression – expression for decision
  • Value1 – value of expression
  • Result1- result to show, if expression equals value 1
  • … – more results based on different values
  • Else_result – if no value match, then show else_result

You can read ore details about function in salesforce documentation  https://help.salesforce.com/articleView?id=customize_functions_a_h.htm&type=0&language=en_US#CASE

In your example, formula will look as follows:

CASE(TEXT(Status__c),

‘New’, IMAGE(‘/servlet/servlet.FileDownload?file=01519000000ZmqU’, ‘New’, 60, 329),

‘Cancelled’, IMAGE(‘/servlet/servlet.FileDownload?file=01519000000Zmqe’, ‘Cancelled’, 60, 146),

‘Complete’, IMAGE(‘/servlet/servlet.FileDownload?file=01519000000Zmqj’, ‘Complete’, 60, 146),  

”)

TIP: be careful with deployment, in production your images can have different URL, so do not forget to update formula with new URLs of documents.