Custom Metadata in Lightning Web Component Without Apex

Custom Metadata provides a great flexibility to admins and developer to write and create a dynamic functionality. When it comes to Lightning Web Component, the question arises how efficiently custom metadata record can be accessed in it. The answer is you don’t need an apex call to get your custom metadata record in Lightning Web Component.

How to get Custom Metadata in Lightning Web Component without Apex?

You can use the wire service to get record data. To get the data, the Lightning Web Component uses the getRecord wire adapter.

Let’s create a Component with name lifeCycle to get the custom metadata record without calling an apex method and show the value on UI. First Create a custom metadata in the developer org. The Api name is Validation_Control__mdt. It also has a custom field with Api name isActive__c.

Once custom metadata object has been created, we also have created a record of it. I have hard coded the record-id in the component JavaScript file to get the record. You can dynamically pass the id.

lifeCycle.html

<template>
    <lightning-card title="My Custom Metadata" icon-name="standard:contact">
        <template if:true={metadatarecord.data}>
            <div class="slds-m-around_medium">
                <p>{label}</p>
                <p>{developername}</p>
                <p>{active}</p>
                <p>{language}</p>
            </div>
        </template>
    </lightning-card>
</template>

lifeCycle.js

First, the code imports the getRecord wire adapter from the lightning/uiRecordApi module, which is built on Lightning Data Service. Then it defines the fields to pass to the wire adapter.

The @wire decorator tells getRecord to get the values of the specified fields on the record with the specified $recordId. The $ means that the value is passed dynamically. When the value changes, the wire service provisions data and the component rerenders.

The data is provisioned to the data and error objects of the property decorated with @wire.

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
    'Validation_Control__mdt.MasterLabel',
    'Validation_Control__mdt.DeveloperName',
    'Validation_Control__mdt.isActive__c',
    'Validation_Control__mdt.Language',
];

export default class LifeCycle extends LightningElement {
   
    //Id is hardcoded for demo purpose. You can pass a dynamic id here
    recordId='m00B00000001hihIAA';

    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    metadatarecord;
    
    get label() {
        return this.metadatarecord.data.fields.MasterLabel.value;
    }

    get developername() {
        return this.metadatarecord.data.fields.DeveloperName.value;
    }

    get active() {
        return this.metadatarecord.data.fields.isActive__c.value;
    }

    get language() {
        return this.metadatarecord.data.fields.Language.value;
    }
}

lifeCycle.js-meta.xml

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

Demo

Add your component anywhere on the screen by editing the lightning page. The above components can be added to Home page, app or record page according to lifeCycle.js-meta.xml file.

References

• Get Record Data
• Lightning/ui*Api Wire Adapters and Functions
• Salesforce Objects Supported by  Lightning/ui*Api   Modules
• https://salesforcediaries.com/category/lightning-web-component/