Boost your week
Salesforce How ToSalesforce News

How to: Use images in ‘formula’ fields

1 Comment38.9k

Salesforce’s most attractive features are those with the ability to customize anything and everything. Companies are always trying to get the most of Salesforce, and the ability to add images to Salesforce formula fields is one of the most used features.  This essentially means instead of output a string of text or calculating a number, this formula provides you with a series of images depending on the scenario.

Create a formula field that displays the image

Have you ever seen records with fancy images displaying different values?  Where the image is displayed on records, with a purpose to provide better look and understanding on the record. Have you ever wonder how this is done? We are providing you with a simple tutorial where you will get the skill on how to do this.

formula image

Source: Stack Exchange

This tutorial will be split into two parts one for Salesforce Lightning and one for Salesforce Classic.

Salesforce Lightning

Step 1: Install the Graphics Pack 

Using the following link, install the Graphics Pack from Salesforce Labs. This will give you access to pages and pages of icons. If you or your company have already installed, Go to Step 4.

  1. Go to AppExchange.
  2. In the search bar write Graphics Pack.
  3. Press the green button ‘Get It Now’  on the right side.
  4. Log in to your org.
  5. Choose a user, that you want this package to be installed.
Step 2: Create a public library
Don’t want to use the images from Salesforce Labs? Then you can upload your own. For this purpose follow Step 2 to Step 4.
  1. Navigate to “Files” by typing “Files” in the App Launcher and clicking the result.
  2. Click Libraries on the left-hand panel.
  3. Click the “New Library” button.
  4. Enter the library name (for example, “Public Images”).
Step 3: Upload your image file to your library
  1. Click the library that you just created.
  2. Click Add Files.
  3. From the select files dialog box, select the library you created in step 1.
  4. Click Done once the file has finished uploading.
Step 4: Repeat Step 3

When you repeat step 3 a couple of times you are adding all the images that you want to add in that specific library that you have created in Step 2.

Step 5: Create a new “Text” type Formula Field
  1. Go to Setup | Objects and Fields | Object Manager — Select the Object you are going to customize (Accounts, Case, Opportunity).
  2. Click Fields & Relationships.
  3. Click New.
  4. Select Formula.
  5. Click Next.
  6. Enter your custom field name, then select Text from the “Type” picklist.
  7. Click Next.
  8. In the “Enter Formula” screen, click Advanced Formula.
Step 6: Obtain the URL to the files you uploaded
  1. Go back to Files.
  2. Select the library you created in step 1.
  3. Click the image to preview it.
  4. Right-click the image and click “Copy image address.”
  5. Save the image address temporarily so that you don’t lose it.
  6. The image_url should look something like this: 
    /sfc/servlet.shepherd/version/renditionDownload? rendition=ORIGINAL_Jpg&versionId=06846000002mPro&operationContent=CHATTER&contentId=05T46000009hQHt/image.jpg
  7. You may also use an abbreviated format for the image URL: 
    /sfc/servlet.shepherd/version/download/06846000002mPro
  8. Notice that the abbreviated format uses the versionId from the first format, and the image name does not appear anywhere in the URL.
Step 7: Enter your image URL into your Formula Field using the “IMAGE” function
  1. In the text area, enter your formula using IMAGE to retrieve the image file you uploaded in step 2.
  2. Paste the image URL into the ‘image_url’ portion of the IMAGE function.
