navigationExampleLWC.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>
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
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
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'
},
});
}
}
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle <apiVersion>48.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets></LightningComponentBundle>
