Utilize the lightning/navigation service for navigation within Lightning Experience, Lightning Communities, and the Salesforce app.
Please note that the lightning/navigation service is exclusively supported in Lightning Experience, Lightning Communities, and the Salesforce app. Other containers, such as Lightning Components for Visualforce or Lightning Out, do not provide support for this service, even when accessed through Lightning Experience or the Salesforce app. Within LWC, navigation services enable navigation to Pages, Records, and Lists.
There exists a range of navigation options to choose from.
Simple Navigation
Utilize the lightning/navigation service to navigate to various types of pages, including records, list views, objects, and even to open files.
Instead of relying on URLs, the navigation service employs a PageReference, which is a JavaScript object detailing the page type, its characteristics, and its current state. This approach shields your component from potential future changes in URL formats, enabling its use across diverse applications, each supporting a range of URL types.
Navigation services utilize a PageReference requiring arguments such as page type (String), attributes (Object), and state (Object).
Implement 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).
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'
},
});
}