Dynamic Navigation in Lightning Napili Salesforce Communities

September 27, 2016

 

 

 

If you’re using the popular Napili Template for your Salesforce Community, you are probably familiar with the pre-built navigation menu.

 

But when you look through your options when adding a menu item, none of them appear to be very dynamic, at least at first blush.

 

 

What we’re going to do in this blog, is show you how to create a community page that dynamically redirects your customers to a page that is unique to them. For the sake of having a solid example, we’re going to use their Account Detail page. There are three pieces to this puzzle: a community page, a Lightning Component and an Apex method. Finally, we’ll put all those pieces together to get your customers where they need to go.

 

Piece 1: Create your Community Page

 

Go to your page manager and create a new page. The layout you choose for your page does not matter. This page is just a means to an end. Your customer isn’t actually going to spend time on this page. It’s just a host for the Lightning Component we’ll be creating in the next step. By way of example, let’s call our page ‘My Account’.

 

 

Piece 2: Create your Lightning Component

 

Head over to your Developer console and create a new lightning component called myAccountRedirect. Be sure to check the ‘Lightning Communities Page’. This gives you the ability to add this component to the page you created in the last step.

 

 

 

In the markup of your component, you’ll have these three lines:

 

 


Notice that you are bringing in an Apex Class which we will be creating in the next step. That checkbox gave you forceCommunity:availableForAllPageTypes. You’re going to be using an init event and an init handler called redirectToAccount. Let’s see how that looks. Open the controller for your Lightning Component and replace any code there with this.

 

This init handler the force:navigateToSObject event to send your user to their Account detail page. Your Apex Controller will have a method called getLoggedInUser which detects who is logged in to your community which brings us to the last piece of your puzzle.

 

Piece 3: Apex Controller

 

From your developer console, create an Apex Controller. Be sure the name matches the one you used in the markup of your component.

 

This controller has one AuraEnabled method that returns a User sObject. It uses UserInfo.getUserId() to grab the Id of the currently logged in user. We’re including Contact.AccountId in our query and that is what we used in our component’s controller to navigate to your customer’s account detail page.

 

Putting it all together

 

Now that you have all your pieces, it’s time to put them all together and solve your puzzle. You’ve already connected our Apex Class to our component using controller=”NapiliCommunityController”, your component is already using the return value of that method in the init handler. But your component isn’t doing any good just hanging around. You have to put it on your community page. Head back to the Community Builder and edit your My Account page. Drag your new custom component on  to that page.

 

 

Finally, edit your navigation menu and add this community page as a menu item.


 

 

To test that everything is working together, log in as one of your customers and click on your new link in the navigation menu. If you keep an eye on the navigation bar of your browser, you’ll see it go to ‘/my-account’ and then go to something like ‘/s/detail/001999999999999AAY’

 

Conclusion

 

This is a simple example on how to dynamically navigate your customer’s Account detail page. But that’s just one example. Using navigateToSobject in conjunction with Apex and SOQL, if you can query for it, you can navigate your users to it.

 

 

Please reload

Recent Posts
Please reload

CRM Science is an award-winning, strategic Salesforce Silver Consulting Partner focused on delivering practical end-to-end solutions to financial services institutions, manufacturing companies, senior living providers, and other industries. We partner with you throughout your Salesforce journey, specializing in developing business processes, implementation across the different Salesforce clouds, and integrating third-party solutions so you can innovate faster, better engage with customers and improve your bottom line with a unified system. 

We are recognized by Salesforce and were awarded the 2016 Partner Innovation Award for Connected Ecosystem, 2017 Partner Innovation Award for Einstein Analytics, 2018 Partner Innovation Award for Lightning Leadership, and 2019 Partner Innovation Award for Community Cloud.

Ready to find the solution to your Salesforce puzzle? Contact us at info@crmscience.com! 

Partner Innovation Award 2018
Partner Innovation Award 2017
Partner Innovation Award 2016
Philadelphia 100 fastest growing companies

Copyright © 2011-2019 CRM Science, Inc. All rights reserved.