Lightning Web Components (LWC) in Salesforce offer a robust set of navigation capabilities that allow you to move seamlessly between various types of pages within your Salesforce environment. Leveraging the NavigationMixin, you can easily handle navigation to standard Salesforce pages, custom pages, and even external URLs. In this blog post, we’ll explore the different types of page navigation supported by LWC and provide practical examples to illustrate how you can implement them in your applications.
Navigating to Different Page Types
The Salesforce navigation service supports various page types, each with its own attributes and state properties. Both the NavigationMixin and the NavigationMixin.GenerateUrl API can be used to navigate to these different page types. Let’s break down the different types of navigation available and how to use them effectively.
Example: Creating a Navigation Button
To demonstrate how navigation works, let’s create a simple example. We’ll design a component with a button that allows users to navigate to different pages within a Salesforce app.
Welcome Component
We’ll start with a welcome component that includes a navigation button:
| <!– welcome.html –> <div class=”slds-m-vertical_large”> <c-navtab tab-name=”lightning_components” label=”Next”></c-navtab> </div> |
In this example, the c-navtab component is used at the bottom of the page. It provides a “Next” button that users can click to move to the next page in the app.
Navigation Tab Component
The c-navtab component is responsible for handling the navigation. Here’s how it’s implemented:
| <!– navTab.html –> <template> <lightning-button variant=”brand” label={label} title={label} onclick={navigateNext}> </lightning-button> </template> |
| // navTab.js import { LightningElement, api } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class Navtab extends NavigationMixin(LightningElement) { @api tabName; @api label; navigateNext() { this[NavigationMixin.Navigate]({ type: ‘standard__navItemPage’, attributes: { apiName: this.tabName, }, }); } } |
The navTab component uses the navigateNext method to navigate to a specific page when the button is clicked. The tabName attribute specifies which page to navigate to.
More Page Type Examples
Now let’s explore various types of page navigation with practical examples.
1. Object Home Page
Navigate to the home page of a specific Salesforce object.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToObjectHome() { this[NavigationMixin.Navigate]({ type: ‘standard__objectPage’, attributes: { objectApiName: ‘Case’, actionName: ‘home’, }, }); } } |
2. List View Page
Navigate to a list view of a Salesforce object.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToListView() { this[NavigationMixin.Navigate]({ type: ‘standard__objectPage’, attributes: { objectApiName: ‘Contact’, actionName: ‘list’, }, state: { filterName: ‘Recent’, // or use list view ID }, }); } } |
3. New Record Page
Open the modal to create a new record for a specific object.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToNewRecordPage() { this[NavigationMixin.Navigate]({ type: ‘standard__objectPage’, attributes: { objectApiName: ‘Account’, actionName: ‘new’, }, }); } } |
4. Record View Page
Navigate to view details of a specific record.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToRecordViewPage() { this[NavigationMixin.Navigate]({ type: ‘standard__recordPage’, attributes: { recordId: ‘a03B0000002tEurIAE’, objectApiName: ‘namespace__ObjectName’, // optional actionName: ‘view’, }, }); } } |
5. Record Edit Page
Open the modal to edit a specific record.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToRecordEditPage() { this[NavigationMixin.Navigate]({ type: ‘standard__recordPage’, attributes: { recordId: ‘001B000000ZBz22IAD’, objectApiName: ‘Account’, // optional actionName: ‘edit’, }, }); } } |
6. Related List Page
Navigate to a related list view for a record.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToRelatedList() { this[NavigationMixin.Navigate]({ type: ‘standard__recordRelationshipPage’, attributes: { recordId: ‘500xx000000Ykt4AAC’, objectApiName: ‘Case’, relationshipApiName: ‘CaseComments’, actionName: ‘view’, }, }); } } |
7. Custom Tab Page
Navigate to a custom tab within your Salesforce app.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToTabPage() { this[NavigationMixin.Navigate]({ type: ‘standard__navItemPage’, attributes: { apiName: ‘CustomTabName’, }, }); } } |
8. External Web Page
Navigate to an external URL.
| import { LightningElement } from ‘lwc’; import { NavigationMixin } from ‘lightning/navigation’; export default class NavigationExample extends NavigationMixin(LightningElement) { navigateToWebPage() { this[NavigationMixin.Navigate]( { type: ‘standard__webPage’, attributes: { url: ‘http://salesforce.com’, }, }, true // Replaces the current page in the browser history ); } } |
Conclusion
Understanding and utilizing the different page types in Salesforce navigation allows you to create more engaging and user-friendly applications. Whether you’re navigating to records, object pages, list views, or even external URLs, NavigationMixin provides a flexible and powerful way to handle these transitions. By leveraging these navigation options, you can enhance the user experience and streamline interactions within your Salesforce app.
Feel free to explore the LWC Recipes repository for more navigation examples and get inspired by how different navigation types are implemented. Happy coding and navigating!
