Visualforce Component for Record Status Progress Bar

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.

	public class StatusProgressBarController {
	public String selectedObject;
	public String selectedField;
	public string currentStatus{get;set;}
	public list<String> picklistOptions{get;set;}
	public StatusProgressBarController(){
	picklistOptions=new List<String>();
	}
	public void setselectedObject(string obj){
	system.debug('*******setter method get called-setselectedObject');
	selectedObject=obj.toUpperCase();
	}
	public string getselectedObject(){
	system.debug('*******getter method get called-getselectedObject');
	return selectedObject;
	}
	public void setselectedField(string fld){
	system.debug('*******setter method get called-setselectedField');
	selectedField=fld.toUpperCase();
	}
	public string getselectedField(){
	system.debug('*******getter method get called-getselectedField');
	return selectedField;
	}
	//public PageReference GenerateProgressBar(string objname,String FieldName){
	public PageReference GenerateProgressBar(){
	system.debug('*******GenerateProgressBar*****objname:'+selectedObject);
	system.debug('******GenerateProgressBar******FieldName:'+selectedField);
	Schema.DescribeSObjectResult objDescribe=Schema.getGlobalDescribe().get(selectedObject).getdescribe();
	Map<String, Schema.SObjectField> fieldMap = objDescribe.fields.getMap();
	Schema.DescribeFieldResult fd=fieldMap.get(selectedField).getDescribe();
	if(String.valueof(fd.getType()).equalsignorecase('Picklist')){
	List<Schema.PicklistEntry> Pp = fd.getPicklistValues();
	for(Schema.PicklistEntry p:Pp){
	system.debug('****picklist option label'+P.getLabel());
	system.debug('****picklist option value'+P.getvalue());
	picklistOptions.add(P.getLabel());
	}
	}
	string recordid= ApexPages.currentPage().getParameters().get('id');
	if(recordid!=null && recordid!=''){
	string queryString ='select id,'+selectedField + ' from '+ selectedObject + ' where id= \''+recordid+ '\'';
	system.debug('************queryString :'+queryString );
	sobject sobj=database.query(queryString);
	currentStatus=(string)sobj.get(selectedField);
	}else{
	currentStatus='';
	system.debug('*********not able to find current status of records');
	}
	return null;
	}
	}

view rawApex Class-StatusProgressBarController hosted with ❤ by GitHub

	<apex:component controller="StatusProgressBarController" >
	<script>
	window.onload = function() {
	//alert('Please Wait while we are generating Status Progress bar');
	GenerateStatusBar();
	}
	</script>
	<style>
	.container {
	position: relative;
	width: 150px;
	float:left;
	}
	.center {
	position: absolute;
	top: 30%;
	width: 130px;
	text-align: center;
	font-size: 18px;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	}
	img {
	width: 150px;
	height: 80px;
	}
	.containerdiv{
	}
	</style>
	<apex:attribute Name="objectAPIName" type="String" assignTo="{!selectedObject}" description="Specify the API name of object" required="true"/>
	<apex:attribute Name="fieldAPIName" type="String" assignTo="{!selectedfield}" description="Specify the API name of field" required="true" />
	<apex:form id="f1">
	<!-- {!selectedObject}<br/> {!selectedField}<br/>-->
	<div class="containerdiv">
	<apex:repeat value="{!picklistOptions}" var="opt" >
	<apex:outputpanel rendered="{!if(currentStatus <>opt,true,false)}">
	<div class="container">
	<apex:image value="{!$Resource.progressBar}" style="opacity:0.2"/>
	<div class="center">
	<apex:outputText value="{!opt}"/>
	</div>
	</div>
	</apex:outputpanel>
	<apex:outputpanel rendered="{!if(currentStatus ==opt,true,false)}">
	<div class="container">
	<apex:image value="{!$Resource.progressBar}" style="opacity:1"/>
	<div class="center">
	<apex:outputText value="{!opt}"/>
	</div>
	</div>
	</apex:outputpanel>
	</apex:repeat>
	</div>
	<apex:actionFunction name="GenerateStatusBar" action="{!GenerateProgressBar}" id="gsb" reRender="f1"/>
	</apex:form>
	</apex:component>

view rawVFC-StatusProgressBar hosted with ❤ by GitHub

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

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

Note:

• 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"/>
</apex:page>

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