July 5, 2021

Passing URL Parameters or Query Parameters to Salesforce Lightning Web Component Tab

1. Create the below Lightning Web Component for a Tab.

HTML:
<template>
    <iframe src={strURL} width="100%" height="100%"></iframe>
</template>

JavaScript:
import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class LightningTab extends LightningElement {

    @wire( CurrentPageReference )
    currentPageReference;

    strURL;

    connectedCallback() {

        this.strURL = 'https://www.test-cors.org/?server_tabs=remote#?client_headers=';
        let recId = this.currentPageReference.state.c__recId;
        console.log( 'RecId is ' + recId );

        if ( recId )
            this.strURL += recId;

    }

}

JavaScript-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>
 
2. Create a Tab for the above Lightning Web Component.
 
 
3. Create this Lightning Web Component for Quick Action.
 
HTML:
<template>
    
</template>

JavaScript:

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class OpenLightningTab  extends NavigationMixin( LightningElement ) {

    @api recordId;

    @api invoke() {

        console.log( "Inside Invoke Method" );
        console.log( "Record Id is " + this.recordId );
        this[ NavigationMixin.Navigate ]( {
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'Lightning_Tab'
            },
            state: {
                c__recId: this.recordId
            }
        } );

    }

}

JavaScript-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
 
4.  Create a Quick action and add it to the Page Layout.


Output:
 
 

No comments:

Post a Comment