Owner name is not getting populated in LWC by using @wire decorator

Question

XML file:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="partnerOpportunityRecordRead">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>partner Opportunity Record Read LWC</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="existingOpportunity" type="String" default="ADD_OPPORTUNITY_ID"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

I've created LWC to populate opportunity fields in read-only mode. able to display all fields except opportunity owner. I've gone through multiple solutions provided by salesforce experts & done multiple changes in the js file, still facing the same issue.

.html file:

<template>
<lightning-card>
    <!-- Opportunity -->
      <!-- Display -->
        <template if:true={existingOpportunity}>
            <lightning-record-edit-form 
            record-id={existingOpportunity}
            object-api-name={opportunityObject}
            >
            <!-- Messages -->
            <lightning-messages></lightning-messages>
            <div class="slds-p-bottom_large slds-p-left_large">
            <br/>
            <!-- Fields -->
                <lightning-accordion active-section-name="A">
                    <lightning-accordion-section name="A" label="Opportunity Details">
                        <div class="slds-grid" style="color:rgb(15, 15, 15); font-weight: bold; font-size:13px">
                            <div class="slds-col slds-size_1-of-2">
                                <div class=" acc slds-list_horizontal slds-border_bottom">
                                    <label>Opportunity</label>
                                    <lightning-output-field variant="label-hidden" field-name={opportunityname}></lightning-output-field>
                                </div>
                                <div class=" acc slds-list_horizontal slds-border_bottom">
                                    <label>Account</label>
                                    <lightning-output-field variant="label-hidden" field-name={accountname}></lightning-output-field>
                                </div>
                                <div class="acc slds-border_bottom slds-list_horizontal">
                                    <label>Channel Partner Deal Stage</label>
                                    <lightning-output-field variant="label-hidden" field-name={channelpartnerdealstage}></lightning-output-field>
                                </div>
                                <div class="formfield slds-list_horizontal slds-border_bottom">
                                    <label>Owner</label>
                                    <lightning-formatted-text value={Owner}></lightning-formatted-text>
                                </div>
                            </div>
                            <div class="slds-col slds-size_2-of-2">
                                <div class="slds-col slds-size_1-of-2">
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Close Date</label>
                                        <lightning-output-field variant="label-hidden" field-name={closedate}></lightning-output-field>
                                    </div>
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Storage Product Energy (MWh)</label>
                                        <lightning-output-field variant="label-hidden" field-name={storageproductenergymwh}></lightning-output-field>
                                    </div>
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Storage Product Power (MW)</label>
                                        <lightning-output-field variant="label-hidden" field-name={storageproductpowermw}></lightning-output-field>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </lightning-accordion-section>
                </lightning-accordion>
            </div>
            <br/>
        </lightning-record-edit-form>
        </template>

</lightning-card>

.js file :

import { LightningElement, api, wire} from 'lwc';
import { ShowToastEvent }                                from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue }                      from 'lightning/uiRecordApi';
import OWNER_NAME                                        from '@salesforce/schema/Opportunity.Owner.Name';
import Opportunity_OBJECT                                from '@salesforce/schema/Opportunity';
import Opportunity_OPPORTUNITY_NAME_FIELD                from '@salesforce/schema/Opportunity.Name';
import Opportunity_ACCOUNT_NAME_FIELD                    from '@salesforce/schema/Opportunity.Account_Name_Text__c';
import Opportunity_CHANNEL_PARTNER_DEAL_STAGE_FIELD      from '@salesforce/schema/Opportunity.Channel_Partner_Deal_Stage__c';
import Opportunity_CLOSE_DATE_FIELD                      from '@salesforce/schema/Opportunity.CloseDate';
import Opportunity_STORAGE_PRODUCT_ENERGY_MWH_FIELD      from '@salesforce/schema/Opportunity.Opp_Product_Product_Energy_kWh__c';
import Opportunity_STORAGE_PRODUCT_POWER_MW_FIELD        from '@salesforce/schema/Opportunity.Opp_Product_Product_Power_kW__c';
export default class PartnerLeadRecordEditForm extends LightningElement {
   @api  existingOpportunity;
   @api  recordID;
    opportunityObject        = Opportunity_OBJECT;
    opportunityname          = Opportunity_OPPORTUNITY_NAME_FIELD;
    accountname              = Opportunity_ACCOUNT_NAME_FIELD;
    channelpartnerdealstage  = Opportunity_CHANNEL_PARTNER_DEAL_STAGE_FIELD;
    closedate                = Opportunity_CLOSE_DATE_FIELD;
    storageproductenergymwh  = Opportunity_STORAGE_PRODUCT_ENERGY_MWH_FIELD;
    storageproductpowermw    = Opportunity_STORAGE_PRODUCT_POWER_MW_FIELD;
    //Owner                    = OWNER_FIRST_NAME;
    @wire(getRecord, { recordID: '$recordID', fields: [OWNER_NAME]})
    Opportunity;

