How Do You Set Up Views and Navigation in Lightning?

How can I create multiple views in Lightning and navigate between them? For example, if I have two components, ns:foo and ns:bar, how can I implement a button in each component that allows me to switch to the other component or render it in place of the current one?

Answer:

In Lightning (Aura), the best practice for managing multiple views and navigation is to use a combination of events and a container component. Rather than trying to directly switch components within each individual view, you create a higher-level container that controls which view is displayed. Navigation is then modeled as events, which can be either application-scoped or component-scoped, depending on your use case.

You can create an application-scoped event such as ns:navigateToView that contains attributes like the name of the destination view. This event can then be handled by the container component to dynamically replace the content of a facet or body attribute with the target component. This approach allows you to maintain bidirectional data binding and swap components cleanly.

Here is a conceptual example:

Application: ns:navDemo.app

<aura:application>
    <aura:attribute name="message" type="String" default="Hello"/>
    <aura:handler event="ns:navigateToView" action="{!c.navigateToView}"/>

    The message: <ui:inputText value="{!v.message}" updateOn="keyup"/>

    <div aura:id="content">
        <ns:fooView message="{!v.message}"/>
    </div> 

    <!-- Workaround to allow dynamic creation of components -->
    <aura:if isTrue="false"><ns:barView/></aura:if>
</aura:application>

<aura:application>
    <aura:attribute name="message" type="String" default="Hello"/>
    <aura:handler event="ns:navigateToView" action="{!c.navigateToView}"/>

    The message: <ui:inputText value="{!v.message}" updateOn="keyup"/>

    <div aura:id="content">
        <ns:fooView message="{!v.message}"/>
    </div> 

    <!-- Workaround to allow dynamic creation of components -->
    <aura:if isTrue="false"><ns:barView/></aura:if>
</aura:application>

Controller: ns:navDemoController.js

({
    navigateToView : function(component, event, helper) {
        var destination = "ns:" + event.getParam("view") + "View";

        $A.createComponent(destination, 
            { message: component.get("v.message") }, 
            function(view) {
               var content = component.find("content");
               content.set("v.body", view);
        });
    }
})

({
    navigateToView : function(component, event, helper) {
        var destination = "ns:" + event.getParam("view") + "View";

        $A.createComponent(destination, 
            { message: component.get("v.message") }, 
            function(view) {
               var content = component.find("content");
               content.set("v.body", view);
        });
    }
})

Event: ns:navigateToView.evt

<aura:event type="APPLICATION">
    <aura:attribute name="view" type="String" required="true"/>
</aura:event>

<aura:event type="APPLICATION">
    <aura:attribute name="view" type="String" required="true"/>
</aura:event>

Foo Component: ns:fooView.cmp

<aura:component implements="ns:view">
    <div>Using view 'foo': {!v.message}</div>
    <ui:button label="Navigate to bar" press="{!c.navToBar}"/>
</aura:component>

<aura:component implements="ns:view">
    <div>Using view 'foo': {!v.message}</div>
    <ui:button label="Navigate to bar" press="{!c.navToBar}"/>
</aura:component>

Foo Controller: ns:fooViewController.js

({
    navToBar : function(component, event, helper) {
        $A.get("e.ns:navigateToView").setParams({view: "bar"}).fire();
    }
})

({
    navToBar : function(component, event, helper) {
        $A.get("e.ns:navigateToView").setParams({view: "bar"}).fire();
    }
})

Bar Component: ns:barView.cmp

<aura:component implements="ns:view">
    <div>Using view 'bar': {!v.message}</div>
    <ui:button label="Navigate to foo" press="{!c.navToFoo}"/>
</aura:component>

<aura:component implements="ns:view">
    <div>Using view 'bar': {!v.message}</div>
    <ui:button label="Navigate to foo" press="{!c.navToFoo}"/>
</aura:component>

Bar Controller: ns:barViewController.js

({
    navToFoo : function(component, event, helper) {
        $A.get("e.ns:navigateToView").setParams({view: "foo"}).fire();
    }
})

({
    navToFoo : function(component, event, helper) {
        $A.get("e.ns:navigateToView").setParams({view: "foo"}).fire();
    }
})

In this setup, the navigation is handled entirely via the ns:navigateToView event. The container (ns:navDemo.app) listens for the event and dynamically swaps the v.body of the content div with the requested component. Each view (foo and bar) contains a button that triggers the event to switch to the other view. Using $A.createComponent() ensures that all bindings and attributes are preserved when swapping components.

This approach is scalable and flexible. For example, if you want to manage multiple simultaneous facets like a header, content area, and footer, you can replace multiple facets dynamically instead of just the body. You can also adapt this pattern to a tabbed interface by using component-scoped events for child views orchestrated by a parent component.

Overall, the combination of a container component and event-driven navigation provides a clean and maintainable way to manage multiple views in Lightning. It keeps your navigation logic centralized, reduces tight coupling between components, and allows for dynamic, data-bound view swapping.

Real-Time Project-Based Salesforce Course to Kick Start Your Career

Our Salesforce Course is designed to provide you with a deep understanding of the Salesforce platform, equipping you with the essential skills to succeed in the CRM field. The program covers important modules such as Salesforce Admin, Developer, and AI, blending theory with hands-on practice. You’ll gain practical experience through real-world projects and assignments, enabling you to solve complex business challenges using Salesforce solutions. Our expert instructors ensure that you gain both technical proficiency and relevant industry knowledge to thrive within the Salesforce ecosystem.

Beyond technical skills, our Salesforce training in Mumbai offers personalized mentorship, exam preparation, and interview coaching to enhance your career prospects. You’ll have access to comprehensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be fully prepared for certification exams and equipped with the problem-solving skills that employers seek. Start your Salesforce journey with us and unlock a world of career opportunities. Enroll for a Free Demo now!