Displaying Images in Formula Fields in Salesforce

Using Images in Formula Fields in Salesforce

Salesforce is leading the CRM charts and this comes as no surprise considering its vast varieties of customization options available. Moreover, Salesforce is easy to understand and use.
Showing images in place of text always help to convey the right and information quickly to the user. In this post, I will explain step-by-step how you can display images in salesforce lightning based on Formula fields.

Why Use Images in Formula fields in Salesforce?

Images are easier to understand in comparison to values. Also, there is a simple option available in Salesforce which enables the user in utilizing images in Formula fields for a better presentation.

There is an option available thereby making it easier for thinking of multiple use cases in your business for showing images in the places of text.

The images are present on the basis of a series of conditions.

  • Grading on education systems by displaying different images for different grades.
  • Displaying the current state of Opportunity using images or stickers.
  • Rating images with 1 to 5 stars for rating the Lead etc.
  • Colour images to highlight important information.

Steps to Achieve:

The images can be displayed in the Formula fields using the following formula, The different attributes of the above code are:

IMAGE(image URLalternate textheightwidth)

The explanation of the formula is as follows:

  •  Image URL is the ID or URL of the image you want to display
  •  Alternate Text is similar to alt-texts in websites. In other words, it is the text which appears when the image is not loading or it is even useful for screen readers.
  •  Height and Width are the vertical and horizontal size of the image in pixels.

Salesforce developers will be able to help you with advanced features like making use of the If and Case statements to display different images as per the condition.

For Example:

1. Opportunity Size:

Classifying Opportunities on the basis of Size as High, Medium or Low. Depending on the industry, you can pick appropriate images. In this, since this application was for logistics users, we chose to create an image on the basis of containers.

The above one is achieved by the following formula,

IF(Chargeable_Weight__c == 0 , 'RFQ', IF(Chargeable_Weight__c <= 499, IMAGE("/resource/LowValue","",36,36)+"Low", 
IF(Chargeable_Weight__c <= 2999,IMAGE("/resource/MediumValue" , "",36,36)+"Medium", 
IF(Chargeable_Weight__c \<=99999,
IMAGE("/resource/HighValue" , "",36,36) + " High”, ‘Priority'))))

So, in this case,  either one row (Low), 2 rows (medium) or 3 rows (High) of containers are displayed for the users and managers to get a quick idea about the size of the opportunity.

2. Enquiry Status Indicator:

enquire status indicator- formula fields in salesforce
Enquiry Status indicators

To define the status of the Enquiry as Active, Expired, Expiring shortly and Not Actionable. This Indicator defines the status of the Enquiry as ACTIVE, EXPIRED, EXPIRING SHORTLY and NOT ACTIONABLE.

The user can call the images from available salesforce default image URLs. Else, you can insert the images in Documents, Files or Static resources. Consequently, once you do that, you can use the images on the Formulas.

Images From Documents:

The Documents tab is available only on the Classic Experience wherein, its found under the All Tabs menu. Here, uploading an image is done by clicking ‘New’. Consequently, the Document ID takes the place of the Image URL in the Formula.

Steps for obtaining the Document ID is as follows:

  1. Open the Document tab.
  2. Navigate to the Documents Folder.
  3. Select ‘View’ next to the respective document.
  4. In this document, copy the string after ‘force.com’. It looks like this:
    '/servlet/servlet.FileDownload?file=0157F000001XTFG'

    or you can copy the whole URL.

Images From Files:

Similar to Documents, you can upload your image on the Files tab and use its URL on the Formula as well.

Steps for obtaining the Files URL is as follows:

  1. Open Files tab
  2. Open the respective file
  3. Right click on the image and Copy Image Address
  4.  It looks like this:
    'https://c.ap5.content.force.com/sfc/servlet.shepherd/version/renditionDownload?
    rendition=ORIGINAL_Png&versionId=0687F00000FZCTP&operationContext=CHATTER& 
    contentId=05T7F00000pMscC'

Images from Static Resources:

This is the simplest form in comparison to Documents and Files, the reason being, you do not require finding the ID or URL. You only require providing the name of the resource in place of the Image URL and as the prefix, use, ‘/resource’.

The steps for obtaining this is

  1. From Setup, look for and navigate to Static Resources.
  2. Upload your images with a name by selecting New.

For Example, say your resource’s name is ‘TestRes’. Then the Formula will be:

IMAGE(“/resource/TestRes”, “Resource”, 24, 24).

As you can see, the ability to add images to Formula fields in Salesforce helps greatly in increasing the user-friendliness of the Salesforce.com UIs. This brings the required information the users’ immediate attention.

Do share your comments. Keep following this blog for more interesting and useful salesforce.com related articles.
In case of questions or any requirements, you can reach out to us at http://bestirtech.com/contactus.

Leave a Reply

Your email address will not be published. Required fields are marked *