0

I'm creating an LWC which is located on a record page. It should display fields of the record for which I am on the record page. The record is from a custom object called Agreement__c. However, the expected returned data doesn't display on the component. Here is my code:

The html:

<template>
    <lightning-card title="Amendment History">
        <div>recordId : {recordId}</div>
        <template if:true={responseReceived}>
            <p>Agreement name: {agreement.Name}</p>
        </template>
    </lightning-card>
</template>

The JS:

import { wire, api, LightningElement } from 'lwc';
import getAgreement from '@salesforce/apex/AgreementManager.getAgreementForId'

export default class DisplayAmendmentHistory extends LightningElement {

    @api
    recordId;
    @wire(getAgreement, {agreementId: '$recordId'}) agreement;

    get responseReceived(){
        if(this.agreement)
        {
            return true;
        }
        return false;
    }
}

The server side controller in Apex:

public with sharing class AgreementManager {
    
    @AuraEnabled(cacheable=true)
    public static Agreement__c getAgreementForId(Id agreementId) {
        return [SELECT Id, Name, Validation_Process__c FROM Agreement__c WHERE Id=:agreementId];
    }

}

What am I doing wrong?

2 Answers 2

0

The return value is in a property called "data", so the template should use:

<p>Agreement name: {agreement.data.Name}</p>

In addition, you'll want to check if this.agreement.data has a value or not.

get responseReceived(){
    return !!this.agreement.data; // truthy/falsy to true/false
}

But you don't need that check, actually, you can just detect if the data exists directly in the template:

<template>
    <lightning-card title="Amendment History">
        <div>recordId : {recordId}</div>
        <p lwc:if={agreement.data}>Agreement name: {agreement.data.Name}</p>
        </template>
    </lightning-card>
</template>
4
  • Hi @sfdcfox, thanks for the rapid response. I am now getting the following error message: A Component Error has occurred! Cannot read properties of undefined (reading 'Name')
    – Fra425
    Mar 12, 2023 at 17:40
  • @Fra425 Would you please edit your question to include the new code? I'd be happy to take a look at it for you.
    – sfdcfox
    Mar 12, 2023 at 18:29
  • Hi @sfdcfox, much appreciated! I found out something that worked. I posted it as an answer.
    – Fra425
    Mar 12, 2023 at 20:23
  • @Fra425 I mean, that works, but if you had 20 properties like this, you'd have nearly 200 lines of code to support those properties. I'd recommend trying to fix the actual problem.
    – sfdcfox
    Mar 12, 2023 at 20:33
0

I found a solution by applying @wire to a function (instead of applying it to a property, as I did). The working code is as follows:

In HTML:

    <template if:true={agreement}>
        <p>Agreement name: {agreement.Name}</p>
    </template>

In JS:

    @wire(getAgreement, {agreementId: '$recordId'}) wiredAgreement({data, error}){
    if(data){
        this.agreement = data;
        this.error = undefined;
        console.log(`Data returned: ${JSON.stringify(this.agreement)}`);
    }
    else if(error){
        this.error = error;
        this.agreement = undefined;
    }
};

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .