LWC – How to send the recordId to the controller

apilightning-web-components

I'm trying to pass the recordId to the controller so I can interact with the person account to send the data. The problem I found was that recordId was not sending its data correctly to the controller. So I did console.log recordId and it was giving me an undefined. Any idea of getting recordId?

.js

      @api recordId;

      async connectedCallback() {
        console.log(this.recordId) // this will give me undefined
        uploadImage({
          fileName: 'image.png',
          base64Data: image_data_url,
          recordId: this.recordId,
        })
      }

     photoShot() {
        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); // draw html5 canvas
        const image_data_url = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "");
     }

.cls

        @AuraEnabled
        public static string uploadImage(String fileName, String base64Data, Id recordId) {
            // Decoding the base64Data
            base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
            ContentVersion cv = new ContentVersion();
            cv.VersionData = EncodingUtil.base64Decode(base64Data);
            cv.Title = fileName;
            cv.PathOnClient = '/' + fileName;
            cv.IsMajorVersion = true;
            cv.FirstPublishLocationId = recordId;
            Insert cv;

            ContentDocumentLink cdl = new ContentDocumentLink();
            cdl.ContentDocumentId = [
                  SELECT ContentDocumentId 
                  FROM ContentVersion 
                  WHERE Id =: cv.Id
                ].ContentDocumentId;
            cdl.LinkedEntityId = recordId;
            cdl.ShareType = 'V';
            cdl.Visibility = 'AllUsers';
            insert cdl;
            System.debug('ContentDocumentLink');
            System.debug(cdl.Id);
        }

.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle 
    xmlns="http://soap.sforce.com/2006/04/metadata">
        <apiVersion>54.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
            <target>lightning__RecordPage</target>
            <target>lightning__HomePage</target>
            <target>lightningCommunity__Page</target>
            <target>lightningCommunity__Default</target>
        </targets>
        <targetConfigs>
            <targetConfig targets="lightningCommunity__Default">
                <property
                    name="recordId"
                    type="String"
                    label="Record Id"
                    description="Automatically bind the page's record id to the component variable"
                    default="{!recordId}" />
            </targetConfig>
        </targetConfigs>
    </LightningComponentBundle>

Best Answer

To access the record id you need to add the component to a Lightning record page.
You need to also import the @api like below:

import { LightningElement, api } from 'lwc';

Please note that

"The recordId is set only when you place or invoke the component in an explicit record context. In all other cases, the recordId isn’t set, and your component can’t depend on it."

If your component is added on an Expereince Site then you need to add the following in your meta file:

<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property
            name="recordId"
            type="String"
            label="Record Id"
            description="Automatically bind the page's record id to the component variable"
            default="{!recordId}" />
    </targetConfig>
</targetConfigs>

For your reference please refer to the following Link

Related Solutions

[SalesForce] LWC Community recordId undefined

From docs, you have to add <target>lightning__RecordPage</target> in the lwc component meta, for it to accept recordId from the detail page.

<targets>
    <target>lightning__RecordPage</target>
</targets>

Indicates that the component takes a record Id as an attribute.

EDIT: Apparently this works in App builder, but in communities, things are a bit funny.

You have to explicitly expose the recordIdusing <targetConfigs>

    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="recordId" type="String" ></property>
        </targetConfig>
    </targetConfigs>

Then in community builder provide the recordId as {!recordId}

[SalesForce] LWC Push RecordId to Apex

You have a line that says

@wire(fetchTasks) parameters;

You need to do more than that. Have a look at the "Wire an Apex Method with a Dynamic Parameter" example in the LWC docs

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

In their example they're using a phrase 'searchKey' that the user types in, whereas you're going to be using the recordId that is automatically injected into your @api recordID property as long as you're on a record detail page.

You need to make sure your configuration file enables you to put the component on a record detail lightning app page by adding the lightning__RecordPage target in your configuration file for the component.

<targets>
    <target>lightning__RecordPage</target>
</targets>

Specifically here's their Apex class example

ContactController.cls

public with sharing class ContactController {
        @AuraEnabled(cacheable=true)
        public static List<Contact> findContacts(String searchKey) {
            String key = '%' + searchKey + '%';
            return [SELECT Id, Name, Title, Phone, Email, Picture__c FROM Contact WHERE Name LIKE :key AND Picture__c != null LIMIT 10];
        }
    }

As well as their JS example

apexWireMethodWithParams.js

import { LightningElement, track, wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';

/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 300;

export default class ApexWireMethodWithParams extends LightningElement {
    @track searchKey = '';

    @wire(findContacts, { searchKey: '$searchKey' })
    contacts;

    handleKeyChange(event) {
        // Debouncing this method: Do not update the reactive property as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        this.delayTimeout = setTimeout(() => {
            this.searchKey = searchKey;
        }, DELAY);
    }
}

And here is their HTML template

apexWireMethodWithParams.html

<template>
    <lightning-card title="ApexWireMethodWithParams" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={contacts.error}>
                <c-error-panel errors={contacts.error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

Best Answer

Related Solutions

[SalesForce] LWC Community recordId undefined

[SalesForce] LWC Push RecordId to Apex

Related Topic