3

This seems like a super simple question but I can't find the answer for the life of me. I have an app that is going to edit records in a new Lightning App Page with a Lightning Web Component in it.

When I go to this App Page, the Id is being passed as a URL parameter.

How do I get the value of a query string parameter in the js file of a Lightning Web Component?

  • please update your post with the code you have tried and where you are stuck exactly =) thanks – glls Apr 16 '19 at 16:44
  • I don't have much code yet, I'm just starting and trying to figure out how to get the value of a query string parameter. – alex Apr 16 '19 at 16:49
  • get the value of a query string parameter in what context? lighting communities, LEX ? – glls Apr 16 '19 at 16:50
  • 1
    Not to sound rude but a simple google search on 'get record id in LWC' would have answered your question. Something like this developer.salesforce.com/docs/component-library/documentation/… – devforce Apr 16 '19 at 17:07
  • You are correct, and I did find that, but that I think that only applies to record pages not app pages. – alex Apr 18 '19 at 15:49
2

You simply need to specify recordId as an @api member, and the framework will give you the ID automatically.

// testClass.js
import { LightningElement, api } from 'lwc';
export default class TestClass extends LightningElement {
    @api recordId;
}

You should also be able to access window.location.search to identify parameters.

| improve this answer | |
  • Thank you. I think @api recordId only works for Record pages, but you reminded me that I had been way overthinking the solution and I could use basic JS functionality to get what I needed. – alex Apr 16 '19 at 17:38
  • Could you please answer a doubt I have here? If there are two params which I pass through the url, how can I access them in lwc. – Jayakrishnan Salim Mar 31 at 19:37
  • 1
    @JayakrishnanSalim window.location.search or CurrentPageReference. – sfdcfox Mar 31 at 20:06
1

you can pass parameter by using both @api and visualforce

1) create lightning out application and state lwc // wrapTestClass.application //

<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:testClass" />
</aura:application>

2) create visualforce and pass parameters which defined as @api in lwc

<apex:page>
    <apex:includeLightning />
    <div id="test"></div>

    <script>
        $Lightning.use("c:wrapTestClass", function() {
            $Lightning.createComponent("c:testClass", {"recordId":"{!param}"}, "test", function(cmp, err) {}); 
        });
    </script>
</apex:page>
| improve this answer | |
1

In your case the best approach will be use

@api recordId;

In other cases, where you have also other parameters the best approach is to use CurrentPageRefference.

currentPageReference.state allows you to get params.

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

export default class Test extends LightningElement {

   currentPageReference = null; 
   urlStateParameters = null;

   urlId = null;
   urlLanguage = null;
   urlType = null;

   @wire(CurrentPageReference)
   getStateParameters(currentPageReference) {
      if (currentPageReference) {
         this.urlStateParameters = currentPageReference.state;
         this.setParametersBasedOnUrl();
      }
   }

   setParametersBasedOnUrl() {
      this.urlId = this.urlStateParameters.id || null;
      this.urlLanguage = this.urlStateParameters.lang || null;
      this.urlType = this.urlStateParameters.type || '10';
   }
}

More details you can find here https://salesforceprofs.com/how-to-get-url-params-in-lwc/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.