Building a form with multiple steps in Aura Components

It's a usual practice to have more than 40-50 fields on an object when you work on a project.

However, it's not a good user experience practice to show all the 40-50 fields at once. Suggested approach is going to be breaking down the form into multiple small sections with 5-10 fields per section.

It becomes lot more easy to build a component like this considering the fact that we will be using <lightning:recordEditForm />.

We will not be using <lightning:recordForm /> for this since with recordForm we will not be having any control over the fields. We just need to mention the respective values for layoutType and it renders all the fields.

Here is the implementation that I have come up with.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride"
                access="global">
    
    <aura:attribute name="progressIndicatorFlag" type="String" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    
    <lightning:recordEditForm aura:id="accountRecordCreator" 
                              onsuccess="{!c.handleSuccess}"
                              objectApiName="Account">
        <lightning:messages />
        
        <div class="demo-only" style="height: 640px;">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" 
                     aria-modal="true" aria-describedby="modal-content-id-1" 
                     class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                            <lightning:icon iconName="utility:close" alternativeText="Account" />
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New Account</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        
                        
                        <lightning:progressIndicator type="path" currentStep="{!v.progressIndicatorFlag}">
                            <lightning:progressStep label="Step One" value="step1"/>
                            <lightning:progressStep label="Step Two" value="step2"/>
                            <lightning:progressStep label="Step Three" value="step3"/>
                        </lightning:progressIndicator>
                        
                        <div aura:id="stepOne">
                            <lightning:inputField fieldName="Name" />
                            <lightning:button label="Next" onclick="{!c.goToStepTwo}" variant="brand"/> 
                        </div>
                        <div aura:id="stepTwo">
                            <lightning:inputField fieldName="Industry" />
                            <lightning:button label="Back" onclick="{!c.goBackToStepOne}" />
                            <lightning:button label="Next" onclick="{!c.goToStepThree}" variant="brand"/> 
                        </div>
                        <div aura:id="stepThree">
                            <lightning:inputField fieldName="Rating" />
                            <lightning:button label="Back" onclick="{!c.goBackToStepTwo}"/>
                            <lightning:button label="Save" type="submit" variant="brand"/> 
                        </div>
                        
                        
                    </div>
                    
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open overlay"></div>
        </div>
        
    </lightning:recordEditForm>
</aura:component>

Here is the controller.js file which takes care of showing and hiding different sections of the wizard.

//buildNewAccountOverrideController.js
({
    doInit : function(component, event, helper) {
        helper.toggleTwoAndThreeSteps(component);
        component.set("v.progressIndicatorFlag", "step1");
    },
    goToStepTwo : function(component, event, helper) {
        helper.toggleOneAndTwoSteps(component);
        component.set("v.progressIndicatorFlag", "step2");
    },
    goToStepThree : function(component, event, helper) {
        helper.toggleTwoAndThreeSteps(component);
        component.set("v.progressIndicatorFlag", "step3");
    },
    goBackToStepOne : function(component, event, helper) {
        helper.toggleOneAndTwoSteps(component);
        component.set("v.progressIndicatorFlag", "step1");
    },
    goBackToStepTwo : function(component, event, helper) {
        helper.toggleTwoAndThreeSteps(component);
        component.set("v.progressIndicatorFlag", "step2");
    },
    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully."
        });
        toastEvent.fire();
    }
})

This is the respective helper.js files that has repetitive and utility code.

//buildNewAccountOverrideHelper.js
({
	toggleOneAndTwoSteps : function(component) {
		var stepOne = component.find("stepOne");
        $A.util.toggleClass(stepOne, 'slds-hide');
        var stepTwo = component.find("stepTwo");
        $A.util.toggleClass(stepTwo, 'slds-hide');
	},
    toggleTwoAndThreeSteps : function(component){
        var stepTwo = component.find("stepTwo");
        $A.util.toggleClass(stepTwo, 'slds-hide');
        var stepThree = component.find("stepThree");
        $A.util.toggleClass(stepThree, 'slds-hide');
    }
})

Liked the post? Let me know what you think of it.