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
Hari N 14Hari N 14 

how to navigate from component to another component

Hi Everyone,
how to navigate from component to another component in lightning app?
Pleae provide me code structure, it will be great help for me.

Thanks in Advance

Thanks & Regards
Best Answer chosen by Hari N 14
Akhil AnilAkhil Anil
Hi Hari,

Refer the below example. 

Here I have got two components named, Main.cmp and C1.cmp. You can navigate from Main.cmp to C1.cmp using the below snippets.


Main.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    
    <ui:button label="Navigate to C1" press="{!c.Navigate}"/>
    
    {!v.body}
	
</aura:component>

MainController.js 
({
	Navigate : function(component, event, helper) {
         $A.createComponent(
            "c:C1",
            {
                 
            },
            function(newCmp){
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(newCmp);
                    component.set("v.body", body);
                }
            }
        );	        
		
	}
})


C1.cmp 
<aura:component >
    
    Component C1 Successfully Loaded ! ! !
	
</aura:component>


Kindly mark it as an answer if that solves your purpose.

 

All Answers

NagaNaga (Salesforce Developers) 
Hi Hari,

Please check the below code for more information

User-added image
This is a useful link too

Best Regards
Naga Kiran
Hari N 14Hari N 14
Hi Naga,
I am getting error, i.e., "undefined:setParams"
Can u please help out in this?
Akhil AnilAkhil Anil
Hi Hari,

Refer the below example. 

Here I have got two components named, Main.cmp and C1.cmp. You can navigate from Main.cmp to C1.cmp using the below snippets.


Main.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    
    <ui:button label="Navigate to C1" press="{!c.Navigate}"/>
    
    {!v.body}
	
</aura:component>

MainController.js 
({
	Navigate : function(component, event, helper) {
         $A.createComponent(
            "c:C1",
            {
                 
            },
            function(newCmp){
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(newCmp);
                    component.set("v.body", body);
                }
            }
        );	        
		
	}
})


C1.cmp 
<aura:component >
    
    Component C1 Successfully Loaded ! ! !
	
</aura:component>


Kindly mark it as an answer if that solves your purpose.

 
This was selected as the best answer
Hari N 14Hari N 14

Hi Akhil
Thanq so much for ur help.
I have one more requirement. Please help me in this.
After navigating to component-1 again I am navigting to main component.
But in this process, It is navigating like infinite loop. Its not navigating from one fresh page to another fresh page.

Please help out me how to achieve it.

Thanks in Advance.
 
Akhil AnilAkhil Anil
Hi Hari,

You need to use events for the requirement that you are trying to achieve. Try writing an event for the same and let me know if you get stuck.
 
Hari N 14Hari N 14
Hi Akhil,
Please tell me which events I need to write and on which component I need to write.

Thanks & Regards
Hari

 
Rowan ChristmasRowan Christmas
Thanks for the answer on this. In addition I'm looking for a way to direct to the "native" object page in the Salesforce1 app (I want to it render in Lightning, not Classic).

Calling: https://domain.salesforce.com/OBJECT_ID works, but takes me to a Classic page inside the mobile app. Not ideal.

I was hoping that 
​ sforce.one.navigateToSObject("a0E61000000pZcIEAU");
or 
$A.sforce.one.navigateToSObject("a0E61000000pZcIEAU");

Would work... but I get the error:
  
Uncaught error in $A.run() : undefined is not an object (evaluating '$A.sforce.one')

Any advice on how to accmplish both 1) navigating the native page and 2) using the sforce.one API in a lightning componet are much appreciated.