Navigate to an Aura Component from another Aura Component

Navigate to an Aura Component from another Aura Component

Lightning Framework is filled with a lot of features and one of them is to navigate between components.

With this article, we will learn how we can navigate between components and pass the attribute data.

Make Your Component URL Accessible

Navigation in Lightning component is not that straight forward and we need to take help from Base lightning components and interfaces.

If you want to navigate to a component, first you need to make that component available to be accessed directly by URL. To do that, you need to implement “lightning:isUrlAddressable” interface in your component.

lightning:isUrlAddressable interface extends the “lightning:hasPageReference” interface in the backend which allows it to access page state through pageRefence attribute. This means you can access the attribute values supplied in page state.

USE LIGHTNING NAVIGATION

Once you make your component URL accessible, you need to use lightning:navigation component to navigate to that particular component.

lightning:navigation component needs a page reference to navigate to another component, record page, object page or web page. Below is an example page reference object to navigate to another aura component:

var pageReference = {
type: 'standard__component',
attributes: {
componentName: 'c__CustomComponentName',
},
state:{

"c__attributeName" : "attribute value here"
}
};
  • In the above example, page reference type is “standard__component” which we need to use for component navigation.
  • attribute contains the component name proceeded with namespace you want to navigate to. In our case, ‘c’ is the namespace.
  • state defines the attributes you need to pass to another component.

Usage Example

In our example, we will be developing 2 components, one with “lightning:isUrlAddressable” interface where we will redirect. This component will edit the record which it receives from another component while navigation.

Another component will use “lightning:navigation” component to redirect to the first component and will pass the object name and record id to edit.

Component – UrlAddressableComponent

https://gist.github.com/f3c25f46d59a8ffa43919fc80237b680

Controller – UrlAddressableComponent

https://gist.github.com/ed2d0f2f23432414804e4a15d089683d

Component – NavigatorComponent

https://gist.github.com/7171d12d58db2ccd358980a863fad246

Controller – NavigatorComponent

https://gist.github.com/497e74b5dafcbb7eb4db231b409e77a5

Server Controller – AccountController

https://gist.github.com/016db36d77f6378ff4246457d1ce1929

Output

Check out the output of above code:

 

Check out more

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 4 Comments

  1. Avatar

    Hey Manish,

    I understand this only works with 2 different components and not with flexipage. I am trying to navigate to a wrapper component which is emedded in a flexipage and I am passing the ID but pageReference is returning null everytime. Any advice how I can deal with this? Any alternates? I cant change the wrapper component , somehow I need to make sure it gets the ID.

    Thanks
    Manju

    1. Avatar

      You can use “standard__navItemPage” page reference, and pass your flexipage tab name.
      Example:

      {
      type: 'standard__navItemPage',
      attributes: {
      apiName: 'MyCustomTabName'
      }
      }

    2. Avatar

      Thank you for making the blogs,videos and interview questions and encouraging to learn more and more . Glad to meet you in BLRDEVX. you are simply superb!

  2. Avatar

    Hi,
    I have similar requirement it works fine for Desktop but on mobile salesforce app, it does not change the record id and keeps opening the same record. I have tried aura:valuechange event has well on pagereference attribute but no success.

Leave a Reply

Close Menu