Records not appearing on account dataTable

datatablelightning-datatablelightning-web-components

I am not able to pull any of the related records to the account dataTable. I want to see the related records for Trade_Lanes__c on the data table, but nothing shows up. Below is my code.

Apex Controller:

public with sharing class AccountRelatedObj {
@auraEnabled(cacheable=true)
public static List<Trade_Lane__c> getContactsRelatedToAccount(String accId) {
    system.debug('accId >> ' + accId);
    return [SELECT Name, Annual_Ocean_Volume__c,Annual_Air_Volume_kg__c, Annual_Road_Volume_cbm__c from Trade_Lane__c where AccountId__c = :accId];
}

HTML:

<template>
    <lightning-card title="LWC Record Id Example ">
        <lightning-datatable data={TradeLanes} columns={columns} key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template>

JS:

import { LightningElement, track, wire, api } from 'lwc';
import getContactsRelatedToAccount from 
'@salesforce/apex/AccountRelatedObj.getContactsRelatedToAccount';
export default class AccountRelatedContacts extends LightningElement {
    @api recordId;
    @track TradeLanes;
    @track columns = [
        { label: 'Name', fieldName: 'name' },
        { label: 'Ocean Volume', fieldName: 'annual_ocean_volume__c' },
        { label: 'Air Volume', fieldName: 'annual_air_volume_kg__c'},
        { label: 'Road Volume', fieldName: 'annual_road_volume_cmb__c'},


        
    ];

    @wire(getContactsRelatedToAccount, {accId: '$recordId'}) 
    WireContactRecords({error, data}){
        if(data){
            this.contacts = data;
            this.error = undefined;
        }else{
            this.error = error;
            this.contacts = undefined;
        }
    }
}

Best Answer

Two things, here. First, you're assigning to this.contacts, which is the wrong variable. Secondly, JavaScript is cAsE-sEnSiTiVe. I suspect you're not seeing your data because the fieldName properties are all lowercase. You can, and should, import the field names to avoid case sensitivity problems.

As a side note, you're not translating the data in your wire handler, so you may as well just get rid of it.

import { LightningElement, wire, api } from "lwc";
import getContactsRelatedToAccount from "@salesforce/apex/AccountRelatedObj.getContactsRelatedToAccount";
import TRADE_LANE_NAME from "@salesforce/schema/Trade_Lane__c.Name";
import TRADE_LANE_ANNUAL_OCEAN_VOLUME from "@salesforce/schema/Trade_Lane__c.Annual_Ocean_Volume__c";
import TRADE_LANE_ANNUAL_AIR_VOLUME_KG from "@salesforce/schema/Trade_Lane__c.Annual_Air_Volume_KG__c";
import TRADE_LANE_ANNUAL_ROAD_VOLUME_CMB from "@salesforce/schema/Trade_Lane__c.Annual_ROAD_Volume_CMB__c";

export default class AccountRelatedContacts extends LightningElement {
  @api recordId;
  columns = [
    { label: "Name", fieldName: TRADE_LANE_NAME.fieldApiName },
    {
      label: "Ocean Volume",
      fieldName: TRADE_LANE_ANNUAL_OCEAN_VOLUME.fieldApiName,
    },
    {
      label: "Air Volume",
      fieldName: TRADE_LANE_ANNUAL_AIR_VOLUME_KG.fieldApiName,
    },
    {
      label: "Road Volume",
      fieldName: TRADE_LANE_ANNUAL_ROAD_VOLUME_CMB.fieldApiName,
    },
  ];
  @wire(getContactsRelatedToAccount, { accId: "$recordId" }) TradeLanes;
}

Related Solutions

[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.

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

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.

Best Answer

Related Solutions

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

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

Related Topic