LWC Navigation From One page To Other in Salesforce Communities

In Salesforce, sometimes we need to work on a community and to build a custom functionality using different frameworks like Lightning component, Lightning web component, or Visualforce page.

In this article, we will see how we can achieve navigation in communities by using lightning components or LWC to a different page or a record page and why do we need it?

Web developers are already familiar with the basic navigation in HTML using an anchor and specifying the path in the href attribute, well we can use that too in communities.

Ex — Suppose we want to navigate from the Home page to profile, So what we just need to do here is to specify the correct path.

<a href="otherpage1/">Link</a>

This is an easy way to do it but what if you want to go to another page that is accessible from the Home page but not from the current page. You can still achieve it by using small trick–

<a href="../otherpage2/">Link</a>

Using .. to navigate backward.

Using anchor tags in communities for navigation is an easy way to navigate but it is not feasible as URLs may be different in different orgs. So to make it dynamic we use lightning navigation in lightning components and web components in which we only need to specify page type and name.

1. Navigating to a standard record page

Component-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="url" type="String"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<!—Lightning Navigation-->
<lightning:navigation aura:id="navService"/>
<a href="{!v.url}" onclick="{!c.handleClick}">Link</a>
</aura:component>

Javascript -

({
  init : function(cmp, event, helper) {
  var navService = cmp.find("navService");
  var pageReference = {
  type: 'standard__recordPage',
  attributes: {
   pageName: "profile",
   recordId: "userId",//set userId here
   actionName: "view"
 }
};
cmp.set("v.pageReference", pageReference);
 // Set the URL on the link or use the default if there's an error
 var defaultUrl = "#";
 navService.generateUrl(pageReference)
 .then($A.getCallback(function(url) {
 cmp.set("v.url", url ? url : defaultUrl);
  }), $A.getCallback(function(error) {
  cmp.set("v.url", defaultUrl);
 }));
},
handleClick: function(cmp, event, helper) {
  var navService = cmp.find("navService");
  // Uses the pageReference definition in the init handler
  var pageReference = cmp.get("v.pageReference");
  event.preventDefault();
  navService.navigate(pageReference);
 }
})

We are creating an URL and also an on-click handler. URL for opening the page in the new tab and click handler to open it on the same page.

2. Navigating to a community page –

Javascript — Update code accordingly

event.preventDefault();
var navService = component.find("navService");
var pageReference = {
 type: "standard__namedPage",
 attributes: {
  pageName: "some-page-name"
 },
 state: {
  bingo: true,
  answer: 42,
  tango: "double"
 }
};
//using state – to transfer data in json format from one page to another.
sessionStorage.setItem('localTransfer', JSON.stringify(pageReference.state));
navService.navigate(pageReference);

You can get JSON data in other page components using the following code –

var localStuff = sessionStorage.getItem(‘localTransfer’);
if (localStuff) {
  var state = JSON.parse(localStuff);
}

Conclusion –

Now you know why we need a standard navigation service rather than doing the hard coding in the anchor tag.

This reduces the risk of failure when deploying the component from sandbox to production or any other org because we don’t need to set the URL according to the org. Everything will be handled by Lightning navigation.