How to fetch/customize the custom metadata and display the list of metadata in lightning component using Apex class in Salesforce Lightning Web Component — LWC

[vijayk3327]

In this post we are going to learn about How to How to fetch/customize the custom metadata and display the list of metadata in lightning component using Apex class in Salesforce Lightning Web Component — LWC .

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcFetchCustomMetaData.html

`

How to Fetch Custom Meta Data in Lightning Web Component (LWC)

</lightning-card>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcFetchCustomMetaData.js

`import { LightningElement, wire } from 'lwc';
import fetchMetaListLwc from '@salesforce/apex/lwcCustomMetaDataCtrl.fetchMetaListLwc';
const COLUMNS = [
{ label: 'Label', fieldName: 'MasterLabel' },
{ label: 'Student Name', fieldName: 'Student_Name__c' },
{ label: 'Phone', fieldName: 'Phone__c' },
{ label: 'Email', fieldName: 'Email__c' },
{ label: 'Country', fieldName: 'Country__c' },
{ label: 'City', fieldName: 'City__c' },
];

export default class LwcFetchCustomMetaData extends LightningElement {
records;
wiredRecords;
error;
columns = COLUMNS;
draftValues = [];

@wire( fetchMetaListLwc )  
wiredRecs( value ) {

    this.wiredRecords = value;
    const { data, error } = value;

    if ( data ) {
                    
        this.records = data;
        this.error = undefined;

    } else if ( error ) {

        this.error = error;
        this.records = undefined;

    }

} 

}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcFetchCustomMetaData.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 4:- Create Apex Class : lwcCustomMetaDataCtrl.cls

`public with sharing class lwcCustomMetaDataCtrl {

@AuraEnabled( cacheable=true )  
public static List < Student_Basic_Detail__mdt > fetchMetaListLwc() {
    
    List < Student_Basic_Detail__mdt > fetchMeta = [ SELECT Id, MasterLabel, City__c, Country__c, Email__c, Phone__c, Student_Name__c FROM Student_Basic_Detail__mdt ];
    return fetchMeta;

}

}`

→ Get source code live demo link:-