Navigation Service in Lightning Web Component | All You Need to Know
Use the navigation service lightning/navigation to navigate in Lightning Experience, Lightning Communities, and the Salesforce app.
Only Lightning Experience, Lightning Communities, and the Salesforce app support the lightning/navigation service. Other containers, such as Lightning Components for Visualforce or Lightning Out, do not support it. Even if you access these containers through Lightning Experience or the Salesforce app, this is still true. In LWC, we can navigate to Pages, Records, and Lists by using the navigation services.
There are various navigational choices available.
Basic Navigation
Use the lightning/navigation service to browse to a variety of page kinds, including records, list views, and objects. Open files using the navigation service as well.
The navigation service makes use of a PageReference rather than a URL. A JavaScript object called PageReference describes the page type, its properties, and its current state. Your component is protected from future changes to URL formats by using a PageReference. Additionally, it enables the usage of your component in numerous applications, each of which supports a variety of URL types.
A PageReference is used by navigation services. Page type (String), attributes (Object), and state (Object) are all needed arguments.
Don't forget to check out: What is Salesforce Lightning Web Component and How to Use it?
Use Navigation Service In LWC
To use the navigation feature, follow these steps:
First, we must import the navigation and lightning modules.
import { NavigationMixin } from 'lightning/navigation';
Now, apply the NavigationMixin method to the base class of your component.
export default class MyCustomElement extends NavigationMixin (LightningElement) {}
Then, make a simple JavaScript page. object of reference for the page.
Call the [NavigationMixin] of the navigation service to dispatch the navigation request .Navigate] [replace] (pageReference).
navigateNext()
{
this[NavigationMixin.Navigate](
{
type: 'standard__navItemPage', attributes:
{
apiName: this.tabName,
},
});
}
Two APIs are added to the class of your component by the NavigationMixin. These APIs must be called with this reference because they are class methods.
- [NavigationMixin.Navigate](pageReference, [replace]): To move to another application page, a component calls this[NavigationMixin.Navigate].
- [NavigationMixin.GenerateUrl](pageReference): A component can obtain a promise that resolves to the final URL by calling this[NavigationMixin.GenerateUrl]. The URL may be used by the component in an anchor's ahref attribute. Additionally, it can use the window to launch a new window using the URL. the browser API open(url).
Check out another amazing blog by Narendra Kumar here: File Upload in Lightning Web Component | Salesforce Lightning Tutorial
Navigation Service in Lwc Example
NavigationLwc.html
<template>
<lightning-card title="Navigation Service in LWC(Lightning Web Components)">
<lightning-card title="Navigate To Record Example">
<lightning-button label="New Account" onclick={navigateToNewAccountPage}></lightning-button>
<lightning-button label="View Account" onclick={navigateToViewAccountPage}></lightning-button>
<lightning-button label="Edit Account" onclick={navigateToEditAccountPage}></lightning-button>
</lightning-card>
<lightning-card title="Navigate To Views">
<lightning-button label="Account Recent list View" onclick={navigateToAccountListView}></lightning-button>
<lightning-button label="Account Related List" onclick={navigateToContactRelatedList}></lightning-button>
</lightning-card>
<lightning-card title="Navigate To Home">
<lightning-button label="Navigate to Home" onclick={navigateToHomePage}></lightning-button>
<lightning-button label="Navigate to Contact Home " class="slds-m-around_medium" onclick={navigateToContactHome}></lightning-button>
</lightning-card>
<lightning-card title="Navigate To Other">
<lightning-button label="Navigate to Chatter Home" onclick={navigateToChatter}></lightning-button>
<lightning-button label="Navigate to Reports" onclick={navigateToReports}></lightning-button>
<lightning-button label="Navigate to Tab" onclick={navigateToTab}></lightning-button>
<lightning-button label="Navigate to SFDCPoint" onclick={navigateToWebPage}></lightning-button>
<lightning-button label="Navigate to Files " class="slds-m-around_medium" onclick={navigateToFilesHome}></lightning-button>
</lightning-card>
<lightning-card title="Navigate To Component">
<lightning-button label="Navigate to Visualforce page " onclick={navigateToVFPage}></lightning-button>
<lightning-button label="Navigate to Aura Lightning Component " class="slds-m-around_medium" onclick={navigateToLightningComponent}></lightning-button>
</lightning-card>
</lightning-card>
</template>
NavigationLwc.js
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationExampleLWC extends NavigationMixin(LightningElement) {
@api recordId;
// Navigate to New Account Page
navigateToNewAccountPage()
{
this[NavigationMixin.Navigate](
{
type: 'standard__objectPage',
attributes:
{
objectApiName: 'Account',
actionName: 'new'
},
});
}
// Navigate to View Account Page
navigateToViewAccountPage()
{
this[NavigationMixin.Navigate](
{
type: 'standard__recordPage',
attributes:
{
recordId: this.recordId,
objectApiName: 'Account',
actionName: 'view'
},
});
}
// Navigate to Edit Account Page
n navigateToEditAccountPage()
{
this[NavigationMixin.Navigate](
{
type: 'standard__recordPage',
attributes:
{
recordId: this.recordId,
objectApiName: 'Account',
actionName: 'edit'
},
});
}
// Navigation to Account List view(recent)
navigateToAccountListView()
{
this[NavigationMixin.Navigate](
{
type: 'standard__objectPage',
attributes:
{
objectApiName: 'Account',
actionName: 'list'
},
state:
{
filterName: 'Recent'
},
});
}
// Navigation to Contact related list of account
navigateToContactRelatedList()
{
this[NavigationMixin.Navigate](
{
type: 'standard__recordRelationshipPage',
attributes:
{
recordId: this.recordId,
objectApiName: 'Account',
relationshipApiName: 'Contacts',
actionName: 'view'
},
});
}
//Navigate to home page
navigateToHomePage()
{
this[NavigationMixin.Navigate](
{
type: 'standard__namedPage',
attributes:
{
pageName: 'home'
},
});
}
// Navigation to contant object home page
navigateToContactHome()
{
this[NavigationMixin.Navigate](
{
"type": "standard__objectPage",
"attributes":
{
"objectApiName": "Contact",
"actionName": "home"
}
});
}
//Navigate to chatter
n navigateToChatter()
{
this[NavigationMixin.Navigate](
{
type: 'standard__namedPage',
attributes:
{
pageName: 'chatter'
},
});
}
//Navigate to Reports
navigateToReports()
{
this[NavigationMixin.Navigate](
{
type: 'standard__objectPage',
attributes:
{
objectApiName: 'Report',
actionName: 'home'
},
});
//Navigate to Files home
navigateToFilesHome()
{
this[NavigationMixin.Navigate](
{
type: 'standard__objectPage',
attributes:
{
objectApiName: 'ContentDocument',
actionName: 'home'
},
});
}
// Navigation to lightning component
navigateToLightningComponent()
{
this[NavigationMixin.Navigate](
{
"type": "standard__component",
"attributes":
{
//Here customLabelExampleAura is name of lightning aura component
//This aura component should implement lightning:isUrlAddressable
"componentName": "c__customLabelExampleAura"
}
});
}
// Navigation to web page
navigateToWebPage()
{
this[NavigationMixin.Navigate](
{
"type": "standard__webPage",
"attributes":
{
"url": "https://www.sfdcpoint.com/"
}
});
}
//Navigate to visualforce page
navigateToVFPage()
{
this[NavigationMixin.GenerateUrl](
{
type: 'standard__webPage',
attributes:
{
url: '/apex/AccountVFExample?id=' + this.recordId
}
}).then(generatedUrl => {
window.open(generatedUrl);
});
}
// Navigation to Custom Tab
navigateToTab()
{
this[NavigationMixin.Navigate](
{
type: 'standard__navItemPage',
attributes:
{
//Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
apiName: 'CustomTabName'
},
});
}
OutPut
Responses