How to navigate through Lightning Components [Aura]

In this tutorial, I will show you how to navigate through Lightning Components using Lightning Aura Components. In the GIF below you can see the final result.

navigateThroughComponents.cmp

<aura:component implements="flexipage:availableForAllPageTypes" controller="SfWiki_Handler" access="global">

    <aura:attribute name="step" type="String"/>
    <aura:attribute name="showSpinner" type="Boolean" default="true"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- First Page - Attributes -->
    <aura:attribute name="showFirstPage" type="Boolean" default="true"/>
    <aura:attribute name="listOfAccounts" type="Object"/>
    <aura:attribute name="accountColumns" type="Object"/>

    <!-- Second Page - Attributes -->
    <aura:attribute name="showSecondPage" type="Boolean"/>

    <!-- Third Page - Attributes -->
    <aura:attribute name="showThirdPage" type="Boolean"/>
    <aura:attribute name="listOfContacts" type="Object"/>
    <aura:attribute name="contactColumns" type="Object"/>

    <div class="slds-card" style="font-family: 'Open Sans', sans-serif;">

        <!-- Spinner -->
        <aura:renderIf isTrue="{!v.showSpinner}">
            <div class="slds-is-relative slds-m-around_large slds-align_absolute-center" style="min-height: 300px; !important;">
                <lightning:spinner alternativeText="Loading..." variant="brand"/>
            </div>

            <aura:set attribute="else">
                <!-- Header -->
                <div class="slds-card__header slds-p-bottom_small">
                    <header>
                        <lightning:progressIndicator currentStep="{!v.step}" type="path" variant="base">
                            <lightning:progressStep label="First Page" value="1" onclick="{!c.nextPage}"/>
                            <lightning:progressStep label="Second Page" value="2" onclick="{!c.nextPage}"/>
                            <lightning:progressStep label="Third Page" value="3" onclick="{!c.nextPage}"/>
                        </lightning:progressIndicator>
                    </header>
                </div>

                <!-- First Page -->
                <aura:renderIf isTrue="{!v.showFirstPage}">
                    <div class="slds-scrollable_y" style="max-height: 600px; !important;">
                        <lightning:datatable
                                keyField="Id"
                                data="{!v.listOfAccounts}"
                                columns="{!v.accountColumns}"
                                showRowNumberColumn="true"/>
                    </div>
                </aura:renderIf>

                <!-- Second Page -->
                <aura:renderIf isTrue="{!v.showSecondPage}">
                    <div class="slds-p-around_small">
                        <div class="slds-text-align_center slds-container_center" style="font-size: 15px;">
                            <p>This is the second Page</p>
                            <p>Hope you like this tutorial</p>
                            <p style="font-weight: bold; color: red">Sf <span style="font-weight: bold; color: black">Wiki</span></p>
                        </div>
                    </div>
                </aura:renderIf>

                <!-- Third Page -->
                <aura:renderIf isTrue="{!v.showThirdPage}">
                    <lightning:datatable
                            keyField="Id"
                            data="{!v.listOfContacts}"
                            columns="{!v.contactColumns}"
                            showRowNumberColumn="true"/>
                </aura:renderIf>

                <!-- Footer -->
                <footer class="slds-modal__footer slds-align_absolute-center" style="padding: 0.50rem 1rem;">
                    <aura:renderIf isTrue="{!v.showFirstPage}">
                        <lightning:button label="Next" variant="neutral" value="2" onclick="{!c.nextPage}"/>
                    </aura:renderIf>
                    <aura:renderIf isTrue="{!v.showSecondPage}">
                        <lightning:button label="Previous" variant="neutral" value="1" onclick="{!c.previousPage}"/>
                        <lightning:button label="Next" variant="neutral" value="3" onclick="{!c.nextPage}"/>
                    </aura:renderIf>
                    <aura:renderIf isTrue="{!v.showThirdPage}">
                        <lightning:button label="Previous" variant="neutral" value="2" onclick="{!c.previousPage}"/>
                        <lightning:button label="Save" variant="brand" onclick="{!c.nextPage}"/>
                    </aura:renderIf>
                </footer>
            </aura:set>
        </aura:renderIf>

    </div>

</aura:component>

navigateThroughComponentsController.js

({
    doInit: function(component, event, helper) {
        let accountColumns = [
            {label: 'Name', fieldName: 'Name', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Phone', fieldName: 'Phone', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Website', fieldName: 'Website', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Industry', fieldName: 'Industry', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', sortable: false, wrapText: false, hideDefaultActions: true,
                typeAttributes: {minimumFractionDigits: 2, maximumFractionDigits: 2},
                cellAttributes: {alignment: "left"}}
        ];
        component.set("v.accountColumns", accountColumns);

        let contactColumns = [
            {label: 'Name', fieldName: 'Name', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Title', fieldName: 'Title', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Phone', fieldName: 'Phone', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Email', fieldName: 'Email', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true},
            {label: 'Department', fieldName: 'Department', type: 'text', sortable: true, wrapText: false, hideDefaultActions: true}
        ];
        component.set("v.contactColumns", contactColumns);

        let action = component.get("c.getAccounts");
        action.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.listOfAccounts", response.getReturnValue());
            component.set("v.showSpinner", false);
        });
        $A.enqueueAction(action);
    },

    nextPage: function(component, event, helper) {
        helper.setAllStepsToFalse(component);
        let step = event.getSource().get("v.value");
        component.set("v.step", step);

        if(step === "1") {
            component.set("v.showFirstPage", true);
        } else if(step === "2") {
            component.set("v.showSecondPage", true);
        } else if(step === "3") {
            component.set("v.showSpinner", true);
            let action = component.get("c.getContacts");
            action.setCallback(this, function(response) {
                component.set("v.listOfContacts", response.getReturnValue());
                component.set("v.showSpinner", false);
                component.set("v.showThirdPage", true);
            });
            $A.enqueueAction(action);
        }
    },

    previousPage: function(component, event, helper) {
        helper.setAllStepsToFalse(component);
        let step = event.getSource().get("v.value");
        component.set("v.step", step);

        if(step === "1") {
            component.set("v.showFirstPage", true);
        } else if(step === "2") {
            component.set("v.showSecondPage", true);
        }
    },

});

navigateThroughComponentsHelper.js

({
    setAllStepsToFalse: function(component) {
        component.set("v.showFirstPage", false);
        component.set("v.showSecondPage", false);
        component.set("v.showThirdPage", false);
    },
});

SfWiki_Handler.cls

public without sharing class SfWiki_Handler {

    @AuraEnabled
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Phone, Website, Industry, AnnualRevenue FROM Account LIMIT 10];
    }

    @AuraEnabled
    public static List<Contact> getContacts() {
        return [SELECT Id, Name, Title, Phone, Email, Department FROM Contact LIMIT 10];
    }

}

That’s it!

I hope you have enjoyed learning “How to navigate through Lightning Components [Aura]”. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

If you prefer to see the result with Lightning Web Components, here’s the link to it: How to navigate through Lightning Components [LWC].