Get current page parameters in LWC

by Rijwan Mohmmed
get-current-page-parameters-in-lwc-techdicer

Hello friends, Today I am going to show you the Get current page parameters in LWC component using CurrentPageReference. By CurrentPageReference we can get page important parameters like the recordId, URL parameters, etc. Get a reference to the current page in Salesforce.

Also check this : Dynamic SOQL query to fetch all fields of Sobject

Highlights Points :

  1. The key-value pairs of the PageReference state property are serialized to URL query parameters.
  2. CurrentPageReference have 3 types of parameters attributes, state, type
  3. Get recordId to assign to LWC methods for other business logics.

Supported Pages :

  • App – standard__app
  • Lightning Component – standard__component
  • Knowledge Article – standard__knowledgeArticlePage
  • Login Page – comm__loginPage
  • Named Page (Communities) – comm__namedPage
  • Named Page (Standard) – standard__namedPage
  • Navigation Item Page – standard__navItemPage
  • Object Page – standard__objectPage
  • Record Page – standard__recordPage
  • Record Relationship Page – standard__recordRelationshipPage
  • Web Page – standard__webPage

CurrentPageReference have 3 types of parameters

  1. attributes : Have Page mode and record Id
  2. state : Have all paramters which is in URL
  3. type : Page Type , see Supported Pages

Console Debug :

{
    "type": "standard__recordPage",
    "attributes": {
        "recordId": "01t530000004iXsAAI",
        "actionName": "view"
    },
    "state": {
        "recordName": "test"
    }
}

Code :

AccountDetailPageLWC.JS :

import { LightningElement, api, wire } from 'lwc';
import fetchAccountDetails from '@salesforce/apex/AcountDetailLWCCtrl.fetchAccountDetails';
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;
       }
    }
}

Output :

get-current-page-parameters-in-lwc-techdicer
get-current-page-parameters-in-lwc-techdicer

Reference :

  1. Salesforce
What’s your Reaction?
+1
7
+1
3
+1
2
+1
2
+1
4
+1
3

You may also like

Leave a Comment