function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
abu saleh khan 8abu saleh khan 8 

Navigate from one component from another component using lightning:navigation

Hi Team,

Kindly help me navigating from one component to another component using lightning:navigation.
Best Answer chosen by abu saleh khan 8
Khan AnasKhan Anas (Salesforce Developers) 
Hi Abu,

Greetings to you!

In standard navigation Lightning apps, you can use the lightning:navigation component to navigate to a custom component that implements lightning:isUrlAddressable.

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="url" type="String"/>
    <aura:attribute name="pageReference" type="Object"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate To Other Component" onclick="{!c.handleClick}"/>
</aura:component>

Controller: 
({
    init : function(cmp, event, helper) {
    },
    
    handleClick : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Insert_Task"  // c__YourComponentName
            }
        }
        
        navService.navigate(pageReference);
    }   
})

To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressableinterface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component. This navigation feature is supported only in Lightning Experience and the Salesforce App.

You need to implement lightning:isUrlAddressable in the component to which you want to navigate.

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi abu saleh,
Please try the given below code with the help of below code you can solve your problem, it may be helpful to you. 

How to use Lightning: navigation to navigate another component :
Use: We use lightning: navigation component to navigating custom component.

Short description: Using lightning:isUrlAddressable ( add new interface in Summer 18 release ) interface, we can handle which Lightning component can be opened. Usually, lightning: navigation component generates a URL and navigates that URL using navigate() function.

For Functionality and Example:

Please follow the below link inside that link you will get simple example and full code by which you can solve your problem.
Link: http://simpluslabs.com/how-to-use-lightningnavigation-to-navigate-another-component/

Another example of Lightning navigation in below link :
Link: https://developer.salesforce.com/forums/?id=906F00000005Gw0IAE

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Khan AnasKhan Anas (Salesforce Developers) 
Hi Abu,

Greetings to you!

In standard navigation Lightning apps, you can use the lightning:navigation component to navigate to a custom component that implements lightning:isUrlAddressable.

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="url" type="String"/>
    <aura:attribute name="pageReference" type="Object"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate To Other Component" onclick="{!c.handleClick}"/>
</aura:component>

Controller: 
({
    init : function(cmp, event, helper) {
    },
    
    handleClick : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Insert_Task"  // c__YourComponentName
            }
        }
        
        navService.navigate(pageReference);
    }   
})

To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressableinterface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component. This navigation feature is supported only in Lightning Experience and the Salesforce App.

You need to implement lightning:isUrlAddressable in the component to which you want to navigate.

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
abu saleh khan 8abu saleh khan 8
Thankyou khan.