Create a Declarative Progress Bar

 

Use Case:

Alastair Hill works as a Salesforce System Administrator at Universal Containers and has been asked to provide a visual progress bar to enable users to see, at a glance, the status of support tasks’ completeness. These bars need to be presented on record pages, list views and reports and should represent, graphically, how much work has been achieved and how much is yet to do. A custom field called ‘Percentage Complete’ is already used to record the completeness of the task.

Design:

When we think about progress bars, they generally follow the same format: a horizontal bar split into two colours. One colour, starting on the left, showing how much progress has been made, and the other colour showing the incomplete work. As the progress bar will be derived from a percentage field, it could well be possible to have 100 images stored in your org (one for each percentage of completeness), and a large CASE formula to then associate each of the images with the percentage values. Aside from Salesforce’s 5,000 byte limit being possible with such a large formula, and the overhead of creating and managing 100 image files, this is not a very elegant solution and there’s a far better – and simpler – solution.

Let’s consider the IMAGE formula:

IMAGE(image_url, alternate_text [, height, width])

The last two parameters for height and width are optional, and can define the size, in pixels, of the image. We will be taking advantage of the width parameter to dynamically stretch and/or squash the two images referenced within the formula, to create a proportionally sized progress bar.


Solution:

To solve this we will use 2 images, saved as Static Resources, and a formula field.

1. Firstly find (or create) images as a .png or .jpg, which suitably represent both the completeness and incompleteness of a task. The size is not massively important (although some trial and error might be needed) as the images will be resized later on in the solution. I’ve chosen to use the following 2 images:

‘Complete’ (i.e. work done):

Green

‘Incomplete’ (i.e. work yet to do):

Grey

2. Next, go to Setup | Custom Code | Static Resources and upload these 2 images, as per the following config. I chose to call the 2 Static Resources “Green” and “Grey”:

Static resource
3. Once both Static Resources are saved, to get the URL for the image – which can later be referenced in a formula – open each Static Resource and click on “View File”. You will then see the image in the browser and can copy to clipboard the URL as per the highlighted text shown below when you get to step 5. Important note: do not copy anything before the “.com”!:

Static resource URL

4. Go to Setup | Object Manager | {Object Name} | Fields & Relationships | New and create a formula field with a Formula Return Type of “Text” (sounds odd, but go with it!). Input a sensible Field Label and Field Name (such as “Progress Bar”) and then hit Next.

5. Input a formula based on the following (ensuring that the URLs for the Static Resources are modified accordingly and also the field name for the percentage). I’ve included optional comments to explain the make-up of the formula to any other admins later on:

Long Formula
The above formula could be simplified to the following syntax (without comments, line breaks, etc) – if preferred:
Short formula

6. Add the custom formula field to the page layouts, reports and list views as desired. You’re all set!


The Result…

Result

As can be seen, the progress bar is dynamic and is an accurate representation of the value held in the Percentage Complete field.


Further Options:

This approach can be extended easily – perhaps having different colours to highlight which records are work-in-progress, completed or overdue (if used in conjunction with a “Due Date” field). The grey border I added is purely cosmetic and the formula could be simplified further by removing this.

Another recommended option is to put a Validation Rule in place to limit the percentage field to only accept values of between 0 and 100% (otherwise you would expect odd shaped bars). The one I choose to use is as follows:

VR.png


Where Could This Be Used?

Whilst this article was written to show a visual measure of progress, percentage fields are commonplace within most, if not all, Salesforce orgs and this same technique could be used in many other places. Examples include:

  • Probability of opportunities being won
  • Expected response rate for campaigns
  • Perceived level of churn risk for accounts
  • Lead conversion readiness

Resources:

Text version of the full formula:

/* Create an opening border of grey on the far left, 18 px high and 2 px wide */ 
IMAGE("/resource/1541783509000/Grey?", "Grey", 18, 2)
&
/* Create a green bar to represent completeness of the task, 18 px high and of a width of the % field value (1% = 1px) */
IMAGE("/resource/1541783488000/Green?", "Green", 18, Percentage_Complete__c * 100)
&
/* Create a grey bar to represent incompleteness of the task, 18 px high and of a width controlled by 1-% field value */
IMAGE("/resource/1541783509000/Grey?", "Grey", 18, (1 - Percentage_Complete__c) * 100)
&
/* Create a closing border of grey on the far right, 18 pixels high and 2 px wide */ IMAGE("/resource/1541783509000/Grey?", "Grey", 18, 2)

Text formula of the abridged formula:

IMAGE("/resource/1541783509000/Grey?", "Grey", 18, 2) &
IMAGE("/resource/1541783488000/Green?", "Green", 18, Percentage_Complete__c * 100) &
IMAGE("/resource/1541783509000/Grey?", "Grey", 18, (1 - Percentage_Complete__c)*100 +2)

Sample of validation rule:

Percentage_Complete__c < 0  ||  Percentage_Complete__c > 1

I hope you enjoyed this short article and would welcome any feedback.

 

One thought on “Create a Declarative Progress Bar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s