2

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

4

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 May 22 '20 at 22:32
  • 1
    Good point @adraincg, they are part of uiRecordApi where as OP is using uiListApi – Raul May 22 '20 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 May 23 '20 at 9:25
  • 1
    Could you verify if the records are available on the list view when you go to the accounts tab? – Raul May 23 '20 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 May 23 '20 at 10:02

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.