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

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.

enter image description here

Best Answer

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:

enter image description here