1

I have a LWC component accountList which is a datatable. It has Account names and a show detail button for each row. When I click show detail button a separate component should populate the account details (Name, Industry, Rating) in a lightning card. Im using Custom Event for this and a main parent component named accountDisplay which acts as a middleman. Im using this account display component for the following reason:- I wish to fire a custom event which passes record ID from accountList to accountDisplay and then the accountDisplay component will catch the event and store the record ID in a public variable. Then finally a third component (accountDetails) will make use of this public variable recordID and use a lightning record view form to populate the data. also I use event.detail.row.id to get the ID because this is used to get rowID from Datatable. When I click the show details button on my lightning page. I get the error: Getting [NoErrorObjectAvailable] Script error on accountList.js as per stack trace. Im trying hard but unable to solve the problem. Please help

Here is my code

AccountList.html

<template>
    <lightning-card title="Account List" class="slds-border_bottom" icon-name="custom:custom63">
        <template if:true={accounts.data}>
               
  
            <lightning-datatable key-field="Id"  
                                 data={accounts.data}  
                                 columns={columns}  
                                 hide-checkbox-column="true"   
                                 onrowaction={callRowAction}>  
            </lightning-datatable>            
    
    </template>

    </lightning-card>
</template>

AccountList.js

import { LightningElement, track, wire, api } from 'lwc';
import getAccList from '@salesforce/apex/GetAccountList.getAccList';

export default class AccountList extends LightningElement {

    

    @track columns = [
        { label: 'Name', fieldName: 'Name', type: 'text' },
        {type: "button", typeAttributes: {  
            label: 'Show Details',  
            name: 'Show Details',  
            title: 'Show Details for this account',  
            disabled: false,  
            value: 'view',  
            iconPosition: 'left'
        }}

    ]
    @wire(getAccList)accounts;

    callRowAction(event){
        event.preventDefault();
        debugger;
        const recId =  event.detail.row.Id;
       this.dispatchEvent(new CustomEvent("rowselected",{detail:recId}));
    }

}

AccountDisplay.html (My parent LWC component)

<template>
    <div class="slds-grid slds-gutters">
          <div class="slds-col slds-size_2-of-3">
                <c-account-list onrowselected ={accountselected}></c-account-list>
          </div>
          
          <div class="slds-col slds-size_1-of-3">
              <div class="slds-card">
                      <div class="slds-p-around_medium">
                            <c-account-details recordid ={recordId}></c-account-details>
                      </div>
              </div>

          </div>
    </div>
 </template>

AccountDisplay.js

import { api, LightningElement } from 'lwc';

export default class AccountDisplay extends LightningElement {

    @api
    recordId;

    accountselected(event){

        this.recordId= event.detail.row.Id;
    }

}

My AccountDetails.html

<template>

    <lightning-card title ="AccountDetails">
        <lightning-record-view-form
        object-api-name="Account"
        record-id={recordId} >
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-output-field field-name="Name"> </lightning-output-field>
                <lightning-output-field field-name="Rating"> </lightning-output-field>
            </div>
            <div class="slds-col slds-size_2-of-2">
                <lightning-output-field field-name="Industry"> </lightning-output-field>
            </div>
        </div>
        </lightning-record-view-form>
        <div class="slds-clearfix">
            <lightning-button variant="brand" label="Create Contact" onclick={actionToCreateContactNav} class="slds-float_right"></lightning-button>
        </div>
    </lightning-card>
</template>

AccountDetails.js

import { LightningElement,api, wire, track } from 'lwc';
import getAccDetails from '@salesforce/apex/GetAccountList.getAccDetails';

export default class AccountDetails extends LightningElement {

@api
recordId;

@track
accountId;

@wire(getAccDetails, {theId: '$accountId'}) accounts;


}

Apex Class

public with sharing class GetAccountList {
   
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        List<Account> accList = [SELECT Id, Name, Rating, Industry
                                 FROM Account 
                                 LIMIT 3 ];
        return accList;
    }

    @AuraEnabled(cacheable=true)
    public static Account getAccDetails(Id theId){

        Account acc = [SELECT Id, Name, Rating, Industry 
                        FROM Account 
                        WHERE Id =:theId];

            return acc;            


    }
}

This is what I have My Components

The Problem belowenter image description here

4
  • In AccountDisplay.js, @api recordid should be just recordId. By adding @api, you make the property read-only for your component. This shouldn't necessarily cause the error, but it's the only thing I see that's immediately wrong.
    – sfdcfox
    Mar 22 at 10:57
  • I thought I need to make it publicly reactive so I added the @api decorator. Nevertheless, I tried removing it and deployed and tried again. The issue still persists. Also I saw that in my AccountDetails.js Im wiring accountid to the Apex method but it is not set anywhere so I added <c-account-details accountid ={recordId} in accountDisplay.html to the account details and made accountID as public by api decorator instead of track also but even that did not help. Running out of ideas now
    – Amax1
    Mar 22 at 11:04
  • @api doesn't make a property reactive, it makes it read-only. Only the child component should be using @api.
    – sfdcfox
    Mar 22 at 11:16
  • yes ensured parent doesnt have @api and only child (accountDetails) does. Still the same issue.
    – Amax1
    Mar 22 at 11:21

1 Answer 1

1

Running this in an Aura app, I got a much more useful error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Id')

Which made me realize that this event handler was wrong:

accountselected(event){
    this.recordId= event.detail.row.Id;
}

It should have been just:

accountselected(event){
    this.recordId= event.detail;
}

But that's kind of unusual, so I'd suggest adding a property to the event detail:

  callRowAction(event) {
    const recordId = event.detail.row.Id;
    this.dispatchEvent(new CustomEvent("rowselected", { detail: { recordId } }));
  }

Which makes the event handler:

accountselected(event){
    this.recordId= event.detail.recordId;
}

In addition, you have properties @api recordId and @track accountId, but you're not using accountId. In AccountDetails.js:

@wire(getAccDetails, {theId: '$accountId'}) accounts;

Should be:

@wire(getAccDetails, {theId: '$recordId'}) accounts;

Then, in accountDisplay.html, you also had a mistyped property:

<c-account-details recordid ={recordId}></c-account-details>

Should be:

<c-account-details record-id ={recordId}></c-account-details>

It's also worth noting that you're not actually using the getAccDetails method, since you used a lightning-record-view-form. You don't need the wire method at this point.

2
  • Resolved !! Im a newbie to LWC so Thanks a ton !! :D
    – Amax1
    Mar 22 at 11:42
  • @Amax1 You're welcome!
    – sfdcfox
    Mar 22 at 11:44

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.