How to get parent record related field values from a record in LWC Salesforce - Salesforce Globe For You

 How to get parent record related field values from a record in LWC Salesforce  - Salesforce Globe For You 

Scenario: From the contact record,we need to fetch it's parent Account related field (Account Name,Account Rating) values in LWC

Example:

displayParentRecordFieldLWC.html

<template >

    <lightning-card title="Contact Record Data">

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

            <p>Contact Name: {contactName}</p>

            <p>Account Name: {AccountName}</p>

            <p>Account Rating:{AccountRating}</p>

        </div>

    </lightning-card>

</template>

displayParentRecordFieldLWC.js

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

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';

import ACCOUNT_NAME_FIELD from '@salesforce/schema/Contact.Account.Name';

import ACCOUNT_RATING_FIELD from '@salesforce/schema/Contact.Account.Rating';

export default class DisplayParentRecordFieldLWC extends LightningElement {

    @api recordId;

    @track contact;

    @wire(getRecord, { recordId: '$recordId', fields: [CONTACT_NAME_FIELD, ACCOUNT_NAME_FIELD,ACCOUNT_RATING_FIELD]})

    contact;

 get contactName() {

        return getFieldValue(this.contact.data, CONTACT_NAME_FIELD);

    }

 get AccountName() {

        return getFieldValue(this.contact.data, ACCOUNT_NAME_FIELD);

    }

    get AccountRating() {

        return getFieldValue(this.contact.data, ACCOUNT_RATING_FIELD);

    }

}

displayParentRecordFieldLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Note: Drag this component in contact page.

Output: