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

No comments:

Post a Comment