How to Set Up Views and Navigation in Lightning?

When building applications in Lightning, setting up views and implementing navigation between them is a common requirement. Let’s explore how you can create views and manage navigation dynamically between components, such as ns:foo and ns:bar.

To achieve this, you can use events to represent navigation actions (e.g., ns:navigateTo). A common approach is to have a container component that dynamically renders the required view based on the event’s parameters. This enables flexibility and reusability, allowing you to maintain a clean and scalable architecture. Here’s a step-by-step explanation with an example implementation.

CRS Info Solutions offers comprehensive Salesforce training in Gurgaon, focusing on practical skills and real-world applications. Enroll now for a free demo and kickstart your Salesforce learning journey.!

Example Implementation

In this example, we’ll create an event-based navigation system. It uses a container component to host views (ns:fooView and ns:barView) and swaps the views dynamically when navigation events are fired.

1. Define the Navigation Event

Create an event named ns:navigateToView to handle navigation between views.

<!-- ns:navigateToView.evt -->
<aura:event type="APPLICATION">
    <aura:attribute name="view" type="String" required="true" />
</aura:event>

Explanation:
This event acts as a global trigger for navigation actions. The view attribute specifies the destination view’s name (e.g., “foo” or “bar”) and is passed to the event handler.

See also: Salesforce OmniStudio Developer Interview Questions

2. Create the Container Component

The container component (ns:navDemo) initializes with a default view (ns:fooView) and listens for navigation events. When an event is fired, it dynamically swaps the current view.

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

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

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

    <!-- Ensures components are loaded for dynamic creation -->
    <aura:if isTrue="false"><ns:barView /></aura:if>
</aura:application>

Explanation:
The container holds a dynamic placeholder (aura:id="content") for the current view. It uses aura:handler to listen for ns:navigateToView events and updates the displayed component when a navigation event is triggered.

The controller handles the logic for dynamically creating and rendering views.

// 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);
            }
        );
    }
});

Explanation:
This controller handles navigation by dynamically creating the target view component using $A.createComponent. It binds the message attribute to ensure data is passed correctly to the new view.

See also: Salesforce CRM Basic Interview Questions

3. Define the Views (fooView and barView)

Each view is a standalone component that interacts with the container and fires navigation events to switch views.

<!-- ns:fooView.cmp -->
<aura:component>
    <aura:attribute name="message" type="String" />
    <div>Using view 'foo': {!v.message}</div>
    <ui:button label="Navigate to bar" press="{!c.navToBar}" />
</aura:component>

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

Explanation:
The fooView component displays the current view and a button to navigate to the barView. When clicked, it fires the ns:navigateToView event with the destination view set to “bar.”

<!-- ns:barView.cmp -->
<aura:component>
    <aura:attribute name="message" type="String" />
    <div>Using view 'bar': {!v.message}</div>
    <ui:button label="Navigate to foo" press="{!c.navToFoo}" />
</aura:component>

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

Explanation:
The barView component mirrors fooView but navigates back to fooView when its button is clicked, demonstrating bidirectional navigation.

See also: Salesforce Identity Management Interview Questions

Alternative Approach

Instead of using events, you can handle navigation by directly setting a facet’s body to dynamically swap views. This is particularly useful in cases where events are unnecessary, such as within tightly coupled components.

// Simple navigation using facets
var fooComponent = "ns:foo";
component.set("v.body", fooComponent);

Explanation:
This simpler method directly replaces the current view by setting the v.body attribute of a facet. It bypasses events, making it ideal for simpler use cases.

Conclusion

Using events for navigation in Lightning offers a scalable and reusable way to manage dynamic views. It keeps components decoupled, making the system easier to extend and maintain. However, in simpler scenarios, directly setting the component body or facets can be a quicker solution. Choose the approach that best fits your application’s complexity and maintainability needs.

CRS Info Solutions offers a detailed Salesforce course for beginners, designed to take you through every stage of the learning process. Their hands-on Salesforce training in Gurgaon focuses on building practical skills, real-world knowledge, and a deep understanding of key concepts. With daily notes, video sessions, interview prep, and scenario-based learning, this course ensures you gain the confidence and expertise needed for Salesforce certification and career advancement.

Enroll in CRS Info Solutions’ Salesforce training to gain expert guidance and prepare for certification, boosting your skills and job prospects for success..!