Get Parent record data without using apex class

 We can use getRecord method of uiRecordApi to access up to 5 levels of parent records data in lightning web components. Here is the sample code of getting contact's parent record of account data. If you not sure how to use getRecord method then read this post: How to use getRecord method in LWC.

lwc-parent-data

Get Parent object data using uiRecordApi

getParentDataUsingGetRecord.html

<template>
    <lightning-card title="Get the parent record data" icon-name="standard:user">
        <div class="slds-m-around_medium">
            <p>Contact Name: {contactName} </p>
            <div class="slds-text-heading_medium">Parent Account fields</div><br/>
            <div class="slds-box slds-theme_shade">
                <p>Account Name: {accountName} </p>
                <p>Account Phone: {accountPhone} </p>
                <p>Account Industry: {accountIndustry} </p>
            </div>
        </div>
    </lightning-card>
</template>

getParentDataUsingGetRecord.js

import { LightningElement, wire, api } from 'lwc';
import { getRecord , getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Contact.Account.Name';
import ACCOUNT_PHONE_FIELD from '@salesforce/schema/Contact.Account.PHONE';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Contact.Account.INDUSTRY';

export default class GetParentDataUsingGetRecord extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, ACCOUNT_NAME_FIELD,ACCOUNT_PHONE_FIELD,ACCOUNT_INDUSTRY_FIELD]}) 
    contactRecord;

    get contactName(){
        // return this.contactRecord.data.fields.Name.value; // also get name from this.contactRecord.data JSON object
        return getFieldValue(this.contactRecord.data, NAME_FIELD);
    }

    get accountName(){
        // return this.contactRecord.data.fields.Account.value.fields.Name.value // also get name from this.contactRecord.data JSON object
        return getFieldValue(this.contactRecord.data, ACCOUNT_NAME_FIELD);
    }

    get accountPhone(){
        return getFieldValue(this.contactRecord.data, ACCOUNT_PHONE_FIELD);
    }

    get accountIndustry(){
        return getFieldValue(this.contactRecord.data, ACCOUNT_INDUSTRY_FIELD);
    }

}

getParentDataUsingGetRecord.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo

Labels:
LWC
Join the conversation