Getting [NoErrorObjectAvailable] Script error on clicking a button of lightning datatable which fires a custom event from one component to another

apexlightninglightning-experiencelightning-web-components

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

The Problem below

Best Answer

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.

Related Solutions

[SalesForce] LWC: How to display “out of box” object hover

You can build a custom lwc in which you embed some sort of 'popover' overlay component. So yes, this is possible.

If your Layout is, for example, a Table, as follows:

<template>

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Name">Name</div>
            </th>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Age">Age</div>
            </th>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Birthday">Birthday</div>
            </th>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Height">Height</div>
            </th>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Sex">Sex</div>
            </th>
            <th class="slds-cell-buffer_right" scope="col">
                <div class="slds-truncate" title="Bear Weight">Weight</div>
            </th>
        </tr>
    </thead>
    <tbody>
    <template if:true={bears.data}>
        <div class="slds-m-around_medium">
            <template  for:each={bears.data} for:item="bear" for:index="index">

                <tr class={assignClass} key={bear.Id} data-rangerid={bear.Supervisor__c} onmouseout={hideData} onmouseover={showData}>

                    <td data-label="Bear Name" class="slds-cell-buffer_right">
                        <div class=slds-truncate title="Bear Name">{bear.Name}</div>
                    </td>
                    <td data-label="Bear Age" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Age">{bear.Age__c}</div>
                    </td>
                    <td data-label="Bear Birthday" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Birthday">{bear.Birthday__c}</div>
                    </td>
                    <td data-label="Bear Height" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Height">{bear.Height__c}</div>
                    </td>
                    <td data-label="Bear Sex" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Sex">{bear.Sex__c}</div>
                    </td>
                    <td data-label="Bear Weight" class="slds-cell-buffer_right">
                        <div class="slds-truncate" title="Bear Weight">{bear.Weight__c}</div>
                    </td>
                </tr>

                </template>
            </div>
    </template>
    </tbody>
</table>

you can "Build" a LWC that will act as a popover (a card for example, with an embeded lightning-record-view-form.

this is a sample lwc that I added at the bottom of my table:

<c-box-popover topmargin={top} leftmarginn={left} myranger={ranger}></c-box-popover>

it basically receives coordinates of where my cursor is located (you can do this as well in the child lwc).

my table component in return has uses onmouseover and onmouseout events for rendering/unrendering the card based on the id that is being passed to it.

Example:

showData(event){
    this.ranger = event.currentTarget.dataset.rangerid;
    this.left = event.clientX;
    this.top=event.clientY;
}
hideData(event){
    this.ranger = "";
}

My popover in returns, simply passes the id attribute aka, myranger to the record-view-form component:

<template>
<div>
    <template if:true={ranger} >
        <lightning-record-view-form
                record-id={ranger}
                object-api-name="Contact">
            <div class="potato slds-box" style={boxClass}>
                <lightning-output-field field-name="Name">
                </lightning-output-field>
                <lightning-output-field field-name="Email">
                </lightning-output-field>
                </div>
        </lightning-record-view-form>
    </template>
</div>

and as you can see, I dynamically assign a "style" attribute which I construct using Template literals

get boxClass() { 
    return `background-color:white; top:${this.top - 280}px; left:${this.left}px`;
  }

I did not put much effort in calculating screensize to properly place the popover, but it should give you the general idea.

You can find a sample Gist here

The data i used ot work with can be found on the build-apps-with-lwc Trailhead repository

[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] LWC: How to display “out of box” object hover

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

Related Topic