Creating Progress Bar field using Formula| Without any coding

In this post we will discuss on creating Progress bar field without any coding, just by using formula field. Initially it seems like we can’t create dynamic progress bar field by using only formula in Salesforce. There are some approach, where developers stores 4 images with interval of 25% or 10 images with 10% interval and displaying image with help of Case or IF statement.

We will create Progress bar field, which will reflect every percentage.

Progress Bar using Formula field in Salesforce

To create perfect Progress bar field, we will need to take help of two images.

Upload above two images in Static resource. Once it is uploaded create a formula field.

In Formula field we will be appending both images and repeating “Filled Image” as per percentage field. Logic can be seen in below image.

Logic for Progress Bar using Formula field in Salesforce

Formula for Progress Bar Image

IMAGE('/resource/1398170360000/BlueProgressBar', 'Test', 10, ( percField__c * 100 )) &
IMAGE('/resource/1398170333000/ProgressBorder', 'Test', 10, (100 - percField__c * 100 )) &
' ' &
TEXT (percField__c * 100) &
'%'

In above code “1398170360000” is ID of static resource displayed in URL.

Posted

April 22, 2014

Salesforce

Jitendra

Tags:

Declarative Programming, Formula Field, Image, Point and Click, Salesforce

Comments

14 responses to “Creating Progress Bar field using Formula| Without any coding”

Simrin Singh

February 19, 2015

Hello,

How can this formula be used if i am using a visualforce page and the progress bar depends on a value from custom controller

Reply
1. Jitendra Zaa
  
  February 19, 2015
  
  Hi simran, in vf page you cannot use this. May ne ui can uae some library like jquery UI.
  
  Reply
  1. Sonya Dhand
    
    March 30, 2017
    
    Hi Jitendra
    
    Great post but I have an issue in that my bar will not expand width ways
    
    My formula is like this
    
    IMAGE(‘/resource/1490866928000/Opportunity_Progress_Bar’, TEXT(StageName),15,( percField__c * 100 )) &
    IMAGE(‘/resource/1490866874000/Opportunity_Progress_Border’, TEXT(StageName), 15, (100 – percField__c * 100 )) &
    ” &
    TEXT (percField__c * 100) &
    ‘%’
    
    But Cannot see all of the text
    
    Thanks
    
    Sonya
    
    Reply
    1. Sonya Dhand
      
      March 30, 2017
      
      https://uploads.disquscdn.com/images/e866d58c1a37383886b4e79e9721668de0ed2144aae4f208d07d96f8db648ed9.png
      
      Reply
      1. Jitendra Zaa
        
        March 30, 2017
        
        Seems you are using 2 images as “1490866928000” & “1490866874000” , URL of border image is not correct
      2. Sonya Dhand
        
        March 30, 2017
        
        Hi Jitendra
        
        Thanks for getting back to me.
        
        I created 2 static resources for each image upload and the progress border url is correct. How would I get both images into the same static resource? So they have the same url?
        
        Thanks
        
        Sonya
      3. Sonya Dhand
        
        March 30, 2017
        
        Hi Jitendra
        
        I re uploaded the image and all ok now.
        
        Thanks for you help
        
        Sonya
Brent Downey

January 12, 2016

This is awesome Jitendra, but my image isn’t displaying correctly in Salesforce. I made sure that the filler image is publicly available and in a shared document folder, but no luck. Any suggestions?

Reply
1. Jitendra Zaa
  
  January 12, 2016
  
  Hey brent, Thanks for feedback. It should be uploaded in Static resource and number is ID of static resource. I have updated this post.
  
  Reply
2. Brent Downey
  
  January 12, 2016
  
  I actually got this to work. The issue was the URL I used for the image. Got this to work with ‘/servlet/servlet.FileDownload?file=01515000004mXEM’ as the URL where the ID provided is the Salesforce ID for the image. Thanks for this awesome information!
  
  Reply
  1. Jitendra Zaa
    
    January 12, 2016
    
    Awesome, you got it other way 🙂
    
    Reply
The Bottom Line on Formulas | @MVDSFDC

April 3, 2016

[…] How to create formula bar using formulas – cool use case by Jitendra Zaa […]

Reply
Gregg O

May 2, 2016

Hey Brent. Here is my code. What am I missing? My progress bar is showing up with the words test in it versus a shaded color. Thought? Thanks!

IMAGE(‘/servlet/servlet.FileDownload?file=01536000001IOcr’, ‘Test’, 10, ( Reported_Committed__c * 100 )) &

IMAGE(‘/servlet/servlet.FileDownload?file=01536000001IOcm’, ‘Test’, 10, (100 – Reported_Committed__c * 100 )) &

‘ ‘ &

TEXT (Reported_Committed__c * 100) &

‘%’

Reply
Chris Pearson

May 5, 2016

These progress bars look awful in Lightning Experience – any way to optimize for LEX?

Reply

Creating Progress Bar field using Formula| Without any coding

Share this post

Comments

14 responses to “Creating Progress Bar field using Formula| Without any coding”

Leave a Reply Cancel reply