Creating a Graphic Field within Salesforce

Salesforce has a feature which allows us to display images on page layout called Graphic field. A Graphic field allows users to have a visual representation and help them take the suitable action.

Let us take an example of a standard object ‘Quote’.  Sales representative may want to see the status of a quote and take the action based on its status.  As images can deliver information faster compared to a text field.  It helps to concentrate on “what to do” rather than “what to find”.

Our requirement is therefore to create a graphic field in Quote Layout which displays an image based on the status of the quote.  Here we’re going to display the following images based on the status:

Table – Graphic Field in Quote Module to denote status of the record

We’ve to create a formula field to display images based on the value of ‘Status’ field. Now, we’ll be going through the steps to be followed to create ‘Graphic Field’.

Steps to create a Formula Field that displays an Image

The below steps defines the steps in which the above requirement can be handled without having to write a single like of APEX code.

#1 Create a Public folder to hold your image files

Before we start we need to make sure that the images we will be use would be accessible to all the users. For this, we need to do the below steps. If we do not do this step, then the image may not be visible to certain users.

• Navigate to Documents tab and Click on Create New Folder.
• Provide the folder name (e.g., “Public Images”) and Give users “Read-Only” access to the folder and provide access to all users.

#2 Upload your image file to your Documents storage area

In this step, we will first upload the images we need to display. You may want to choose image rationally and with an appropriate pixel size so that it can display in the list along with the records. For this the following steps are involved.

• Click on Documents tab and Click New.
• Provide the following details :
  • document name
  • select the Folder from drop-down list where you want to store the image,
  • select the folder you created above.

• Click on ‘Choose file button‘ and select the file to upload or you can also provide the ‘URL’ of the image and save the image.

#3 Get the URLs of the uploaded file

To be able to leverage these files in the next step, click on the documents tab and select the folder in which you’ve stored the images.

• Click on ‘Go’, which will redirect you to the below screen where all the images existing in the field will be shown
• Click on the ‘View’ link before the name of the file you are going to use.

• A new tab will be opened. Now copy the URL from the address bar
• Similarly copy URL’s of all the images you’ll be using in the Formula

#4 Create formula field to display the image

This is a crucial step. To display the image, we need to create a formula field in the respective object.

• Here I’m creating ‘Graphic field’ in Quote
• Navigate to Setup | Customize | Quotes and Click on Fields.
• Click on ‘New’ button in the “Quote Custom Fields & Relations” section and select field type as ‘Formula’
• Click on ‘Next’ button. Provide  ‘field name’ and then select type as ‘Text’.
• Click on ‘Next’ button the following screen will be shown

• In the “Enter Formula” section, click on “Advanced Formula”
• In the text area, enter your formula using “IMAGE” function to retrieve the image file you uploaded in step # 2.
• The syntax of IMAGE() is shown below

IMAGE(image_url, alternate_text, height, width)

• It accepts 4 parameters

1. image_url: URL of the image you want to displays
2. alternate_text: Text to be displayed when an image is not loaded
3. height: height of the image to be displayed on the field
4. width: width of the image to be displayed on the field
5. URL obtained from step #4 looks as shown below
   

   "https://c.ap5.content.force.com/servlet/servlet.FileDownload?file=0157F000000KECK"

• Ignore “https://c.ap5.content.force.com” in the URL and copy the below URL to use in IMAGE()

“/servlet/servlet.FileDownload?file=0157F000000KECK”

Eg : IMAGE(“/servlet/servlet.FileDownload?file=0157F000000KECF”, “green”, 25,25).

This is the formula I’m using here

If(Text(Status)="Accepted", IMAGE("/servlet/servlet.FileDownload?file=0157F000000KECF", "green", 25,25), If(Text(Status)="Rejected", IMAGE("/servlet/servlet.FileDownload?file=0157F000000KECA", "red", 25,25), IMAGE("/servlet/servlet.FileDownload?file=0157F000000KECK", "orange", 25,25))

• When Status of Quote is “Accepted”, green color circle will be displayed. When Status of Quote is “Rejected”, Red color circle will be displayed, otherwise Orange color will be displayed.

#5 Provide field level security and add the field in page layout Create formula field to display the image

As a final step, you must add field level security and display it to the user. See the below screenshot of how the field may look like.

Few scenarios where a Graphic field will be helpful for the user

Here are a few other scenarios where graphical representation of information may be useful for the users.

• Accounts Object to represent Status of an Account
• Products Object for Rating a product with 3star, 4star, etc.
• Opportunity Object to represent the status of Opportunity

In this way, we can create Graphic fields in Salesforce. We can also use the images from the ‘Graphics Pack’ by downloading it from ‘AppExchange’.

How we can help

Our team can help you customize and integrated Salesforce as per your business process. Read about our Salesforce Integration Services. Reach out to us for a free assessment of your business needs.