Wednesday, October 19, 2016

Visualforce Component for Record Status Progress Bar

Sometimes we have to display current status of record through progress bar on record detail page. For example user can directly see the status of current opportunity or case by looking into detail page of record.

For this purpose we generally create a VF page and embed it in record page layout.

I have created a generic visualforce component which can be used to display record status bar. We just have to pass the object API name and field API name to component and it will generate status bar for you.

Upload below image image in static resource and name it as "progressbar".

Just create a new VF page and include this component in it. Below is code for visualforce Component and visualforce component Controller.

Suppose we need to display progress bar for opportunity stage, then use below code.

<apex:page standardController="Opportunity">
<c:StatusProgressBar objectAPIName="Opportunity"  fieldAPIName="stagename"/>

  • You need to specify the objectAPIName and fieldAPIName for which you want to display progress bar.
  • Add this VF page to page layout to display progress bar.

Opportunity Record Detail Page

Now suppose you want to display progress bar for case record then create a VF page and use below code:

<apex:page standardController="Case">
<c:StatusProgressBar objectAPIName="Case" fieldAPIName="Status"/>

Here we are displaying the progress bar for status field present in case. You can display status bar for any picklist field (standard or custom).


  1. i have understand the concepts can you suggest me the new ideas for their coding explanations.

    Salesforce Training in Chennai

  2. Hi
    I have added the Visual force in Opporunity layout, But I am not able to see the progress bar