    get Owner() {
      return getFieldValue(this.Opportunity.data, OWNER_NAME);
    }

    wiredRecord({ error, data }) {
      if (error) {
          let message = 'Unknown error';
          if (Array.isArray(error.body)) {
              message = error.body.map(e => e.message).join(', ');
          } else if (typeof error.body.message === 'string') {
              message = error.body.message;
          }
          this.dispatchEvent(
              new ShowToastEvent({
                  title: 'Error loading opportunity',
                  message,
                  variant: 'error',
              }),
          );
            } else if (data) {
               this.opportunity = data;
               this.Owner = this.opportunity.Owner.Name.value;
            }
    }
}

Can anyone please suggest what exactly i'm doing wrong in code. I've tried with putting recordid value in js file still no luck.

I want to display owner name in text format, currently it is showing in hyperlink to user record.

Answer 1

Try this one:

import { LightningElement, api, wire} from 'lwc';
import { ShowToastEvent }                                from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue }                      from 'lightning/uiRecordApi';
import OWNER_NAME                                        from '@salesforce/schema/Opportunity.Owner.Name';
import Opportunity_OBJECT                                from '@salesforce/schema/Opportunity';
import Opportunity_OPPORTUNITY_NAME_FIELD                from '@salesforce/schema/Opportunity.Name';
import Opportunity_ACCOUNT_NAME_FIELD                    from '@salesforce/schema/Opportunity.Account_Name_Text__c';
import Opportunity_CHANNEL_PARTNER_DEAL_STAGE_FIELD      from '@salesforce/schema/Opportunity.Channel_Partner_Deal_Stage__c';
import Opportunity_CLOSE_DATE_FIELD                      from '@salesforce/schema/Opportunity.CloseDate';
import Opportunity_STORAGE_PRODUCT_ENERGY_MWH_FIELD      from '@salesforce/schema/Opportunity.Opp_Product_Product_Energy_kWh__c';
import Opportunity_STORAGE_PRODUCT_POWER_MW_FIELD        from '@salesforce/schema/Opportunity.Opp_Product_Product_Power_kW__c';

const fields = : [OWNER_NAME];

export default class PartnerLeadRecordEditForm extends LightningElement {
   @api  existingOpportunity;
   @api  recordId;
    opportunityObject        = Opportunity_OBJECT;
    opportunityname          = Opportunity_OPPORTUNITY_NAME_FIELD;
    accountname              = Opportunity_ACCOUNT_NAME_FIELD;
    channelpartnerdealstage  = Opportunity_CHANNEL_PARTNER_DEAL_STAGE_FIELD;
    closedate                = Opportunity_CLOSE_DATE_FIELD;
    storageproductenergymwh  = Opportunity_STORAGE_PRODUCT_ENERGY_MWH_FIELD;
    storageproductpowermw    = Opportunity_STORAGE_PRODUCT_POWER_MW_FIELD;
    //Owner                    = OWNER_FIRST_NAME;

@wire(getRecord, { recordId: '$recordId', fields})
Opportunity;

get ownerName() {
  return getFieldValue(this.Opportunity.data, OWNER_NAME);
}

wiredRecord({ error, data }) {
  if (error) {
      let message = 'Unknown error';
      if (Array.isArray(error.body)) {
          message = error.body.map(e => e.message).join(', ');
      } else if (typeof error.body.message === 'string') {
          message = error.body.message;
      }
      this.dispatchEvent(
          new ShowToastEvent({
              title: 'Error loading opportunity',
              message,
              variant: 'error',
          }),
      );
        } else if (data) {
           this.opportunity = data;
           this.Owner = this.opportunity.Owner.Name.value;
        }
   }
 }

