Apex Code Development You need to sign in to do that
Don't have an account?
force:navigateToComponent is not working
Hello Everyone,
I'm trying to use force:navigateToComponent, but its not working. Here is my code:
<pre>
({
NavigatetoComp : function(component, event, helper) {
console.log('Enter Here');
var evt = $A.get("e.force:navigateToComponent");
console.log('evt'+evt);
evt.setParams({
componentDef: "c:MyComponent2",
//componentAttributes :{ }
});
evt.fire();
}
})
</pre>
It throws following error:
Can any body tell why is it so?
Thanks In Advance
Aakanksha Singh
I'm trying to use force:navigateToComponent, but its not working. Here is my code:
<pre>
({
NavigatetoComp : function(component, event, helper) {
console.log('Enter Here');
var evt = $A.get("e.force:navigateToComponent");
console.log('evt'+evt);
evt.setParams({
componentDef: "c:MyComponent2",
//componentAttributes :{ }
});
evt.fire();
}
})
</pre>
It throws following error:
Can any body tell why is it so?
Thanks In Advance
Aakanksha Singh
maybe you are try it with lightning app.app, its support only with salesforce1 or Lightning Experience.
so add your component to the salesforce1 or Lightning Experience.tab
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_add_cmp_lex.htm
and then try this again
thanks let me inform if it helps you
http://sfdcmonkey.com
All Answers
According to the Lightning Components Developer Guide(https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_navigateToComponent.htm), this functionality requires that the target component's access attribute be set to "global". It also notes that it is only available in Lightning Experience and Salesforce1.
May I request you to please confirm where exactly you are trying to navigate the above component so that we can understand better and do the needful accordingly.
Regards,
Nagendra.
Hello,
I was trying the code metioned in the blog(link is mentioned below), and it is throwing the above mentioned error.
https://force-base.com/2016/11/06/lightning-components-navigation-re-defined-in-winter17-woooo-hooooo/
Please go through it.
Regards
Aakanksha Singh
maybe you are try it with lightning app.app, its support only with salesforce1 or Lightning Experience.
so add your component to the salesforce1 or Lightning Experience.tab
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_add_cmp_lex.htm
and then try this again
thanks let me inform if it helps you
http://sfdcmonkey.com
Its still not working.
Thanks
Thanks to everyone, there was some issue in namin g conventions, which I have resolved myself :)
Hope this hepls..
<pre>
Navigate : function(component,event,helper){
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef: "c:MyComponent"
//componentAttributes :{ }
});
evt.fire();
},
</pre>
Thanks
Aakanksha Singh
Thanks :)
https://umangsinghal.wordpress.com/2017/06/11/move-selected-table-values-from-one-component-to-another
I typically use "Harness.app" for development of components but it doesn't work with "navigateToComponent" because of the 'one.app' restriction.
So I created a lightning component bundle, "HarnessTester", which I added as a Tab.
<aura:component access="global" implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes">
<c:componentToTest recordId="00U8E000002o203UAA"/>
</aura:component>
Works a treat!
You should now use a navigation service.
Examples at:
https://gist.github.com/sumugapadman/1afff802eef089c38f0ed233ae0c508d
(Thanks to Sumuga Padman, Developer Support team, Salesforce.com for that one)
see also:
https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/components_navigation.htm
http://bobbuzzard.blogspot.com/2018/05/lightning-component-navigation-in.html
https://rajvakati.com/2018/05/29/navigation-in-lightning-experience-using-pagereference/
And below is my test version where I send a parameter to the second (receiving) component.
Sender.cmp
<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes"
controller="EventRelatedContactsListController"
access="global">
<aura:attribute name="SendMessage" type="String" default = "Send reinforcements - we're going to advance."/>
<lightning:navigation aura:id="launchComponent"/>
<lightning:button variant="brand" label="Launch a component" onclick="{!c.launchComponent}" ></lightning:button>
</aura:component>
SenderController.js
({
launchComponent : function (component, event, helper){
helper.hlpLaunchComponent(component,event);
}
})
SenderHelper.js
({
hlpLaunchComponent: function(cmp,event){
var navService = cmp.find("launchComponent");
console.log(navService);
console.log(cmp.get("v.SendMessage"));
var pageReference = {
"type": "standard__component",
"attributes": {
"componentName": "c__Receiver"
},
"state": {
"c__receivedMessage" : cmp.get("v.SendMessage")
}
};
console.log('navTo: '+ pageReference);
event.preventDefault();
navService.navigate(pageReference);
}//hlpLaunchComponent
})
Receiver Bundle:
Receiver.cmp
<aura:component implements="lightning:isUrlAddressable,force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="receivedMessage" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
received: {!v.receivedMessage}
</aura:component>
ReceiverController.js
({
init: function(cmp, event, helper) {
var pageReference = cmp.get("v.pageReference");
console.log('receiver...');
cmp.set("v.receivedMessage", pageReference.state.c__receivedMessage);
}//init
})
js
----
navigateToComponents: function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:SPC_Support",
componentAttributes: {
}
});
evt.fire();
}
componentA
-------
<lightning:button variant="base" label="Support" onclick="{!c.navigateToComponents}" />
componentB
-----
<div > header<div>
<div>body<div>
any idea please help me in navigating to new component in a new browser tab?????????