Lightning Web Component wired getRecord example

Hello Coders! In this post, we will see a simple example of getRecord method from uiRecordApi in the Lightning Web Components framework. For this example, we will create a small Opportunity Information card.

Along with getRecord we will also see how to use the getFieldValue method from uiRecordApis. So first you need to import both methods like below.

• The getRecord is used to query a record from the Salesforce database, this method takes two arguments recordId (Id of the record that needs to be fetched) and fields (List of fields to be included in the query to get the record).
  
  This method leverages Lightning Data Service (LDS) so you get all benefits of LDS.
  
  
• The getFieldValue method is used to get the value of the specified field from the result of getRecord.

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

Once you have imported you can call the getRecord method by using the wire adapter.

Sample Code

To demonstrate getRecord example I have created a simple Lightning web component called OpportunityInfoCard. The below is the complete code for that.

OpportunityInfoCard.js

import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import OPPORTUNITY_NAME from "@salesforce/schema/Opportunity.Name";
import OPPORTUNITY_AMOUNT from "@salesforce/schema/Opportunity.Amount";
import OPPORTUNITY_CLOSE_DATE from "@salesforce/schema/Opportunity.CloseDate";
import OPPORTUNITY_PROBABILITY from "@salesforce/schema/Opportunity.Probability";

export default class OpportunityInfoCard extends LightningElement {
    @api recordId;

    @wire(getRecord, {
        recordId: "$recordId",
        fields: [
            OPPORTUNITY_NAME,
            OPPORTUNITY_AMOUNT,
            OPPORTUNITY_CLOSE_DATE,
            OPPORTUNITY_PROBABILITY
        ]
    })
    wiredOpportunity;

    get name() {
        return getFieldValue(this.wiredOpportunity.data, OPPORTUNITY_NAME);
    }

    get amount() {
        return getFieldValue(this.wiredOpportunity.data, OPPORTUNITY_AMOUNT);
    }

    get closeDate() {
        return getFieldValue(
            this.wiredOpportunity.data,
            OPPORTUNITY_CLOSE_DATE
        );
    }

    get probability() {
        let value = getFieldValue(
            this.wiredOpportunity.data,
            OPPORTUNITY_PROBABILITY
        );
        if (value) {
            value = value / 100;
        }
        return value;
    }
}

OpportunityInfoCard.html

<template>
    <lightning-card variant="Narrow" title={name} icon-name="standard:opportunity">

        <div class="slds-form" role="list">
            <div class="slds-form__row">
                <div class="slds-form__item" role="listitem">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label">
                            Amount
                        </span>
                        <div class="slds-form-element__control">
                            <lightning-formatted-number format-style="currency" value={amount}>
                            </lightning-formatted-number>
                        </div>
                    </div>
                </div>
                <div class="slds-form__item" role="listitem">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label">
                            Close Date
                        </span>
                        <div class="slds-form-element__control">
                            <lightning-formatted-date-time value={closeDate}>
                            </lightning-formatted-date-time>
                        </div>
                    </div>
                </div>
                <div class="slds-form__item" role="listitem">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label">
                            Probability
                        </span>
                        <div class="slds-form-element__control">
                            <lightning-formatted-number format-style="percent" value={probability}>
                            </lightning-formatted-number>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </lightning-card>

</template>

opportunityInfoCard.js-meta.xml

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

The output of the above code

When added on the Opportunity details page.

Further Readings

Check this post if you want to know "How to get parent records fields using getRecord in LWC?

LWC Series

I am writing a complete tutorial for LWC beginners, check out my all posts about it.

1. Lightning Web Components Folder Structure
2. Lightning data service with LWC
3. All methods from uiRecordApi LWC
4. Lightning Web Component createRecord example