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.
