Usage Of Lightning Navigation Event

In this blog, I am going to show how to use the different salesforce lightning navigation events. Use one of the navigation events for consistent behavior across Lightning Experience, Salesforce app, and Lightning communities.

force:navigateToComponent 

You can use this system event to  Navigates from one Lightning component to another. To navigate from a Lightning component to another, specify the component name using componentDef. This example navigates to a component c:hello and sets a value on the welcome and message attributes.

hello.cmp
<aura:component >
    <aura:attribute name ="welcome" type="String" default="welcome"/>
    <aura:attribute name ="message" type="String" default="message"/>
    Result -{!v.welcome} -{!v.message}   
</aura:component>

Here is the sample button which navigates to the lightning component on click.

    <lightning:button variant="success" label="Go to Component " title="Go to Component " onclick="{! c.navigateToMyComponent }"/>

Here is the controller action.

 navigateToMyComponent : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:hello",
            componentAttributes: {
                welcome : "welcome" , 
                message :"message"
            }
        });
        evt.fire();
    }
  1. The below code get the System event force:navigateToComponent
 var evt = $A.get("e.force:navigateToComponent");

2. Set the parameters like componentDef ,componentAttributes ,isredirect as shown below

 evt.setParams({
            componentDef : "c:hello",
            componentAttributes: {
                welcome : "welcome" , 
                message :"message"
            }
        });

3. fire the event

        evt.fire();

force:navigateToList

Use this event to  Navigates to the list view specified by listViewId.To navigate to a list view, set the list view ID on the listViewId attribute and fire the event. This example displays the All Opportunities list views for Opportunity on the click of the button.

        <lightning:button variant="success" label="Go to List View " title="Go to List View " onclick="{! c.gotoList }"/>

Here is the controller code

 gotoList : function (component, event, helper) {
        
        var navEvent = $A.get("e.force:navigateToList");
        navEvent.setParams({
            "listViewId": "00B6A0000059kAqUAI",
            "listViewName": null,
            "scope": "Opportunity"
        });
        navEvent.fire();
        
        
    }

force:navigateToObjectHome

Use this event to Navigates to the object home specified by the scope attribute. To navigate to an object home, set the object name on the scope attribute and fire the event. This example displays the home page for an Account object
    <lightning:button variant="success" label="Account Home" title="Account Home" onclick="{! c.navHome }"/>

controller

  navHome : function (component, event, helper) {
        var homeEvent = $A.get("e.force:navigateToObjectHome");
        homeEvent.setParams({
            "scope": "Account"
        });
        homeEvent.fire();
    }

force:navigateToRelatedList

Use this event to Navigates to the related list specified by parentRecordId.To navigate to a related list, set the parent record ID on the parentRecordId attribute and fire the event 

    <lightning:button variant="success" label="Go to RelatedList" title="Go to RelatedList" onclick="{! c.gotoRelatedList }"/>

 

  gotoRelatedList : function (component, event, helper) {
        var relatedListEvent = $A.get("e.force:navigateToRelatedList");
        relatedListEvent.setParams({
            "relatedListId": "Cases",
            "parentRecordId": "0016A00000KpavN"
        });
        relatedListEvent.fire();
    }

force:navigateToSObject

Use this event to  Navigates to an sObject record specified by recordId.To display the record view, set the record ID on the recordId attribute and fire the event.The record view contains slides that display the Chatter feed, the record details, and related information. This example displays the related information slide of a record view for the specified record ID.

    <lightning:button variant="success" label="Go to Opportunity" title="Go to Opportunity" onclick="{! c.navigateSobject }"/>

 

  navigateSobject : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": "0066A0000061ziLQAQ",
            "slideDevName": "related"
        });
        navEvt.fire();
    }

force:navigateToURL

Use this system event to navigate the Relative and absolute URL . Relative and absolute URLs are supported. Relative URLs are relative to the Salesforce mobile web domain and retain navigation history. External URLs open in a separate browser window.

    <lightning:button variant="success" label="Navigate To URL" title="Navigate To Salesforce.com" onclick="{! c.navigateToURL }"/>

 

navigateToURL : function(component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": 'https://www.salesforce.com/' ,
            "isredirect":true ,
        });
        urlEvent.fire();
    }