// HTML

<template>
<lightning-card>
    <!-- Opportunity -->
      <!-- Display -->
        <template if:true={existingOpportunity}>
            <lightning-record-edit-form 
            record-id={existingOpportunity}
            object-api-name={opportunityObject}
            >
            <!-- Messages -->
            <lightning-messages></lightning-messages>
            <div class="slds-p-bottom_large slds-p-left_large">
            <br/>
            <!-- Fields -->
                <lightning-accordion active-section-name="A">
                    <lightning-accordion-section name="A" label="Opportunity Details">
                        <div class="slds-grid" style="color:rgb(15, 15, 15); font-weight: bold; font-size:13px">
                            <div class="slds-col slds-size_1-of-2">
                                <div class=" acc slds-list_horizontal slds-border_bottom">
                                    <label>Opportunity</label>
                                    <lightning-output-field variant="label-hidden" field-name={opportunityname}></lightning-output-field>
                                </div>
                                <div class=" acc slds-list_horizontal slds-border_bottom">
                                    <label>Account</label>
                                    <lightning-output-field variant="label-hidden" field-name={accountname}></lightning-output-field>
                                </div>
                                <div class="acc slds-border_bottom slds-list_horizontal">
                                    <label>Channel Partner Deal Stage</label>
                                    <lightning-output-field variant="label-hidden" field-name={channelpartnerdealstage}></lightning-output-field>
                                </div>
                                <div class="formfield slds-list_horizontal slds-border_bottom">
                                    <label>Owner: [![enter image description here][1]][1]</label>
                                    <lightning-formatted-text value={ownerName}></lightning-formatted-text>
                                </div>
                            </div>
                            <div class="slds-col slds-size_2-of-2">
                                <div class="slds-col slds-size_1-of-2">
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Close Date</label>
                                        <lightning-output-field variant="label-hidden" field-name={closedate}></lightning-output-field>
                                    </div>
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Storage Product Energy (MWh)</label>
                                        <lightning-output-field variant="label-hidden" field-name={storageproductenergymwh}></lightning-output-field>
                                    </div>
                                    <div class="formfield slds-border_bottom slds-list_horizontal">
                                        <label>Storage Product Power (MW)</label>
                                        <lightning-output-field variant="label-hidden" field-name={storageproductpowermw}></lightning-output-field>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </lightning-accordion-section>
                </lightning-accordion>
            </div>
            <br/>
        </lightning-record-edit-form>
        </template>

</lightning-card>

This is working:

Answer 2

The problem is here in the wired property.

@wire(getRecord, { recordID: '$recordID', fields: [OWNER_NAME]})
Opportunity;

You are passing recordID which you have not defined anywhere. You have passed the record id in the existingOpportunity property of your component. Also, the parameter name for getRecord is invalid(recordID), it should be recordId instead.

So you need to change the wired property as below

@wire(getRecord, { recordId: '$existingOpportunity', fields: [OWNER_NAME]})
Opportunity;

---

Apart from the above problem here are some things you can do in a better way.

Instead of existingOpportunity, you could have used more realistic name to the id like recordId or existingOpportunityId. Personally, I would prefer recordId

recordID was not needed as you already had existingOpportunity.

Answer 3

The best way to find the issue is to check the data log values and use the relevant property from the JSON.

In the following JSON output from console.log(data):

fields{
   Name: {displayValue: null, value: "Sample Account"}
   Owner: {displayValue: "User User", value: {…}}
}

The best way to access the Owner's Name is through the displayValue field.

data.fields.Owner.displayValue - should work in this case.