4

I am using @wire and getListUi to get a list view of accounts. I have a lightning-datatable where, for now, I just want to display the name of each account.

Relevant part of the template:

<template if:true={listView.data}>
    <lightning-datatable
        key-field="id"
        data={accounts}
        columns={columns}>
    </lightning-datatable>
</template>

Here is my JS code with @wire and getter for accounts:

import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

const columns = [
    {
        label: 'Account Name', 
        fieldName: 'Name',
        type: 'text'
    }
];
export default class AccountExample extends LightningElement {
    columns = columns;

    @wire(getListUi, {
        objectApiName: ACCOUNT_OBJECT,
        listViewId: '00B5I000001O1O3UAK',
        pageSize: 5
    })
    listView;

    get accounts() {
        console.log(JSON.stringify(this.listView.data.records.records, null, 4));
        return this.listView.data.records.records;
    }
}

In the console.log() statement I am seeing all of the values I expect. The lightning-datatable does appear to be populated but there is not text showing up. It's as if the text is the same colour as the datatable background.

I have seen a few questions on here with a similar problem however they are using uiRecordApi

1 Answer 1

7

If you look at the records data, the name is deep in the records returned by the wire method.

[{
    "apiName": "Account",
    "childRelationships": {},
    "id": "0012p00002NlX48AAF",
    "lastModifiedById": "0052p000009CZDSAA4",
    "lastModifiedDate": "2019-06-17T06:57:46.000Z",
    "recordTypeId": "012000000000000AAA",
    "recordTypeInfo": null,
    "systemModstamp": "2019-06-17T06:57:46.000Z",
    "fields": {
        "BillingState": {
            "displayValue": null,
            "value": null
        },
        "Name": {
            "displayValue": null,
            "value": "Burlington Textiles Corp of America"
        },

So the data is not directly compatible with the lightning-datatable, as the data table expects the name as a first level property.

You can use JavaScript map method to prepare appropriate array, changes to the accounts method as bellow gives me account names in the table.

get accounts() {
    console.log('accounts', JSON.stringify(this.listView.data.records.records, null, 4));

    const records = this.listView.data.records.records;

    // use map to prepare a new array of Accounts with Name property
    const accountsJson = records.map(record => {
        let newObject = {}
        newObject["Name"] = record.fields["Name"].value;
        return newObject;
    })
    return accountsJson;
}

Please note that you may have to do some exception handling while accessing records and the field values - record.fields["Name"].value.

8
  • 3
    You can use getFieldValue and getFieldDisplayValue to avoid having to access the record data manually and all the possible errors that could come from that.
    – adriancg
    Commented May 22, 2020 at 22:32
  • 1
    Good point @adraincg, they are part of uiRecordApi where as OP is using uiListApi
    – Raul
    Commented May 22, 2020 at 23:11
  • Thanks! However I am now getting this error intermittently: Cannot read property 'records' of undefined. Do I need to make sure that listView is assigned before the get accounts() function is called from the template?
    – Luke Bray
    Commented May 23, 2020 at 9:25
  • 1
    Could you verify if the records are available on the list view when you go to the accounts tab?
    – Raul
    Commented May 23, 2020 at 9:31
  • 1
    I was using an Id to a custom list view which was just a duplicate of the All Accounts view. I changed to use the default one and it seems to be working now.
    – Luke Bray
    Commented May 23, 2020 at 10:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .