Navigation in LWC
September 20, 2023
- CurrentPageReference
import { LightningElement, api, wire } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; export default class AccountDetailPageLWC extends LightningElement { data; error; @api recordId; currentPageReference = null; urlStateParameters = null; @wire(CurrentPageReference) getPageReferenceParameters(currentPageReference) { if (currentPageReference) { console.log(currentPageReference); this.recordId = currentPageReference.attributes.recordId || null; let attributes = currentPageReference.attributes; let states = currentPageReference.state; let type = currentPageReference.type; } } }
- NavigationMixin.Navigate
navigationLwc.html
<template> <lightning-card variant="Narrow" title="LWC Navigation" icon-name="standard:recipe"> <div class="slds-p-horizontal_small" style="text-align:center"> <lightning-button variant="brand" label="Navigate to another LWC" onclick={handleNavigate}></lightning-button> </div> </lightning-card> </template>
navigationLwc.js
import { LightningElement } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class NavigationLwc extends NavigationMixin(LightningElement) { handleLWCNavigate() { let compDefinition = { componentDef: "c:targetlwc", attributes: { name : 'Hello World' } }; // Base64 encode the compDefinition JS object let encodedCompDef = btoa(JSON.stringify(compDefinition)); this[NavigationMixin.Navigate]({ type: "standard__webPage", attributes: { url: "/one/one.app#" + encodedCompDef } }); } }
targetlwc.html
<template> <lightning-card variant="Narrow" title="LWC Navigation" icon-name="standard:recipe"> <div class="slds-p-horizontal_small" style="text-align:center"> {name} </div> </lightning-card> </template>
targetlwc.js
import { LightningElement, api } from 'lwc'; export default class Targetlwc extends LightningElement { @api name; }
- NavigationMixin.GenerateUrl
//1. Navigate to a Visualforce page navigateToVF() { this[NavigationMixin.GenerateUrl]({ type: 'standard__webPage', attributes: { url: '/apex/myVFPage?id=' + this.recordId } }).then(generatedUrl => { window.open(generatedUrl); }); } // Here we use NavigationMixin.GenerateUrl to form the URL and then navigate to it in the promise.
//2. Generate a URL to a record page @api recordId; recordPageUrl; // variable to be associated to anchor tag. generateURLforLink() { this[NavigationMixin.GenerateUrl]({ type: 'standard__recordPage', attributes: { recordId: this.recordId, actionName: 'view', }, }).then(generatedUrl => { this.recordPageUrl = generatedUrl; }); } // NavigationMixin.GenerateUrl returns the Generated URL in the promise. // We can even use this in window.open(generatedUrl) command
5
2
votes
Article Rating
Subscribe
Login
0 Comments
Oldest
Newest
Most Voted
Inline Feedbacks
View all comments
Latest Post
About Me
Welcome to an Aimer's weblog :)
Hi! Asif Parvez here, I'm from West Bengal's Howrah. I have extensive experience in Apex, Integration (REST API), LWC, ADMIN and working as Senior Salesforce Developer for Dazeworks Technologies(An iLink Digital Company). I am also a content creator and blogger.
I have three certifications(PD-I, PD-II, Salesforce Associate).
Our Visitor
Our Visitor
0
0
0
3
8
2
Users Today : 0
Users Yesterday : 0
Users Last 7 days : 12
Users Last 30 days : 41
Users This Month : 33
Users This Year : 381
Total Users : 382
Views Today :
Views Yesterday :
Views Last 7 days : 45
Views Last 30 days : 79
Views This Month : 70
Views This Year : 715
Total views : 716
Who's Online : 0
Your IP Address : 18.217.14.208
Server Time : 2024-12-23
Powered By WPS Visitor Counter