4

I am trying to pass the recordId as an attribute to a lightning web component used in a visual force page. However, I am struggling to find how I read the attributes set in the $Lightning.createComponent, nothing seems to get passed through to the constructor.

The documentation around this seems to be non-existent, I guess this is something they don't want you to do, but unfortunately I need to.

Any help much appreciated.

The code in the vfp is

    $Lightning.use('c:CRLightningWrapper', function() {
        $Lightning.createComponent(
            'c:collectionsContainer',
            {
                recordId: "{!$CurrentPage.parameters.id}"
            },
            'collectionsContainer',
            function(cmp) {
                console.log('component created {!$CurrentPage.parameters.id}');
        });
    });

I am following the documentation and implement in the lwc like below:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
    record;
}
6
  • Is your aura component receiving the record id ? Can tou share the relevant parts of your aura and lwc components? – glls May 8 '19 at 11:57
  • The component is a lightning web component wrapped in an aura:application. My LWC is implemented as edit above, but the recordId doesn't appear to get passed in as the getRecord fails to return the record. – sdelaney79 May 8 '19 at 12:20
  • last I checked LWC's are not supported in lightning:out apps – glls May 8 '19 at 13:30
  • Coming in Summer 19 by the looks of it : releasenotes.docs.salesforce.com/en-us/summer19/release-notes/… – BritishBoyinDC May 8 '19 at 14:23
  • Are you on Summer 19 and can you share your component meta file? – Pranay Jaiswal May 8 '19 at 15:30
1

This actually is documented, it is just very well hidden: https://developer.salesforce.com/docs/component-library/documentation/lwc/data_get_user_input

To summarise, in your Lightning Web Component you need to make sure you import api and expose the recordId property:

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
    // Expose a recordId property.
    @api recordId;
}

Additionally, change the following line in your VisualForce Page:

recordId: "{!$CurrentPage.parameters.id}"

to

record-id: "{!$CurrentPage.parameters.id}"
3
  • Thanks, @koen-wesselman, this is the approach I tried but the recordId value appears to be null. I was following data_wire_service_about – sdelaney79 May 8 '19 at 12:13
  • Ah, fair enough @sdelaney79.. Shot in the dark: Can you try changing recordId: "{!$CurrentPage.parameters.id}" to record-id: "{!$CurrentPage.parameters.id}" ? – Koen Wesselman May 8 '19 at 12:29
  • Will give it a go and let you know how I get on – sdelaney79 May 8 '19 at 13:02
0

caveat:Considering the org you are using is not Summer '19 preview

After seeing the post I got curious and tested couple of things,

Testing by passing string: I am passing the $CurrentPage.parameters.id to String attribute in Aura Component and passed that to Lightning web component public property accountId and the value is getting passed.Check the code below:

VF Page

    <apex:page standardcontroller="Account" standardStylesheets="false" showHeader="false" applyHtmlTag="false">
    <apex:includeLightning />
    <div id="lightning" class="slds"></div>
    <script type="text/javascript">
      $Lightning.use("c:lwcapp", function() {
           $Lightning.createComponent(
                  "c:accountIdtolwccmp",
                       {
                        accountId: "{!$CurrentPage.parameters.id}"
                       },
                  "lightning",
                 function(cmp) {
                 console.log('component created');
               });
             });
       </script>
      </apex:page>

accountIdtolwccmp

     <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:attribute name="accountId" type="String" />
     <lightning:card title="Account Id Section in Aura" iconName="custom:custom14">
         Account Id in Aura:{!v.accountId} 
     </lightning:card>
     <c:passaccountidtolwc accountId="{!v.accountId}"/>
     </aura:component>

passaccountidtolwc

      <template>
       <lightning-card title="Account Id Section in LWC" icon-name="custom:custom14">
         <div class="slds-card__body slds-card__body_inner">
            AccountIdinLWC:{accountId}</br>
         </div>
       </lightning-card>
       </template>

       import { LightningElement,api} from 'lwc';
        export default class Lwcrec extends LightningElement {
           @api accountId;
        }

Testing lightning/ui*Api Wire Adapter with recordId and string accountId property: If I pass the recordId to the ui*Api getrecord Adapter it failed to return any value.But If I pass the accountId which I pass from aura component to the adapter it return the account values.check the below code:

Template

        <template>
        <lightning-card title="Account Id Section in LWC" icon-name="custom:custom14">
          <div class="slds-card__body slds-card__body_inner">
          AccountIdinLWC:{accountId}</br>
          AccountNamebasedonuiApiAdaptor:{name}
        </div>
        </lightning-card>
        </template>

JS

   import { LightningElement,api,wire,track} from 'lwc';
   import { getRecord } from 'lightning/uiRecordApi';
   export default class Lwcrec extends LightningElement {
   @api accountId;
   @api recordId;
   @track record;
   @track name;
   @wire(getRecord, { recordId: '$accountId', fields: ['Account.Name'] })
   wiredRec({ error, data }) {
     if (data) {
         this.record = data;
         console.log('record---'+JSON.stringify(this.record));
         console.log(this.record.fields.Name.value);
         this.name=this.record.fields.Name.value;
         this.error = undefined;
      } else if (error) {
         this.error = error;
         this.record = undefined;
          }
        }
     }

Conclusion

Either you can wait for the feature Use Lightning Web Components in Visual force Pages in Summer 19.Or you can try passing the String from the Visual force page use it in the ui*Api getrecord Adapter.

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.