Tuesday, December 17, 2019

How to get Custom Metadata Type data without Apex in Lightning Web Components(lwc)

What is Custom Metadata Type in Salesforce?
Custom metadata are like custom settings but records in custom metadata type considered as metadata rather than data.
These are typically used to define application configurations that need to be migrated from one environment to another, or packaged and installed.

You cannot perform CUD (Create, Update, Delete) operation on custom metadata type in apex.

Custom Metadata Type object suffix with __mdt

Normally in apex, we are using SOQL query to get the Custom metadata type data.

How to get the Custom Metadata Type data in Lightning web components?

To get the Custom metadata type data in the lightning web component you can use the wire service to get record data. To get the data, the Lightning Web Component uses the getRecord wire adapter.

Syntax
import { getRecord } from 'lightning/uiRecordApi';

For the demo, I created the Country and Amount(Country_And_Amount__mdt) Custom Metadata type object and records.

Country_And_Amount__mdt object


Country_And_Amount__mdt records



HTML Code
<template>
    <lightning-card title="Custom Metadata Types Record Values">
        <template if:true={objMetadataValues}>
            <dl class="slds-list_horizontal slds-wrap" style="margin-left: 3%;">
                <dt class="slds-item_label slds-truncate" title="First Name">Master Label</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.MasterLabel}</b></dd>
                <dt class="slds-item_label slds-truncate" title="Last Name">Developer Name:</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.DeveloperName}</b></dd>
                <dt class="slds-item_label slds-truncate" title="Full Name">Amount:</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.Amount}</b></dd>
            </dl>
        </template>
    </lightning-card>
</template>

Javascript Controller
import { LightningElement, track, wire} from 'lwc';

// import to get the record details based on record id
import { getRecord } from 'lightning/uiRecordApi';

export default class metadataDetailsInLWC extends LightningElement {

    @track objMetadataValues = {};
    
    // using wire service getting current user data
    // HardCoded the Record Id you can dynamically pass the record id using track or api decorates
    @wire(getRecord, { recordId: 'm02B00000006hGx', fields: ['Country_And_Amount__mdt.MasterLabel', 'Country_And_Amount__mdt.DeveloperName', 'Country_And_Amount__mdt.Amount__c'] })
    userData({error, data}) {
        if(data) {
            let currentData = data.fields;
            this.objMetadataValues = {
                MasterLabel : currentData.MasterLabel.value,
                DeveloperName: currentData.DeveloperName.value,
                Amount: currentData.Amount__c.value

            }
        } 
        else if(error) {
            window.console.log('error ====> '+JSON.stringify(error))
        } 
    }

}

Output

4 comments:

  1. How is userData called?

    ReplyDelete
    Replies
    1. userData is a private property or function that receives the stream of data from the wire service.

      Delete
  2. Hello Could you please explain how to get dynamic recordID.

    ReplyDelete