TIP
Don’t include the Salesforce domain (“https://www.salesforce.com”) in your URL. URLs must be enclosed in double-quotes, for example: “/sfc/servlet.shepherd/version/download/0687000000dz7Ex”
Step 8: Repeat step 5 and step 6
Repeating this steps will help you add all image URLs to the Formula field.for until each of your image URLs have been added to the Formula Field, then click Next.
Step 9: Grant Field-Level Security

Grant the appropriate Field-Level Security to your Formula Field, then click Next.

Step 10. Include the Formula Field
After you are done with all previous steps you need to add/include the formula field to all relevant page-layouts, then click Save.

Salesforce Classic UI

Step 1: Install the Graphics Pack 

Using the following link, install the Graphics Pack from Salesforce Labs. This will give you access to pages and pages of icons. If you or your company have already installed, Go to Step 4.

  1. Go to AppExchange.
  2. In the search bar write Graphics Pack.
  3. Press the green button ‘Get It Now’  on the right side.
  4. Log in to your org.
  5. Choose a user, that you want this package to be installed.
Step 2: Create a public folder to hold your image files
  1. Click the Documents tab.
  2. Click Create New Folder.
  3. Enter the folder name (for example, “Public Images”).
  4. Give users “Read-Only” access to the folder and make it accessible to all users.
Step 3. Upload your image file to your Documents storage area
  1. Click the Documents tab.
  2. Click New.
  3. Enter the document name to be displayed on the browser.
  4. From the “Folder” picklist, select the folder you created in step 1.
  5. Click Browse to look for and select the file to upload.
  6. Click Save.
Step 4: Repeat Step 3

When you repeat Step 3 a couple of times you are adding all the images that you want to add in that specific library that you have created in Step 2.

Step 5: Create a new “Text” type Formula Field
  1. Go to Setup | Customize | <Object> — Select the object you are going to customize (Accounts, Case, Opportunity).
  2. Click Fields.
  3. Under “Custom Fields,” click New.
  4. Select Formula.
  5. Click Next.
  6. Enter your custom field name, then select Text from the “Type” picklist.
  7. Click Next.
  8. In the “Enter Formula” screen, click Advanced Formula.
Step 6. Obtain the URL to the files you uploaded
  1. Click the Documents tab.
  2. From the “Folder” picklist, select the folder you created in step 1.
  3. Click Go.
  4. Click View next to the name of the file you want to use. A new browser window or browser tab open.
  5. In the browser’s address bar, select and copy the URL.
Step 7: Enter your image URL into your Formula Field using the “IMAGE” function
  1. In the text area, enter your formula using IMAGE to retrieve the image file you uploaded in step 3.
  2. Paste the image URL into the ‘image_url’ portion of the IMAGE function.
TIP
Don’t include the Salesforce domain (“https://www.salesforce.com”) in your URL. URLs must be enclosed in double-quotes, for example:/servlet/servlet.FileDownload?file=01570000000Q6El”
Step 8: Repeat step 5 and step 6
Repeating this steps will help you add all image URLs to the Formula field.for until each of your image URLs have been added to the Formula Field, then click Next.
Step 9: Grant Field-Level Security

Grant the appropriate Field-Level Security to your Formula Field, then click Next.

Step 10. Include the Formula Field
After you are done with all previous steps you need to add/include the formula field to all relevant Page Layouts, then click Save.

 

TIP
When adding this formula field to a Compact Layout, the field value will return as a section of your formula code instead of having the image render properly

(This behavior can be seen in both Salesforce Classic and Lightning Experience).

Formula Examples

Example 1

This example displays a GIF image of a green square if the amount of an opportunity is greater than 100, a yellow square if it’s under 51 and 99, and a red square if it’s less or equal to 50.

IF( Amount > 100, IMAGE("/servlet/servlet.FileDownload?file=01570000000Q6El", "Green"),
IF ( Amount > 50, IMAGE("/servlet/servlet.FileDownload?file=01570000000Q6Ef", "Yellow"),
IMAGE("/servlet/servlet.FileDownload?file=01570000000Q6Ep", "Red")))

IMPORTANT: Although percentage fields appear to have whole number values, they are decimals. For example, 50% in the opportunity probability field is entered as 0.5, not 50. So the formula for a percent field should look like this (using probability field as an example):

IF ( Probability > 0.50, IMAGE("/servlet/servlet.FileDownload?file=01570000000Q6Ef", "Yellow")

Example #2 

This example displays the JPG image of a flower regardless of the value in any field.

IMAGE("http://images.odeo.com/1/8/4/Zencast.jpg", "Flower", 300, 300)

Need more inspiration? Check out the Sample Image Link Formulas.

Go to top
Educate Yourself Further

Read more about  Customize your Salesforce App Branding
Check out this Trail: Advanced Formulas

Share this article...

How to: Customize your Salesforce App Branding Previous post

Salesforce Mentor, with 10 years Salesforce experience, Hardcore Admin & Guru Developer, Geek, Animal lover, and dog & cat rescuer activist. Lifetime student, Stand-Up comedian wannabe, Photographer, Gamer, Anime lover, and coffee addict. Spreading Salesforce love and teaching beyond my capacity. Aiming to become Tech Architect!

One Comment

  1. Garry Reply

    Hello there! I know this is somewhat off topic butt I was wondering iif you
    knew where I could ffind a captcha plugin for my coment form?
    I’m ussing the ssame bkog platform as yours and I’m having diffiulty finding one?
    Thanks a lot!

Leave a Reply

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

© Copyright 2019 SalesforceMonday.com