Lightning Component Navigation in Salesforce

Sample Code:

ComponentOne.cmp

<aura:component implements="force:appHostable" >

    <aura:attribute name="Txt" type="String" default=""/>
    <div class="slds-box slds-theme_default">
        This is component 1.<br/><br/>
        <lightning:input type="text" value="{!v.Txt}" label="Enter Text : "/><br/><br/>
    <lightning:button variant="brand" label="Navigate" onclick="{!c.navigateToComTwo}"/>
    </div>
    
</aura:component>

ComponentOneController.js

({
    navigateToComTwo : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:ComponentTwo",
            componentAttributes: {    
                Text : component.get("v.Txt")
            }
        });
        evt.fire();
}
})

ComponentTwo.cmp

<aura:component implements="force:appHostable">
    
    <aura:attribute name="Text" type="String" default=""/>
    <div class="slds-box slds-theme_default">
        This is component two.<br/><br/>
        Text is {!v.Text}.<br/><br/>
    <lightning:button variant="brand" label="Back to Component One" onclick="{!c.navigateToComOne}"/>
    </div>
    
</aura:component>

ComponentTwoController.js

({
    navigateToComOne : function(component, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:ComponentOne",
            componentAttributes: {    
            }
        });
        evt.fire();
}
})

Output:


Once you click Navigate button, it navigates to the ComponentTwo.



5 comments:

  1. while using this i am facing error as

    This page has an error. You might just need to refresh it.
    Action failed: c:MyComponent1$controller$navigateToComTwo [Cannot read property 'setParams' of undefined]
    Failing descriptor: {c:MyComponent1$controller$navigateToComTwo}

    ReplyDelete
  2. I'm trying to set this up, but in a community (I am using the implements="force:communities..." The components both display, but the events are not firing. Is there another step I should take to run this in communities?

    ReplyDelete
  3. I am attempting to implement this in communities (implements="force:communities..."). While the components are visible, the events are not firing. Any idea why?

    ReplyDelete