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
Progress Bar using Formula field in Salesforce

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

  1. Empty filled image with border (Download Sample)
  2. Filled rectangular image (Download Sample)

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
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.

14 comments

  1. 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. 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

          2. 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

  2. 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

    2. 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
  3. Pingback: The Bottom Line on Formulas | @MVDSFDC

  4. 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

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

    Reply

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.