Use Case:
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):
‘Incomplete’ (i.e. work yet to do):
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”!:
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:
6. Add the custom formula field to the page layouts, reports and list views as desired. You’re all set!
The 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:
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.
The Everyday Admin 
I am truly pleased to read this webpage posts which carries tons of
valuable facts, thanks for providing these kinds of data.
LikeLiked by 1 person