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: