4

Is there a way how to access LWC component via URL?

As a playground I'm using https://github.com/trailheadapps/lwc-recipes and want to access WireCurrentPageReference component.

I've tried https://enterprise-computing-1068-dev-ed.lightning.force.com/lightning/cmp/c__wireCurrentPageReference, but all I've got is the "This page isn't available in Salesforce Lightning Experience or mobile app." error message, as if I did specify component name that does not exist.

As you could see in lwc-recipes repos, the wireCurrentPageReference.js-meta.xml file does have all of the necessary targets:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Bonus question, if there is a way to access it via URL, will URL query parameters be shown in a component?

UPD: per Phil W answer it is not possible. I will have to create a page with the /visualEditor/appBuilder.app and put the component there. In order to pass query variable I will have to add a "c__" suffix that will be digestible by LWC. Example https://enterprise-computing-1068-dev-ed.lightning.force.com/lightning/n/WireCurrentPageReference?c__recordId=123

1
  • Short answer: No. LWCs are not URL Addressable (unlike Aura components that can be). You would have to create a page and drop the LWC into that page, then reference the page by URL.
    – Phil W
    Jul 6, 2022 at 9:54

2 Answers 2

4

Short answer: No.

LWCs are not URL Addressable (unlike Aura components that can be).

You would have to create a page and drop the LWC into that page, then reference the page by URL (not the component).

Of course, the LWC can get access to the page's URL detail using the CurrentPageReference. Note that there are some strange constraints in flexipages around query parameters. This is covered in this previous Q&A.

5
  • Thanks for the response. Bt creating the page you mean using /visualEditor/appBuilder.app?
    – RomanK
    Jul 6, 2022 at 10:05
  • Let's say, I've created the page enterprise-computing-1068-dev-ed.lightning.force.com/lightning/… and dropped a component there. When I'm trying to access the page with query parameter "/lightning/n/WireCurrentPageReference?recordId=123" it changes back to "/lightning/n/WireCurrentPageReference" and recordId is not reflected in a component as it should be
    – RomanK
    Jul 6, 2022 at 10:08
  • Yes, I'm talking about flexipages created through the app builder. There are some strange constraints around query parameters in flexipages. Take a look at this previous Q&A for details.
    – Phil W
    Jul 6, 2022 at 10:15
  • Thanks again. Found the answer how to deal with it here salesforce.stackexchange.com/questions/356879/…
    – RomanK
    Jul 6, 2022 at 10:16
  • @RomanK if you are trying to pass a param that way, you need to namespace it, so recordId would be come c__recordId Jun 10, 2023 at 2:41
1

You can via little known hack which is essentially emulating aura's navigateToComponent event.

javascript:

'/one/one.app#'+btoa(JSON.stringify({"componentDef" : "c:someComponent","attributes" :{"recordId" : "0031F00000rMHfAQAW"}}))

I use below bash script that opens currently open lwc component (via hotkey via intellij/webstorm External Tools feature):

res=$(echo 'console.log(btoa(JSON.stringify({"componentDef" : "c:'$1'","attributes" :{"recordId" : "0031F00000rMHfAQAW","testAttribute" : "attribute value"}})))' | node)
url=/one/one.app#$res
echo $url
sfdx force:org:open -r -p $url --json | jq -r .result.url

Webstorm config:

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .