lightning:progressIndicator

A lightning:progressIndicator component displays a horizontal list of steps in a process, indicating the number of steps in a given process, the current step, as well as prior steps completed. For example, Sales Path uses a progress indicator to guide sales reps through the stages of the sales process. You can create progress indicators with different visual styling by specifying the type attribute. Set type=”base” to create a component that inherits styling from progress indicators in the Lightning Design System. Set type=”path” to create a component that inherits styling from the path in the Lightning Design System.

In this exmaple, I am showing the step wizard sort of form along with the progress  indicators as shown below

 

<aura:component implements="force:appHostable" >
    <aura:attribute name="accountId" type="String" />
    <aura:attribute name="contactId" type="String" />
    <aura:attribute name="opportunityId" type="String" />
    <aura:attribute name="caseId" type="String" />
    <aura:attribute name="currentStepInd" type="Integer" default="1"/>
    <aura:attribute name="isProgressing" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:progressIndicator currentStep="{!v.currentStepInd}" type="base" hasError="false" variant="base">
        <lightning:progressStep label="Account" value="1"/>
        <lightning:progressStep label="Contact" value="2"/>
        <lightning:progressStep label="Opportunity" value="3"/>
        <lightning:progressStep label="Case" value="4"/>
        <lightning:progressStep label="Result" value="5"/>
        
    </lightning:progressIndicator>
    <div  aura:id="accountRec">
        <lightning:card iconName="standard:account" title="Lightning ProgressBar - Account Information" variant="base" class="slds-card-wrapper">
            <lightning:recordEditForm
                                      onsubmit="{!c.handlerSubmit}"
                                      recordTypeId ="012i0000000ALExAAO"
                                      objectApiName="Account">
                <!-- the messages component is for error messages -->
                <lightning:messages />
                
                <lightning:inputField fieldName="Name" />
                <lightning:inputField fieldName="Type" />
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Rating" />
                <div class="slds-m-top_medium">
                    <lightning:button  variant="brand" type="submit" name="save" label="Save Account" onclick="{!c.handlerSubmit}" />
                </div>
            </lightning:recordEditForm>
            
        </lightning:card>
    </div>
    <div aura:id="conRec">
        <lightning:card iconName="standard:contact" title="Lightning ProgressBar - Contact Information" variant="base" class="slds-card-wrapper">
            <lightning:recordEditForm
                                      onsubmit="{!c.handlerSubmit}"
                                      recordTypeId ="012i00000019hcLAAQ"
                                      objectApiName="Contact">
                <!-- the messages component is for error messages -->
                <lightning:messages />
                <lightning:inputField fieldName="FirstName" />
                <lightning:inputField fieldName="LastName" />
                <lightning:inputField fieldName="Email" />
                <lightning:inputField fieldName="Phone" />
                <div class="slds-m-top_medium">
                    <lightning:button  variant="brand" type="submit" name="save" label="Save Contact" onclick="{!c.handlerSubmit}"/>
                </div>
            </lightning:recordEditForm>
        </lightning:card>
    </div>
    <div aura:id="oppRed">
        <lightning:card iconName="standard:opportunity" title="Lightning ProgressBar - Opportunity Information" variant="base" class="slds-card-wrapper">
            <lightning:recordEditForm
                                      onsubmit="{!c.handlerSubmit}"
                                      objectApiName="Opportunity">
                <!-- the messages component is for error messages -->
                <lightning:messages />
                <lightning:inputField fieldName="Name" />
                <lightning:inputField fieldName="Amount" />
                <lightning:inputField fieldName="CloseDate" />
                <lightning:inputField fieldName="StageName" />
                <lightning:inputField fieldName="Type" />
                <div class="slds-m-top_medium">
                    <lightning:button  variant="brand" type="submit" name="save" label="Save Opportunity" onclick="{!c.handlerSubmit}"/>
                </div>
            </lightning:recordEditForm>
        </lightning:card> 
    </div>
    <div aura:id="caseRec">
        <lightning:card iconName="standard:case" title="Lightning ProgressBar - Case Information" variant="base" class="slds-card-wrapper">
            <lightning:recordEditForm
                                      onsubmit="{!c.handlerSubmit}"
                                      recordTypeId ="012i0000001AOvJAAW"
                                      objectApiName="Case">
                <!-- the messages component is for error messages -->
                <lightning:messages />
                <lightning:inputField fieldName="Account" />
                <lightning:inputField fieldName="Subject" />
                <lightning:inputField fieldName="Origin" />
                <lightning:inputField fieldName="Reason" />
                <lightning:inputField fieldName="Contact" />
                <lightning:inputField fieldName="Priority" />
                <lightning:inputField fieldName="Type" />
                <div class="slds-m-top_medium">
                    <lightning:button  variant="brand" type="submit" name="save" label="Save Case" onclick="{!c.handlerSubmit}" />
                </div>
            </lightning:recordEditForm>
            
        </lightning:card>
    </div>
    
    <div aura:id="result">
        <lightning:card iconName="standard:case" title="Lightning ProgressBar - Completed Information" variant="base" class="slds-card-wrapper">
            Save is Successfull 
        </lightning:card>
    </div>
    
    
