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
Laurie DrewLaurie Drew 

Trying to open a lightning component from another lightning component on button click

I have 2 lightning components, the first is a simple search screen with 1 field for data entry, then a button 'Advanced Search' when this button is clicked I want to open a second lightning component that lists more detailed input screens to filter down the search.  How can I open the second component when I click the button.  Here is the code I have so far that is not working:

Component 1:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="custSearch" type="String" default=""/>


<lightning:input label="Name, Phone Number, Email" name="custSearch" value= "{!v.custSearch}" />

<lightning:button label="Advanced Search" onclick="{!c.CustomerAdvSearch}"></lightning:button>

</aura:component>

Cmp 1 Controller:

({
    CustomerAdvSearch : function(cmp, evt, hlpr) {
        console.log('Enter Here');
        var evt = $A.get("e.force:navigateToComponent");
        console.log('Event '+evt);
        var accountFromId = component.get("v.recordId");
        evt.setParams({
            componentDef  : "c:CustomerAdvSearch" ,
            componentAttributes : {
               
            }
        

        });
      
        evt.fire();
    }      
})


Component 2:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <!-- Attributes -->
    <aura:attribute name="lastName" type="String" default=""/>
    <aura:attribute name="firstName" type="String" default=""/>
    <aura:attribute name="eMail" type="String" default=""/>
    <aura:attribute name="phone" type="String" default=""/>
    <aura:attribute name="streetAddress" type="String" default=""/>
    <aura:attribute name="zipCode" type="String" default=""/>
    <aura:attribute name="cctype" type="String[]" default=" MMC, PLC" />
    <aura:attribute name="fourDigits" type="String" default=""/>
    <aura:attribute name="primeStr" type="String[]" default=" 1, 2" />
    <aura:attribute name="crdNumber" type="String[]" default=" 1, 2" />
    
    <lightning:input label="Last Name" name="LastName" value= "{!v.lastName}" />
    <lightning:input label="First Name" name="FirstName" value= "{!v.firstName}" />
    <lightning:input label="Email" name="Email" value= "{!v.eMail}" />
    <lightning:input label="Phone" name="Phone" value= "{!v.phone}" />
    <lightning:input label="Street Address" name="StreetAddress" value= "{!v.streetAddress}" />
    <lightning:input label="Zip Code" name="ZipCode" value= "{!v.zipCode}" />
    <lightning:select label="CC Type ?" name="Cctype" value="{!v.cctype}">
        <aura:iteration items="{!v.cctype}" var="cct">
            <option value="{!cct}" text="{!cct}" />
        </aura:iteration>
    </lightning:select>    
    <lightning:input label="Last Four" name="FourDigits" value= "{!v.fourDigits}" />
    <lightning:input label="Primary" name="PrimeStr" value= "{!v.primeStr}" />
    <lightning:input label="Card Number" name="CrdNumber" value= "{!v.crdNumber}" />        
    <lightning:button label="Advanced Search" onclick="{!c.CustomerAdvSearch}"></lightning:button>
    
</aura:component>

Thank you in advance for any help that can be provided!
Best Answer chosen by Laurie Drew
Khan AnasKhan Anas (Salesforce Developers) 
Laurie, please implement lightning:isUrlAddressable in the second component also to which you want to navigate. And in pageReference attribute, you need to mention the name of the component to which you want to navigate.

 "componentName": "c__CustomerSync"  // c__YourComponentName -> component name to which you want to navigate.

Also, please double-check your code for spelling and case sensitivity as lightning is a case sensitive.​

Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Laurie,

Greetings to you!

You can use lightning:navigation component to navigate to a given pageReference or to generate a URL from a pageReference.

https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

Below is the sample code which 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"/>
    
    <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);
    }   
})

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
Laurie DrewLaurie Drew
Hi Khan, 

Thank you for the response, I tried it in my code but the button does not respond, can you see what I am missing?

