Friday, September 13, 2019

How to implement Progress Bar in Visualforce Page

This post explains how to implement Progress bar on the Visualforce page using SLDS class.

This is Demo only you can extend this functionality based on your requirement.

Demo

Visualforce page
<apex:page controller="ProgressBarController" >
    <apex:slds />
    <apex:form id="frm">
        <apex:actionPoller action="{!checkStatus}" enabled="{!bProcess}" interval="5" reRender="frm" />
        
        <div class="slds-grid slds-gutters" style="margin-left:1%;">
            <div class="slds-col slds-size_1-of-3">
                <h1 style=" font-weight: bold;">
                    Progress Bar Demo in Visualforce Page
                </h1>
                <div style="display: block; margin-top:5%;" class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100"
                     aria-valuenow="{!deProgressBarWidth}" role="progressbar">
                    <span class="slds-progress-bar__value slds-progress-bar__value_success" style="width: {!deProgressBarWidth}%;">
                        <span class="slds-assistive-text">Progress: {!deProgressBarWidth}%</span>
                    </span>
                    <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
                        {!strStatus}
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>


Apex Class
public class ProgressBarController {
    
    public Decimal deProgressBarWidth {get;set;}
    public Integer iCount {get;set;}
    public String strStatus {get;set;}
    public Boolean bProcess {get;set;}
    
    public ProgressBarController() {
        deProgressBarWidth = 0;
        strStatus = 'In Progress...';
        bProcess = true;
        iCount = 0;
    }
    
    public PageReference checkStatus() 
        // Caluclating Percentage value
        deProgressBarWidth = (iCount != 0 ? (Decimal.valueOf(iCount) > 100 ? 100 : Decimal.valueOf(iCount))/100 * 100 : 0);
        if(iCount >= 100) {
            strStatus = 'Completed';
            bProcess = false;
        }
        else {
            strStatus = 'Processing => ' + iCount + '/100';
        }  
        
        iCount += 45;
        return null;
    }
}

Output

3 comments:

  1. Hi,
    This is really nice example for progressbar.It works very well for me too. I would like to know few scenarios how to achieve could you please help me. i tried few things but it is not working.
    REQUIREMENT:
    i need to hide progress bar by default when 1st time page load. it should display only when SAVE button on clicks, during data saving process processing % it should show and when process completes then progress bar should hide again.

    To achieve this i tried to changed style to display: none; in "div style="display: block; margin-top:5%;" class="slds-progress-bar slds-progress-bar_circular" aria-valuemin="0" aria-valuemax="100" " then on button click i am changing style to display:block. by doing this it shows the progress bar correctly but the problem is immediate after page refreshes and progress bar hides and % of progressing is not displaying in progressbar. but in backend all saving process working fine even % of progress stuffs all working fine in backend,checked thorough log, i mean ActionPolar asynchronous call happens fine. only thing is progress bar is not displaying.
    NOTE: if i will not change the display NONE and BLOCK part , i mean i will keep as it is provided in example then it works absolutely fine.

    Please help me here, Thanks a lot in advance.

    Thanks,
    Uttam

    ReplyDelete
  2. nice post..but can u elaborate on how can we use this progress bar once the batch class is completed.

    ReplyDelete
    Replies
    1. Please share if you got the answer how can we us this progress bar once the batch class is completed

      Delete