Pass current page record id to wire method in Lightning Web Component - Salesforce Globe For You

Solution: @api recordId property will fetch the record id from the detail record page where this component is placed.

Use '$recordId' to pass current page record id to wire method inside the js file.

Example:

passRecordIdToWireInLWC.html:

<template>

    <lightning-card title="Get Related List Contact Records">

        <template if:true={records}>

            <div class="slds-m-around_medium">

                <template for:each={records} for:item="rec">

                    <p key={rec.fields.Id.value}>

                        {rec.fields.Name.value}

                    </p>

                </template>

            </div>

        </template>

    </lightning-card>

</template>

passRecordIdToWireInLWC.js:

import { LightningElement, wire ,api } from 'lwc';

import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class PassRecordIdToWireInLWC extends LightningElement {

    @api recordId;

    error;

    records;

    @wire(getRelatedListRecords, {

        parentRecordId: '$recordId',

        relatedListId: 'Contacts',

        fields: ['Contact.Id','Contact.Name']

    })listInfo({ error, data }) {

        if (data) {

            this.records = data.records;

            this.error = undefined;

        } else if (error) {

            this.error = error;

            this.records = undefined;

        }

    }

}

passRecordIdToWireInLWC.js-meta.xml:

<?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__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: