Wednesday, 2 August 2017

Salesforce Progress Indicator Using Lightning Component

Here is the example of Salesforce Progress Indicator using lighting component, and using Salesforce lightning design system, below is how it looks



Here is how it works,


Here is the lightning component code

Component code

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
   <aura:attribute name="iconForStep1" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep2" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep3" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep4" type="String" default="utility:progress" />  
   <aura:attribute name="iconForStep5" type="String" default="utility:progress" />  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <div class="demo-only" style="padding: 3rem 1rem 0px; background: rgb(244, 246, 249);">  
     <div class="slds-progress slds-progress_shade">  
       <ol class="slds-progress__list">  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step1" iconName="{!v.iconForStep1}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 1 - Completed" />  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step2" iconName="{!v.iconForStep2}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 2 - Error"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step3" iconName="{!v.iconForStep3}" class="slds-progress__marker slds-progress__marker_icon" size="small" alternativeText="Step 3"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step4" iconName="{!v.iconForStep4}" class="slds-progress__marker slds-progress__marker_icon" size="x-small" alternativeText="Step 4"/>  
         </li>  
         <li class="slds-progress__item">  
           <lightning:buttonIcon aura:id="step5" iconName="{!v.iconForStep5}" class="slds-progress__marker slds-progress__marker_icon" size="x-small" alternativeText="Step 5"/>  
         </li>  
       </ol>  
       <!-- this is for the line in between the dots -->  
       <div class="slds-progress-bar slds-progress-bar_small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" role="progressbar">  
         <span aura:id="progress" class="slds-progress-bar__value">  
         </span>  
       </div>  
     </div>  
     <div aura:id="tooltip">  
       <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom" role="tooltip" style="position: absolute; top: 5px; left: calc(83% + 8px); transform: translateX(-50%);">  
         <div class="slds-popover__body">Done</div>  
       </div>  
     </div>  
   </div>  
   <div class="demo-only" style="padding: 3rem 1rem 0px; background: rgb(244, 246, 249); position: absolute; left: calc(30% + 15px);">  
     <button class="slds-button slds-button_brand" onclick="{!c.step1Check}">Step 1 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step2Check}">Step 2 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step3Check}">Step 3 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step4Check}">Step 4 Check</button>  
     <button class="slds-button slds-button_brand" onclick="{!c.step5Check}">Step 5 Check</button>  
   </div>  
 </aura:component>  

And here is the controller code

 ({  
   doInit : function(component, event, helper) {  
     var prog = component.find('progress');  
     $A.util.addClass(prog, 'default');  
     var toggleTooltip = component.find("tooltip");  
     $A.util.addClass(toggleTooltip, "tooltip");  
   },  
   step1Check: function(component, event, helper) {  
     component.set("v.iconForStep1",  
            component.get("v.iconForStep1")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step1');  
     $A.util.addClass(cmpTarget, 'slds-is-completed');  
     var prog = component.find('progress');  
     $A.util.removeClass(prog, 'default');  
     $A.util.toggleClass(prog, 'step1');  
   },  
   step2Check : function(component, event, helper) {  
     component.set("v.iconForStep2",  
            component.get("v.iconForStep2")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step2');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step2');  
   },  
   step3Check : function(component, event, helper) {  
     component.set("v.iconForStep3",  
            component.get("v.iconForStep3")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step3');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step3');  
   },  
   step4Check : function(component, event, helper) {  
     component.set("v.iconForStep4",  
            component.get("v.iconForStep4")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step4');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var prog = component.find('progress');  
     $A.util.toggleClass(prog, 'step4');  
   },  
   step5Check : function(component, event, helper) {  
     component.set("v.iconForStep5",  
            component.get("v.iconForStep5")=="utility:progress"?"utility:success":"utility:progress");  
     var cmpTarget = component.find('step5');  
     $A.util.addClass(cmpTarget, 'slds-has-error');  
     var toggleTooltip = component.find("tooltip");  
     $A.util.removeClass(toggleTooltip, "tooltip");  
   }  
 })  

Here the style code for the component

 .THIS {  
 }  
 .THIS .step1 {  
   width:260px;  
 }  
 .THIS .step2 {  
   width:520px;  
 }  
 .THIS .step3 {  
   width:780px;  
 }  
 .THIS .step4 {  
   width:1050px;  
 }  
 .THIS .tooltip {  
   display: none;  
 }  
 .THIS .default {  
   width:0px;  
 }  

To use this component you need to create a test app

 <aura:application extends="force:slds">  
   <c:ProgressBar />   
 </aura:application>  

We can add many more icons, you can find all over Here in Progress Indicator

Here is source code in github.

Thanks

2 comments:

  1. This information you provided in the blog that is really unique I love it!! Thanks for sharing such a great blog. Keep posting..
    Salesforce Training
    Salesforce Course
    Salesforce Institute

    ReplyDelete
  2. Hey, Wow all the posts are very informative for the people who visit this site. Good work! We also have a Website. Please feel free to visit our site. Thank you for sharing.
    Salesforce Services
    Keep Posting:)

    ReplyDelete