Navigate with Parameters to a URL Addressable Lightning Web Component in Salesforce ☁️⚡️

Kapil April 28, 2024

 In the Summer '24 release Salesforce gives us ability to make our Lightning Web Components URL Addressable and navigate to it without using Aura Components.

Before this the only way to navigate to a LWC was by embedding it inside an Aura Component. I had written a blog on it if you wish to learn more about the previous methods please use below link.

https://www.salesforcebolt.com/2022/05/navigate-from-lwc-to-lwc-with-and-without-aura.html


To generate a URL for your Lightning web component and make it available via a URL, include the lightning__UrlAddressable target in your component’s .js-meta.xml configuration file. Set the <isExposed> tag to true. The <apiVersion> tag has no impact on this feature and can be set to an earlier or later version.

To navigate to the custom component, use the lightning/navigation module with the standard__component page reference type.

Checkout example below: 

navigateFromLWC.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
    <lightning-card
        title="Navigate to a URL-Addressable Lightning Web Component"
        class="slds-card__body_inner"
        icon-name="standard:search"
    >
    <div class="slds-box">
        <lightning-button
        label="Navigate to LWC URL"
        onclick={navigateToLWCURL}
        ></lightning-button>
    </div>
    </lightning-card>
</template>


navigateFromLWC.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";

export default class NavigateFromLWC extends NavigationMixin(LightningElement) {
  navigateToLWCURL() {
    this[NavigationMixin.Navigate]({
      // Pass in pageReference
      type: 'standard__component',
      attributes: {
        componentName: 'c__destination',
      },
      state: {
        c__source: 'navigateFromLWC.js',
      },
    });
  }
}


destination.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
    <lightning-card
        title="Navigate to a URL-Addressable Lightning Web Component"
        class="slds-card__body_inner"
        icon-name="standard:search"
    >
        <div class="slds-box">
            <b>I am the target! I am the source {sourceValue}</b>
        </div>
    </lightning-card>
</template>


destination.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { LightningElement, wire, api } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class Destination extends LightningElement {
    @wire(CurrentPageReference)
    currentPageRef;

    @api sourceValue;

    get sourceValue() {
        return this.currentPageRef.state.c__source;
    }
}


destination.js-meta.xml

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__UrlAddressable</target>
    </targets>
</LightningComponentBundle>


Output



Checkout Complete Video Tutorial Below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

1 Comments