Step 1: We need to import the navigation property in JS file as below:
import { NavigationMixin } from 'lightning/navigation';
Step 2: extend the base class with NavigationMixin as below:
export default class PageRefe extends NavigationMixin(LightningElement)
{
Step 3: Write the JS file based on the desired function:
Html Code:
<template>
<lightning-card title={heading} icon-name="custom:custom24">
<lightning-layout vertical-align="center">
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Home Page" onclick={navigateToObjectHome}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Record Page" onclick={navigateToRecord}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Web Page" onclick={navigateToWebPage}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Tab Page" onclick={navigateToTabPage}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Related list " onclick={navigateToRelatedList}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="Edit Page" onclick={navigateToEditPage}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="New Record Page" onclick={navigateToNewRecordPage}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item padding="around-small" flexibility="auto">
<lightning-button label="List" onclick={navigateToList}>
</lightning-button>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
Js Code:
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class PageRefe extends NavigationMixin(LightningElement)
{
@api heading = "Page Reference Demo";
navigateToList() {
console.log('List ');
let pageReference = {
type: 'standard__objectPage',
attributes: {
actionName: 'list',
objectApiName: 'Account'
},
state: {
filterName: 'Recent'
}
};
this[NavigationMixin.Navigate](pageReference, true);
}
navigateToRecord() {
console.log('Record');
let pageReferenceRecord = {
type: 'standard__recordPage',
attributes: {
actionName: 'view',
recordId: '0015j0000099ZYoAAM',
objectApiName: 'Account'
},
};
this[NavigationMixin.Navigate](pageReferenceRecord, true);
}
navigateToNewRecordPage() {
console.log('New record');
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'new'
}
});
}
navigateToEditPage() {
console.log('edit');
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
recordId: '0015j0000099ZYoAAM',
objectApiName: 'Account',
actionName: 'edit'
}
})
}
navigateToRelatedList() {
this[NavigationMixin.Navigate]({
type: 'standard__recordRelationshipPage',
attributes: {
recordId: '0015j0000099ZYoAAM',
objectApiName: 'Account',
relationshipApiName: 'Contacts',
actionName: 'view'
},
});
}
navigateToTabPage() {
this[NavigationMixin.Navigate]({
type: 'standard__navItemPage',
attributes: {
//Name of any tabs name which are created in Org
apiName: 'CustomTab'
},
});
}
navigateToWebPage() {
this[NavigationMixin.Navigate]({
"type": "standard__webPage",
"attributes": {
"url": "https://sfdcquestion.blogspot.com/"
}
});
}
navigateToObjectHome() {
this[NavigationMixin.Navigate]({
type: 'standard__namedPage',
attributes: {
pageName: 'home'
},
});
}
}
Preview Layout:
Reference by : https://www.sfdcpoint.com/salesforce/navigation-service-in-lwc/
No comments:
Post a Comment