Navigation in Lightning Component : lightning:navigation

Navigation in Lightning Component : lightning:navigation

After Summer 18, force:navigateToComponent tag will be no longer in use means it will be deprecated.  From now With the lightning:isUrlAddressable interface, you now control which Lightning components can be opened programmatically. You can also now easily capture URL parameters using the v.pageReference attribute and use the parameter values in your component. With the lightning:navigation component, define a pageReference object for navigating to a custom component that implements lightning:isUrlAddressable and set any attributes the component allows.Using lightning:navigation with pageReference provides the following benefits over the now deprecated force:navigateToComponent for standard navigation Lightning apps: –

Control and manage which URL parameters are used in your component.
Future-proofs your apps from changes in URL format.
Generates a user-friendly URL for these components.
A page reference is associated with a particular type, which provides a set of attributes that are applicable for all pages of that type. The following types are supported.

Knowledge Article Page
Lightning Component (must implement lightning:isUrlAddressable)
Named Page
Navigation Item Page
Object Page
Record Page
Record Relationship Page

 

Here is a simple Code for the same

Component Code

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:hasPageReference,lightning:isUrlAddressable"
               access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:navigation aura:id="navigate" />
    <lightning:button label="Lightning Navigate" onclick="{!c.navigate}"
                     variant="brand"/>
    <!-- <lightning:button label="Lightning Navigate" onclick="{!c.navigate}"
                     variant="brand" /> -->
</aura:component>

 

Controller.js Code

({
    doInit : function(component, event, helper) {
       
    },
    navigate : function(component, event, helper) {
        var nagigateLightning = component.find('navigate');
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'MyAccounts'
            }
        };
        nagigateLightning.navigate(pageReference);
    }
})

 

 

Happy learning and Keep sharing 🙂

Resource: –

Salesforce Document

AMIT SINGH

My name is Amit Singh. I am a Certified Salesforce Platform Developer, Admin, and Service Cloud Consultant working as Salesforce Developer @PureSoftware Ltd. I love to solve the queries in Salesforce Success Community and Developer forum. I am in love with Salesforce because of its continuous improvement.

comments
  • hi i am getting this error:

    No COMPONENT named markup://lightning:navigation found :

    • Hi Santosh,

      Are you trying in Developer ORG? Please try in Summer 18 Preview Org or Try in Sandbox. You can try in Developer ORG after 14th June 2018 as Summer 18 will go live on June 14.

      Regards,
      SFDCPanther

    leave a comment

    Create Account



    Log In Your Account