1

Reading the url param through a lightning web component(Using LWC Components in Visualforce Pages).

URL: https://sampleDEV/apex/Enrollment?enrollmentId=a082w000000YUQEfd

Visualforce Page:

 <apex:page >
<apex:includeLightning />
<div id="lightning" /> 
<script>

var enrollId = "{!$CurrentPage.parameters.enrollmentId}";
$Lightning.use("c:EnrollmentVf", function() {  //Aura app name
    $Lightning.createComponent("c:enrollment_5",
                               {EnrId : enrollId},
                               "lightning",
                               function(cmp) {
                                   // console.log("button was created" + enrollId);
                                   // do some stuff
                               }
                              );
});
</script>

Aura app:

<aura:application  access="GLOBAL" extends="ltng:outApp" >  
<aura:dependency resource="enrollment_5"/>
</aura:application>

JS

export default class Enrollment_5 extends LightningElement {
 @api EnrId;
// @api recordId = "a082w000000YUQEfd";
 @api recordId = this.EnrId;

 @wire(getParentdetails, { enrollmentName: "$recordId" })
 getContacts(response) {
  console.log("URL Param  ==>" + this.EnrId);
}
 }

When i print this this.EnrId value is getting URL Param ==>undefined

1

When the class is first defined, EnrId is undefined.

This is when you are assigning it to recordId - which fires getParentDetails.

Which means, that your console.log will print out undefined.

Your options to fix include: pass recordId in directly:

 $Lightning.createComponent("c:enrollment_5",
                           {recordId : enrollId},
                           "lightning",

Or use a setter function so that when EnrId is set, it sets recordId (bad because it has a side effect).

_EnrId;
@api
set EnrId(value){
    this._EnrId = value
    this.recordId = value;
}

Or perhaps assign EnrId to recordId in the connectedCallback() //I am unsure about this one, as I don't know when exactly this gets called.

   connectedCallback(){
       this.recordId = this.EnrId;
   } 
3
  • Thanks Caspar, It's Working now. Your're Awesome. :) – user3214361 Mar 17 '20 at 6:11
  • No worries! Which technique did you use? – Caspar Harmer Mar 17 '20 at 6:15
  • The First one pass recordId – user3214361 Mar 17 '20 at 6:20

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.