Component 1:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="selTabId" type="string" default="1" />
    <aura:attribute name="PageHeading" type="String" default="mPerks Account Overview"/>
    <aura:attribute name="firstName" type="string" default="false"/>
    <aura:attribute name="lastName" type="string" default="false"/>
    <aura:attribute name="Account" type="string" default="false"/>
    <aura:attribute name="eMail" type="string" default="false"/>
    <aura:attribute name="zipCode" type="string" default="false"/>
    <aura:attribute name="homeStore" type="string" default="false"/>
    <aura:attribute name="activationStatus" type="string" default="false"/>
    <aura:attribute name="enrollmentDate" type="datetime" default="false"/>
    <aura:attribute name="acctActivationDate" type="datetime" default="false"/>
    <aura:attribute name="url" type="String"/>
    <aura:attribute name="pageReference" type="Object"/>
    
    <lightning:tabset selectedTabId="{!v.selTabId}" >
        
        <lightning:tab label="Overview" id="1">
            
            <div class="slds-text-heading--large"><b>{!v.PageHeading}</b></div>
            <br/><br/>
            <div class= "slds-size--2-of-8" >
            <lightning:input label="First Name" name="firstName" value="Jane" /> <!--{!v.firstName}-->
            <br/>
            <lightning:input label="Last Name" name="lastName" value="Doe" /> <!--{!v.lastName}-->
            <br/>
            <lightning:input label="mPerks" name="mPerks" value="123-456-7890" /> <!--{!v.mPerks}-->
            <br/>
            <lightning:input label="Email" name="eMail" value="name@email.com" /> <!--{!v.eMail}-->
            <br/>
            <lightning:input label="Zip Code" name="zipCode" value="49255" /> <!--{!v.zipCode}-->
            <br/>
            <lightning:input label="Home Store" name="homeStore" value="0" /> <!--{!v.homeStore}-->
            <br/>
            <lightning:input label="Activation Status" name="activationStatus" value="Active" /> <!--{!v.activationStatus}-->
            <br/>
            <lightning:input label="Enrollment Date" name="activationStatus" value="September 23, 2014 12:00 AM" /> <!--{!v.activationStatus}-->
            <br/>
            <lightning:input label="Account Activation Date" name="acctActivationDate" value="September 23, 2014 12:00 AM" /> <!--{!v.activationStatus}-->
            <br/>   
            </div> 
            
            <lightning:navigation aura:id="navService"/>
            <lightning:button label ="Advanced" onclick="{!c.handleClick}"/>
            
            
            
        </lightning:tab>
        
        <lightning:tab label="Rewards" id="2">
             
        </lightning:tab>
        
        <lightning:tab label="Coupons" id="3">
           
        </lightning:tab>
        
        <lightning:tab label="Transactions" id="4">
           
        </lightning:tab>
        
        <lightning:tab label="Preferences" id="5">
           
        </lightning:tab>
        
        <lightning:tab label="Customer Satisfaction" id="6">
           
        </lightning:tab>
   
    </lightning:tabset>
</aura:component>

Controller:

({
    init : function(component, event, helper) {
    },
        handleClick : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__CustomerSync"  // c__YourComponentName
            }
        }
        
        navService.navigate(pageReference);
    }
    
    
})
 
Khan AnasKhan Anas (Salesforce Developers) 
Laurie, please implement lightning:isUrlAddressable in the second component also to which you want to navigate. And in pageReference attribute, you need to mention the name of the component to which you want to navigate.

 "componentName": "c__CustomerSync"  // c__YourComponentName -> component name to which you want to navigate.

Also, please double-check your code for spelling and case sensitivity as lightning is a case sensitive.​

