List View Metadata in LWC using getListInfoByName

This post will walk you through the implementation to get list view Metadata in LWC (Lightning Web Component) using getListInfoByName. There might be a requirement to fetch the metadata of the list view in Lightning Web Component to create a table or something. With the help of the getListInfoByName wire adapter, we can easily fetch the list view metadata in the Lightning Web Component.

Let’s hop into the implementation.

Implementation

In this implementation, we will fetch the metadata of the list view My Cases of Case object.

First, create a Lightning Web Component, say listInfos. To get the list view metadata in LWC, we first need to include a wire adapter getListInfoByName from the lightning/uiListsApi module:

import { getListInfoByName } from 'lightning/uiListsApi';

Then, get the Case object schema using @salesforce/schema module:

import CASE_OBJECT from '@salesforce/schema/Case';

Now, we just need to use the wire adapter getListInfoByName with wire function and pass the below parameters to get the list view metadata:

  • objectApiName: API name of the object.
  • listViewApiName: API Name of the list view.
  • propertyOrFunction: Receives the stream of data from wire service.

Also Read:

This is how our JavaScript would look:

listInfos.js

import { LightningElement, wire } from 'lwc';
import { getListInfoByName } from 'lightning/uiListsApi';
import CASE_OBJECT from '@salesforce/schema/Case';

export default class ListInfos extends LightningElement {
    error;
    displayColumns;

    @wire(getListInfoByName, { objectApiName: CASE_OBJECT.objectApiName, listViewApiName: 'MyCases' })
    listInfo({ error, data }) {
        if (data) {
            this.displayColumns = data.displayColumns;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.displayColumns = undefined;
        }
    }
}

Finally, all we need to do is to use the displayColumns property returned by the getListInfoByName wire adapter to display the metadata like fieldApiName and label.

This is how our HTML file would look:

listInfos.html

<template>
    <lightning-card title="List View Information - My Cases">
        <template if:true={displayColumns}>
            <div class="slds-m-around_medium">
                <table>
                    <tr>
                        <th>API Name</th>
                        <th>Label</th>
                    </tr>
                    <template for:each={displayColumns} for:item="col">
                        <tr key={col.fieldApiName}>
                            <td>{col.fieldApiName}</td>
                            <td>{col.label}</td>
                        </tr>
                    </template>
                </table>
            </div>
        </template>
    </lightning-card>  
</template>

List View Metadata in LWC using getListInfoByName

This is how our component would look like:

List View Metadata in LWC using getListInfoByName
List View Metadata in LWC using getListInfoByName

Please keep in mind that lightning/uiListApi module and its adapter getListUi are deprecated and no longer update. Instead, use lightning/uiListsApi with the getListInfoByName wire adapter.

Also Read:

That is all from this post. If you don’t want to miss new implementations, please Subscribe here.

If you want to know more about getListInfoByName, please check official Salesforce documentation here.

See you in the next implementation. Thanks.

3 thoughts on “List View Metadata in LWC using getListInfoByName”

  1. Thanks for the post ….
    With uilistapi we are able to get the data that matches the criteria but it with new api uilistsapi we don’t have that method anymore
    Any alternative?

    Reply
  2. Any specific reason to import Case from Schema. Can’t we do directly like below.
    @wire(getListInfoByName, { objectApiName: Case, listViewApiName: ‘MyCases’ })

    Reply
    • It is good practice to import Objects and Fields from Schema. If we import any Custom Field or Object using Schema in LWC, and if we try to delete it, we will get an error that this Field or Object is referenced in the LWC component. If we directly import it without Schema, we won’t get that error.

      Reply

Leave a Comment