[SalesForce] Show parent field in LWC

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];
    }
}

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>

Best Answer

[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);
    }
}

Related Solutions

[SalesForce] Dynamic Id declaration with added text (Id-Text) in LWC

You don't set the actual id of an element. These are mutated at runtime to be globally unique, and are managed by the runtime. Instead, just modify the data so that you have an icon name:

this.data = [...data].map(datum => ({ ...datum, iconName: '...' }));

Then, when you want to change the icon:

this.data.find(row => row.Id === event.target.dataset.recordId).iconName = '...';

I wrote a playground to demonstrate this.

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track data;
    connectedCallback() {
        // Just to show some data here //
        this.data = 'abcde'.split('').map(value=>({id:value,iconName:'utility:arrowup'}));
    }
    toggle(event) {
        const row = this.data.find(row => event.target.dataset.rowId === row.id);
        row.iconName = row.iconName === 'utility:arrowup'? 'utility:arrowdown': 'utility:arrowup';
    }
}

<template>
    <template for:each={data} for:item="row">
        <div key={row.id}>
            <lightning-button-icon onclick={toggle} data-row-id={row.id} icon-name={row.iconName}>
            </lightning-button-icon>
        </div>
    </template>
</template>

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

Best Answer

Related Solutions

[SalesForce] Dynamic Id declaration with added text (Id-Text) in LWC

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

Related Topic