</aura:component>

 

({
    
    doInit : function(component, event, helper) {
        component.set("v.currentStepInd" ,1);
        
        var toggleText = component.find("conRec");
        $A.util.addClass(toggleText,'toggle');
        toggleText = component.find("oppRed");
        $A.util.addClass(toggleText,'toggle');         
        toggleText = component.find("caseRec");
        $A.util.addClass(toggleText,'toggle'); 
        
        toggleText = component.find("result");
        $A.util.addClass(toggleText,'toggle'); 
        
    },
    
    handlerSubmit: function (component,event) {
        
        var strLabel = event.getSource().get("v.label");
        console.log(strLabel);
        if(strLabel=='Save Account'){
            component.set("v.currentStepInd" ,"2");
            var toggleText = component.find("conRec");
            $A.util.removeClass(toggleText,'toggle');
            var toggleText = component.find("accountRec");
            $A.util.addClass(toggleText,'toggle');
            toggleText = component.find("oppRed");
            $A.util.addClass(toggleText,'toggle');         
            toggleText = component.find("caseRec");
            $A.util.addClass(toggleText,'toggle'); 
        }
        if(strLabel=='Save Contact'){
            component.set("v.currentStepInd" ,"3");
            var toggleText = component.find("oppRed");
            $A.util.removeClass(toggleText,'toggle');
            var toggleText = component.find("accountRec");
            $A.util.addClass(toggleText,'toggle');
            toggleText = component.find("conRec");
            $A.util.addClass(toggleText,'toggle');         
            toggleText = component.find("caseRec");
            $A.util.addClass(toggleText,'toggle'); 
        }
        if(strLabel=='Save Opportunity'){
            component.set("v.currentStepInd" ,"4");
            var toggleText = component.find("caseRec");
            $A.util.removeClass(toggleText,'toggle');
            var toggleText = component.find("accountRec");
            $A.util.addClass(toggleText,'toggle');
            toggleText = component.find("oppRed");
            $A.util.addClass(toggleText,'toggle');         
            toggleText = component.find("conRec");
            $A.util.addClass(toggleText,'toggle'); 
        }
        if(strLabel=='Save Case'){
            component.set("v.currentStepInd" ,"5");
            var toggleText = component.find("conRec");
            $A.util.addClass(toggleText,'toggle');
            var toggleText = component.find("accountRec");
            $A.util.addClass(toggleText,'toggle');
            toggleText = component.find("oppRed");
            $A.util.addClass(toggleText,'toggle');         
            toggleText = component.find("caseRec");
            $A.util.addClass(toggleText,'toggle'); 
            var toggleText = component.find("result");
            $A.util.removeClass(toggleText,'toggle');
            
        }
      
        
    }
})

 

.THIS.toggle {
    display: none;
}
.THIS {
    background-color: #fff;
}