Regards,
Khan Anas
This was selected as the best answer
Laurie DrewLaurie Drew
Button still does not do anything, here is the updated Component 1:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    <aura:attribute name="selTabId" type="string" default="1" />
    <aura:attribute name="PageHeading" type="String" default="mPerks Account Overview"/>
    <aura:attribute name="firstName" type="string" default="false"/>
    <aura:attribute name="lastName" type="string" default="false"/>
    <aura:attribute name="card" type="string" default="false"/>
    <aura:attribute name="eMail" type="string" default="false"/>
    <aura:attribute name="zipCode" type="string" default="false"/>
    <aura:attribute name="homeStore" type="string" default="false"/>
    <aura:attribute name="activationStatus" type="string" default="false"/>
    <aura:attribute name="enrollmentDate" type="datetime" default="false"/>
    <aura:attribute name="acctActivationDate" type="datetime" default="false"/>
    
    <lightning:tabset selectedTabId="{!v.selTabId}" >
        
        <lightning:tab label="Overview" id="1">
            
            <div class="slds-text-heading--large"><b>{!v.PageHeading}</b></div>
            <br/><br/>
            <div class= "slds-size--2-of-8" >
            <lightning:input label="First Name" name="firstName" value="Allie" /> 
            <br/>
            <lightning:input label="Last Name" name="lastName" value="Smith" /> 
            <br/>
            <lightning:input label="card" name="card" value="931-237-0289" /> 
            <br/>
            <lightning:input label="Email" name="eMail" value="jssj@aol.com" /> 
            <br/>
            <lightning:input label="Zip Code" name="zipCode" value="49255" /> 
            <br/>
            <lightning:input label="Home Store" name="homeStore" value="0" />
            <br/>
            <lightning:input label="Activation Status" name="activationStatus" value="Active" /> 
            <br/>
            <lightning:input label="Enrollment Date" name="activationStatus" value="September 23, 2014 12:00 AM" />            <br/>
            <lightning:input label="Account Activation Date" name="acctActivationDate" value="September 23, 2014 12:00 AM" /> 
            <br/>   
            </div> 
            
            
            <lightning:navigation aura:id="navService"/>
            <lightning:button label ="Advanced" onclick="{!c.handleClick}"/>
            
            
            
            
            
        </lightning:tab>
        
        <lightning:tab label="Rewards" id="2">
             
        </lightning:tab>
        
        <lightning:tab label="Coupons" id="3">
           
        </lightning:tab>
        
        <lightning:tab label="Transactions" id="4">
           
        </lightning:tab>
        
        <lightning:tab label="Preferences" id="5">
           
        </lightning:tab>
        
        <lightning:tab label="Customer Satisfaction" id="6">
           
        </lightning:tab>
   
    </lightning:tabset>
</aura:component>

I have updated the controller to this:

({
    init : function(component, event, helper) {
    },
        handleClick : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "CustomerSync": "c__CustomerSync"  
            }
        }
        
        navService.navigate(pageReference);
    }
    
    
})

Updated Component 2 to this

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >
    
    
    
    
    <div class="slds-align--absolute-center">
    <div class= "slds-size--2-of-8" >
            <br/><br/>
            <lightning:input label="First Name" name="firstName" value="Allie" /> 
            <br/>
            <lightning:input label="Last Name" name="lastName" value="Smith" /> 
            <br/>
            <lightning:input label="Card" name="card" value="931-237-0289" /> 
            <br/>
            <lightning:input label="Email" name="eMail" value="jssj@aol.com" /> 
            <br/>
            <lightning:input label="Zip Code" name="zipCode" value="49255" /> 
            <br/>
            <lightning:input label="Home Store" name="homeStore" value="0" /> 
            <br/>
            <lightning:input label="Activation Status" name="activationStatus" value="Active" /> 
            <br/>
            <lightning:input label="Enrollment Date" name="activationStatus" value="September 23, 2014 12:00 AM" /> 
            <br/>
            <lightning:input label="Account Activation Date" name="acctActivationDate" value="September 23, 2014 12:00 AM" /> 
            
     </div>    
</aura:component>

Verified that all the spelling and case is correct in all, but still nothing out of the button click.....

I really appreciate you helping me figure this out!
Khan AnasKhan Anas (Salesforce Developers) 
I think you are viewing the lightning component through the lightning app from preview. These navigation resources are supported only in Lightning Experience, Lightning Communities, and the Salesforce mobile app. It will not work in Lightning Application (.app ) and Lightning Out. Include your component in the Lightning Experience pages (through a lightning app builder) and try.
Laurie DrewLaurie Drew
I have added Component 1 to a lightning tab and am viewing it by going into an actual record and clicking on the tab.  When I click the button, nothing happens.
Khan AnasKhan Anas (Salesforce Developers) 
Please add both components to a lightning tab and implement lightning:isUrlAddressable in both components.