4

I am trying to build navigation from one component to another in a Lightning application. Following this answer How to set up views and navigation in Lightning? got me working with one exception, the new page doesn't seem to be in the Salesforce1 navigation context, there is no back arrow when the second component is loaded.

Am I missing something simple? Sure feels like I am.

Improve this question
3

This can now be accomplished via lightning:navigation documented here.

Summary

The target/ to component must implement lightning:isUrlAddressable interface and the source/ from component needs to include lightning:navigation, generate URL for a given pageReference (in this case to a custom component) and finally call the navigate method with that pageReference.

Here is a sample:

Target/ To Component

Component - myTarget.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,lightning:isUrlAddressable">
    <lightning:card iconName="standard:settings" title="Navigation Example">
        <lightning:formattedText class="slds-p-left_small" value="This is your target component."/>
    </lightning:card>
</aura:component>

Source/ From Component

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate to Target Component" onclick="{!c.navigate}" />
</aura:component>

Controller JS

({
    navigate : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__myTarget"
            }, 
            "state": {}
        };
        navService.navigate(pageReference);
    }
})
Improve this answer
2

Found it.. for those looking for this answer.. 

navigateToRollCall : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:AttendanceRollCall",
            componentAttributes: {
                programId: component.get("v.program.Id")
            }
        });
    evt.fire();    
}
Improve this answer
  • Hi @Troy, I tried it and nothing happens. The "evt" comes up as null after $A.get("e.force:navigateToComponent"). May I ask where you've found documentation for this ? – Rohit Kunal Apr 2 '15 at 5:48
  • 7
    This doesn't appear to be working now - according to Salesforce it was never officially supported. – Bob Buzzard Jun 3 '15 at 7:35
  • @Bob Buzzard. What is your other way to solve that ? – Danryl Tigol Carpio Aug 25 '15 at 3:15
1

In Summer 15, e.force:navigateToComponent does not work unless the target component is already loaded. I worked around this by embedding the target component in the source component in an <aura:if isTrue="{!false}">.

Improve this answer
  • Can you give me an example how will you do that ? – Danryl Tigol Carpio Aug 25 '15 at 1:27
  • For the controller Troy gave, you would have to add this to your component: <aura:if isTrue="{!false}"><c:AttendanceRollCall/></aura:if> – Jesper Kristensen Aug 27 '15 at 19:27
0

From my reply in the thread below:

JavaScript source is not documentation, and does not indicate support. Please refer to the docs for the official API. Use of unsupported components, events, or APIs is a violation of the terms of service, and your code may break in a release, including patch.

Improve this answer
-1

The event(force:navigateToComponent) can be found in app.js which is used in Salesforce1 internally. However no docs introduce it until now(Spring '15).

Definition details,

{
    "$descriptor$": {
        "prefix": "markup", 
        "$namespace$": "force", 
        "name": "navigateToComponent", 
        "$qualifiedName$": "markup://force:navigateToComponent"
    }, 
    "$superDef$": {
        "$descriptor$": {
            "prefix": "markup", 
            "$namespace$": "aura", 
            "name": "applicationEvent", 
            "$qualifiedName$": "markup://aura:applicationEvent"
        }, 
        "$superDef$": null, 
        "$attributeDefs$": { }, 
        "type": "APPLICATION"
    }, 
    "$attributeDefs$": {
        "componentDef": {
            "name": "componentDef", 
            "type": "aura://String"
        }, 
        "componentAttributes": {
            "name": "componentAttributes", 
            "type": "aura://Object"
        }, 
        "forceServerDependencies": {
            "name": "forceServerDependencies", 
            "type": "aura://Boolean"
        }, 
        "resetHistory": {
            "name": "resetHistory", 
            "type": "aura://Boolean", 
            "default": false
        }, 
        "ignoreExistingAction": {
            "name": "ignoreExistingAction", 
            "type": "aura://Boolean", 
            "default": false
        }
    }, 
    "type": "APPLICATION"
}
Improve this answer
  • 1
    JavaScript source is not documentation, and does not indicate support. Please refer to the docs for the official API. Use of unsupported components, events, or APIs is a violation of the terms of service, and your code may break in a release, including patch. – Skip Sauls Aug 27 '15 at 4:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.