0

I have a wizard on case object. The idea is to help agents to fill up the necessary data. however, I have trouble to show parent field (i.e Account.Name) in LWC HTML file.

Here is my code

Controller

public with sharing class CaseWizardController {
    @AuraEnabled(Cacheable=true)
    public static Case getCase(Id caseId){
        return [SELECT Id, CaseNumber, Origin, Unit__c, Country__c, RecordType.Name, ContactId, Contact.Name, AccountId, Account.Name FROM Case WHERE Id =:caseId LIMIT 1];
    }
}

JS

import { LightningElement, track, api, wire } from 'lwc';
import getCaseDetails from '@salesforce/apex/CaseWizardController.getCase';
import updateCase from '@salesforce/apex/CaseWizardController.updateCase';
import { refreshApex } from '@salesforce/apex';

export default class CaseWizard extends LightningElement {
    //pagination variables
    @track page = 1; //current page
    totalPages = 5; //total page

    @track error;

    @api recordId; //current caseId
    @api wiredCase;
    @api realCase;
    @track accountName;
    @track contactName;


    @wire(getCaseDetails, { caseId: '$recordId' })
    getCaseDetails(resp) {
        this.wiredCase = resp;
        this.realCase = { ... this.wiredCase.data };
        this.accountName = this.realCase.Account.Name; //tried this but it isn't working
        this.contactName = this.realCase.Contact.Name; //tried this but it isn't working
    }
}

HTML

<template>
    <lightning-card>
        <h2 slot="title">
            <lightning-icon icon-name="custom:custom9" size="small"></lightning-icon>
            &nbsp; Case Wizard
        </h2>
        <!--Case Information-->
        <template if:true={realCase}>
            <!--Requester-->
            <template if:true={firstPage}>
                <div class="slds-m-around_medium">
                    <h1 class="slds-text-heading_small">Requester</h1>
                </div>
                <div class="slds-m-around_medium">
                    <lightning-input type="text" name="account" readonly label="Account" value={accountName}>
                    </lightning-input>
                    <lightning-input type="text" name="contact" readonly label="Contact" value={contactName}>
                    </lightning-input>
                    <lightning-input type="text" name="client" readonly label="Client" value={realCase.Client_Type__c}>
                    </lightning-input>
                    <lightning-input type="text" name="clientSubType" readonly label="Client Sub Type"
                        value={realCase.Client_Sub_Type__c}>
                    </lightning-input>
                    <lightning-input type="text" name="relatedName" label="Related Name" value={realCase.Complainer_Name__c}></lightning-input>
                    <lightning-input type="text" name="relatedEmail" label="Related Email" value={realCase.Complainer_Email__c}></lightning-input>
                    <lightning-input type="text" name="relatedPhone" label="Related Phone" value={realCase.Go_Food_Complainer_Phone__c}></lightning-input>
                </div>
            </template>
       </template>
        <div slot="footer">
            <lightning-layout>
                <lightning-layout-item>
                    <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={handlePrevious}
                        disabled={firstPage}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item flexibility="grow"></lightning-layout-item>
                <lightning-layout-item>
                    <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right"
                        onclick={handleNext} disabled={fifthPage}></lightning-button>
                </lightning-layout-item>
                <lightning-layout-item>
                    <lightning-button label="Submit" variant="brand" title="Submit action" icon-position="right"
                        onclick={handleSubmit} disabled={notFifthPage}></lightning-button>
                </lightning-layout-item>
            </lightning-layout>

        </div>
    </lightning-card>
</template>

1 Answer 1

3

[Wire service] always return object with properties data and error. Initially, it returns with both undefined and so if you dont put conditions then you will get errors as you cant access Name of undefined. You can implement as below:

@wire(getCaseDetails, { caseId: '$recordId' })
consList({ data, error }) {
    if (data) {
        this.realCase = { ...data };
        this.accountName = this.realCase.Account.Name; //tried this but it isn't working
    } else if (error) {
        // handle error
        console.error('ERROR => ', error);
    }
}
1
  • Hi @salesforce-sas, thanks man for pointing out, I missed that! Sep 4, 2019 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.