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;
}
}
