ProgressBar Component (Re-usable) -- Can be plugged into any Visualforce page or standard layout

Progress-bar Component (Re-usable) -- Can be plugged into any Visual-force page or standard layout (salesforce)

Use-case:
"Progress-bar" inform users of how close they are to completing a certain goal by showing percentages of completion along the way.

What is the Re-usable component about?

• This re-usable visual force component (built in visualforce/apex language) allows you to map a given field in a custom object with a given value and the corresponding image via a "Custom setting".
• This visual force component is re-usable and can be plugged into a visual force page and which can be embedded into a standard page-layout or a stand-alone visual force page.
• Once done can be leveraged in multiple scenarios.
• The configuration can be maintained in the "Custom setting"

How to use this component?

• Install the "Un-managed package" in the link provided in the page (scroll down)
• Upload images for a given progress bar in static resource and get the corresponding links by clicking on "View files" in Static resource.
• Set-up the configuration in the "Custom Setting" (mentioned in component list below)
• Map the Object name, field name, value and corresponding image link in the custom setting.
• Add the component to a given visualforce page
• Embed the page to a standard layout or use-it in the stand-alone visual force page

Example:

Component list:
Page: StageProgressBarVfPage
Component: ProgressBarComponent
Class: ProgressBarReusableCntrlTest, ProgressBarReusableCntrl
Custom Setting: ProgressBarImages__c
Static Resource: MockProgressBar

*** You can install the unpackaged components from the following link: ***
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t61000000gUPP

Code Snippet:

StageProgressBarVfPage: 

<apex:page StandardController="Opportunity" sidebar="false" showheader="false"> <c:ProgressBarComponent objName="Opportunity" field_Name="StageName" field_Value="Prospecting"/> </apex:page>

 

ProgressBarComponent:

<apex:component controller="ProgressBarReusableCntrl"> <apex:attribute assignTo="{!objectName}" name="objName" type="String" Description="Object Name" required="true"/> <apex:attribute assignTo="{!fieldName}" name="field_Name" type="String" Description="Field Name" required="true"/> <apex:attribute assignTo="{!fieldValue}" name="field_Value" type="String" Description="Field Value mapped to a given image" required="true" /> <center> <apex:outputPanel id="CentreImage"> <apex:image url="{!ProgressBarURL}" rendered="{!NOT(ISBLANK(ProgressBarURL)) && NOT(ISNULL(ProgressBarURL))}" id="StatusImage"/> <apex:outputText rendered="{!ISBLANK(ProgressBarURL) || ISNULL(ProgressBarURL)}"><b>{!$Label.Default_Image}</b></apex:outputText> </apex:outputPanel> </center> </apex:component>

ProgressBarReusableCntrl:

public class ProgressBarReusableCntrl { public String objectName{get;set;} public String fieldName{get;set;} public String fieldValue{get;set;} public ProgressBarReusableCntrl(){ } /** * @description Gets image URL from ProgressBarImages__c custom setting to display it on the component */ public String getProgressBarURL(){ String value = (fieldValue!=null && fieldValue.contains('<a href'))?fieldValue.stripHtmlTags():fieldValue; String query = 'select Field_Value__c, Image_Link__c from ProgressBarImages__c where Object__c =\'{objectName}\' and Field_Name__c =\'{fieldName}\' and (Field_Value__c =\'{value}\' or Field_Value__c = \'Default\')'; query = query.replace('{objectName}', objectName); query = query.replace('{fieldName}', fieldName); query = query.replace('{value}', value); List<ProgressBarImages__c> imageLink = Database.query(query); String image = null; for(ProgressBarImages__c link: imageLink){ if(link.Field_Value__c != 'Default' || image == null){ image = link.Image_Link__c; } } return image; } }