Lightning components navigation re-defined in Winter’17 ! Woooo-hooooo !

So, here comes one of my most favorite features of Winter’17. One which I have been looking forward since a very loooooong time. Finally it’s here. A native lightning event that will allow you to navigate from one lightning component to another. Traditionally, to get this done, you had to write your own lightning event which was pretty tough. I mean it’s like catching your nose from behind. This event will come as a big time relief to all those who have been wracking their heads to navigate from one component to another.

So, below is the note on this event right from the Release note of winter’17

The force:navigateToComponent event enables you navigate to another component easily within Salesforce1 and Lightning Experience.
Note: This release contains a beta version of force:navigateToComponent that’s production quality but has known limitations. This feature isn’t generally available unless or until Salesforce announces its general availability in documentation or in press release or public statements. We can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features. You can provide feedback and suggestions for this feature in the IdeaExchange. To navigate from a Lightning component to another, specify the component name using componentDef. 

Link to Release note: https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_lightning_navigateToComponent.htm

So, the sad part is that this event is still in the “beta” mode, but I am hopeful that Salesforce will make it generally available very soon. Let’s hope for the best !

Now, let’s get our hands dirty with a small snippet that will demo how this thing works.

I will simply define two components here named as “MyComponent1” and “MyComponent2” and using this event we will see how we can traverse back and forth seamlessly without any hassles.

So, below is the code snippet for MyComponent1 and it’s controller.

MyComponent1.cmp

<aura:component implements="force:appHostable" access="global" >
<pre>

Hit the below button to go to component 2 <br/>

</pre>

<lightning:button variant="brand" label="Go to Component 2" onclick="{!c.NavigatetoC2}" />

</aura:component>

 

MyComponent1Controller.js

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

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

So, on the click of the button, it will just fire the NavigatetoC2 button and fire the component navigation event and jump to MyComponent2.

On a similar note, below are the code snippets for “MyComponent2”

MyComponent2.cmp

<aura:component implements="force:appHostable" access="global" >
<pre>
Hi there ! You have landed in Component 2 ! <br/>

Wanna go back ? <br/>

Hit the below button ! <br/>

</pre>

<lightning:button variant="brand" label="Go to Component 1" onclick="{!c.NavigatetoC1}" />

</aura:component>

 

MyComponent2Controller.js

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

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

You can just re-use the same event in the second component to traverse back to the original component.

You just have to add the “MyComponent1” to a lightning tab and it’s all set as seen below.

 

 

 

 

 

 

 

 

 

 

 

 

 

Happy using lightning !