How to Display a Traffic Light Indicator in Salesforce

Visual indicators are a great addition to a Salesforce page to highlight important information or values. Instead of just displaying a value, showing an image will make a much larger impact. Depending on the situation, it may be more suitable to just display a single indicator such as a caution or stop image, or if a variable can have a range of values, display a variable image according to which range the value falls into. It is quite simple to display indicators in Salesforce using formula fields. Here are the steps to setup a formula field to display a traffic light indicator.

Here are the steps:

  1. Find images that can be used for your indicator.
  2. Load the images into Salesforce documents
  3. Create a formula field referencing the image URLs
  4. Add your formula field to the page layout

First you have to find an image to use. If you don’t have your own, you can search on Google images.
While you can’t just search and take any image that you find (for copyright reasons), you can search for images that are free to use for commercial purposes. Go to:
http://www.google.com/advanced_image_search
and scroll down to usage rights and select “free to use or share, even commercially”

Usage Rights

You can then search on your keywords, e.g. Traffic Light and find an image to use. I found this one, for a green traffic light indicator:

green traffic light indicator



The next step is to upload the image/s to Salesforce. Go to the Document tab, press New to add the image. Give it a meaningful name and save it in the Images folder.

Image in Documents



Once you have uploaded your image/s, note the URL’s, as you will need them later in the formula field.

Create a formula field, and use the image URLs that you previously uploaded. In the example below, the formula field will display a green traffic light indicator if the Opportunity Margin is greater than 25%, yellow if it is between 20% and 25% and red if it is below 20%.

IF(Overall_Opportunity_Margin__c > 0.25, IMAGE(“/servlet/servlet.FileDownload?file=015g00000001nok”, “Green”),
IF(Overall_Opportunity_Margin__c > 0.2, IMAGE(“/servlet/servlet.FileDownload?file=015g00000001nop”, “Yellow”), IMAGE(“/servlet/servlet.FileDownload?file=015g00000001nou”, “Red”)))

And now in your opportunity, the indicator displays:

Red Traffic Light Indicator

Display Green Traffic Light Indicator

* Remember that if you test this in a development environment and move to another environment, the images will need to be uploaded in the new environment, and the image URL’s replaced in the formula fields.