How to query custom metadata in apex and fetch/display multiple custom metadata records through selected Picklist value and iterate different types of metadata value in aura lightning component Salesforce | how to return data from multiple custom metadata API through aura:handler change method in lightning component Salesforce

Hey guys, today in this post we are going to learn about How to query custom metadata in apex and fetch/display multiple custom metadata records through selected Picklist value and iterate different types of metadata value in aura lightning component Salesforce.

What is metadata?

Metadata is data that describes other data. For example, in a Salesforce org, there is a standard object called Account. When you add a record with a customer’s contact information to an Account, you are adding metadata and data. Field names, such as first name and last name are metadata. The values in those fields.. To know more about Custom Metadata Click Here.

How we can use metadata relationship fields to look up records of other custom metadata types.

Metadata relationship fields work like relationship fields for standard or custom objects. But because they are custom metadata types, they have the same benefits of application configuration data—the best of both worlds, which is nice because our customers like flexibility. To know more details about metadata relationship Click Here.

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

Files we used to get custom metadata and display in aura component in Salesforce

customMetaLanderCmp.cmp	Lightning Component	It is used for create a table for Iterate the custom metadata list values on lightning component
customMetaLanderCmpController.js	JavaScript Controller	It is hold Javascript doInit functionality.
customMetaLanderCmpHelper.js	JavaScript Controller Helper	It is hold for Javascript Helper Function to get Custom Metadata values from apex method.
customMetaLanderCtrl.apxc	Apex Controller	It is used for get List of Custom Metadata values from Apex Class Method
customMetaLanderCmpApp.app	Lightning Application	It is used for call the component and preview on browser.

Real time scenarios:- Create multiple custom metadata API and fetch the metadata value using apex method through selected picklist value and aura:handler change method.

Don’t forget to check out:- 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. Click Here For More Information

Final Output

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps

Create Lightning Component

Step 1:- Create Lightning Component : customMetaLanderCmp.cmp

From Developer Console >> File >> New >> Lightning Component

customMetaLanderCmp.cmp [Lightning Component File]

<aura:component controller="customMetaLanderCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

	<aura:attribute name="customCrdtlObj" type="Custom_Metadata__mdt" default="{'sobjectType':'Custom_Metadata__mdt'}"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="landerPickListItems" type="Custom_Metadata__mdt[]"/>

    <aura:handler name="change" value="{!v.landerVal}" action="{!c.handleChangeAction}"/>

    <aura:attribute name="landerVal" type="string" default=""/>

    <aura:attribute name="customCrdtlList" type="List"/>

    <aura:attribute name="hdfcCrdtlList" type="List"/>

    <aura:attribute name="idbiCrdtlList" type="List"/>

    <aura:attribute name="targetLanderVal" type="string"/>

```
 
```
```
    <lightning:card>
```
```
 
```

        <div class="slds slds-p-around_medium">

            <div class="slds-grid slds-wrap">

                <div class="slds-col slds-size_6-of-12 slds-m-bottom_small">

                    <div class="slds-form-element">

                        <label class="slds-form-element__label">Landers Master (Metadata)</label>

                        <div class="slds-form-element__controller">

                            <ui:inputSelect class="slds-select" aura:id="landersId" change="{!c.changeTarget}" value="{!v.targetLanderVal}">

                                <ui:inputSelectOption text="--None--"/>

                               <aura:iteration items="{!v.landerPickListItems}" var="landerItem">

                                    <ui:inputSelectOption text="{!landerItem}"/>

                                </aura:iteration>

                            </ui:inputSelect>

```
                        </div>
```
```
                    </div>
```
```
                </div>
```

                <div class="slds-col slds-size_6-of-12"></div>

```
            </div> 
```
```
 
```

            <aura:if isTrue="{!v.landerVal == 'Custom Metadata'}">

                <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">

                    <h2><strong>Custom Metadata</strong></h2>

```
                </div>
```

                <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

```
                    <thead>
```
```
                        <tr>
```

                            <th>Lander Name</th>

                            <th>Endpoint</th>

                            <th>Client Secret</th>

                            <th>Client Id</th>

                        </tr>

```
                    </thead>
```
```
                    <tbody>
```

                        <aura:iteration items="{!v.customCrdtlList}" var="item" indexVar="index">

                            <tr id="{!index}">

                                <td>{!item.MasterLabel}</td>

                                <td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>

                                <td>{!item.ClientId__c}</td>

                                <td>{!item.Client_Secret__c}</td>

```
                            </tr>
```

                        </aura:iteration>

```
                    </tbody>
```
```
                </table>
```
```
            </aura:if>
```
```
 
```
```
 
```

            <aura:if isTrue="{!v.landerVal == 'HDFC Metadata'}">

                <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">

                    <h2><strong>HDFC Metadata</strong></h2>

```
                </div>
```

                <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

```
                    <thead>
```
```
                        <tr>
```

                            <th>Lander Name</th>

                            <th>Endpoint</th>

                            <th>Client Secret</th>

                            <th>Client Id</th>

                        </tr>

```
                    </thead>
```
```
                    <tbody>
```

                        <aura:iteration items="{!v.hdfcCrdtlList}" var="item" indexVar="index">

                            <tr id="{!index}">

                                <td>{!item.MasterLabel}</td>

                                <td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>

                                <td>{!item.ClientId__c}</td>

                                <td>{!item.Client_Secret__c}</td>

```
                            </tr>
```

                        </aura:iteration>

```
                    </tbody>
```
```
                </table>
```
```
            </aura:if>
```
```
 
```
```
 
```

            <aura:if isTrue="{!v.landerVal == 'IDBI Metadata'}">

                <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">

                    <h2><strong>IDBI Metadata</strong></h2>

```
                </div>
```

                <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">

```
                    <thead>
```
```
                        <tr>
```

                            <th>Lander Name</th>

                            <th>Endpoint</th>

                            <th>Client Secret</th>

                            <th>Client Id</th>

                        </tr>

```
                    </thead>
```
```
                    <tbody>
```

                        <aura:iteration items="{!v.idbiCrdtlList}" var="item" indexVar="index">

                            <tr id="{!index}">

                                <td>{!item.MasterLabel}</td>

                                <td><div class="slds-grid slds-has-flexi-truncate" style="width:75px"><span class="slds-truncate" title="{!item.API_Endpoint__c}">{!item.API_Endpoint__c}</span></div></td>

                                <td>{!item.ClientId__c}</td>

                                <td>{!item.Client_Secret__c}</td>

```
                            </tr>
```

                        </aura:iteration>

```
                    </tbody>
```
```
                </table>
```
```
            </aura:if>
```
```
 
```

            <!--Start RelatedTopics Section-->

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
        </div>
```
```
   </lightning:card>     
```
```
</aura:component>
```

Create JavaScript Controller

Step 2:- Create Lightning Component : customMetaLanderCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

customMetaLanderCmpController.js [JavaScript Controller]

```
   ({
```

	doInit : function(component, event, helper) {

	  helper.landersListItemsView(component);

```
	},
```
```
 
```
```
 
```

    changeTarget:function(component, event, helper){

        var targetLanderVal = component.find('landersId').get('v.value');

        //alert('targetLanderVal ' + targetLanderVal);

        component.set('v.targetLanderVal',targetLanderVal);

        component.set('v.landerVal',targetLanderVal);

```
    },
```
```
 
```

    handleChangeAction:function(component, event, helper){

        var landerChangeVal = component.get('v.landerVal');

        //alert('landerChangeVal ' + landerChangeVal);

```
 
```

        if(landerChangeVal == "Custom Metadata"){

            helper.customCrdtlHelper(component);

```
        }
```

        if(landerChangeVal == "HDFC Metadata"){

            helper.hdfcCrdtlHelper(component);

```
        }
```

        if(landerChangeVal == "IDBI Metadata"){

            helper.idbiCrdtlHelper(component);

```
        }
```
```
 
```
```
    },
```
```
 
```
```
})
```

Create JavaScript Helper

Step 3:- Create Lightning Component : customMetaLanderCmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

customMetaLanderCmpHelper.js [JavaScript Helper File]

```
    ({
```

	landersListItemsView : function(component, event, helper) {

		var action = component.get('c.pickList');

        action.setParams({"obj":"Custom_Metadata__mdt", "str":"Credential_Landers__c"});

```
 
```

        action.setCallback(this, function(response){

            var state = response.getState();

```
            if(state == "SUCCESS"){
```

                var result = response.getReturnValue();

                component.set('v.landerPickListItems',result);

```
            }
```
```
        });
```
```
        $A.enqueueAction(action);
```
```
	},
```
```
 
```

    customCrdtlHelper : function(component, event, helper) {

	  	var action = component.get("c.getCustCredential");

        action.setCallback(this, function(response){

            var state = response.getState();

```
            if(state == "SUCCESS"){
```

              var result = response.getReturnValue();

               // alert('result ' + JSON.stringify(result));

               component.set('v.customCrdtlList', result);

```
            }
```
```
        });        
```
```
        $A.enqueueAction(action);
```
```
	},
```
```
 
```

    hdfcCrdtlHelper : function(component, event, helper) {

	  	var action = component.get("c.getHdfcCredential");

        action.setCallback(this, function(response){

            var state = response.getState();

```
            if(state == "SUCCESS"){
```

              var result = response.getReturnValue();

               //alert('result ' + JSON.stringify(result));

               component.set('v.hdfcCrdtlList', result);

```
            }
```
```
        });        
```
```
        $A.enqueueAction(action);
```
```
	},
```
```
 
```

    idbiCrdtlHelper : function(component, event, helper) {

	  	var action = component.get("c.getIdbiCredential");

        action.setCallback(this, function(response){

            var state = response.getState();

```
            if(state == "SUCCESS"){
```

              var result = response.getReturnValue();

               // alert('result ' + JSON.stringify(result));

               component.set('v.idbiCrdtlList', result);

```
            }
```
```
        });        
```
```
        $A.enqueueAction(action);
```
```
	},
```
```
 
```
```
 
```
```
})
```

Create Apex Class Controller

Step 4:- Create Apex Class : customMetaLanderCtrl.apxc

From Developer Console >> File >> New >> Apex Class

customMetaLanderCtrl.apxc [Apex Class Controller]

```
   public class customMetaLanderCtrl {
```
```
 
```
```
  @AuraEnabled
```

    public static List pickList(String obj, String str) {

```
         List regList = NEW List(); 
```

            Schema.DescribeFieldResult plistvalues = Schema.getGlobalDescribe().get(obj).getDescribe().fields.getMap().get(str).getDescribe();

            FOR(PicklistEntry ent:plistvalues.getpicklistvalues()){

                regList.add(ent.getLabel());

```
            }
```

            system.debug('regList ' + regList);

```
             RETURN regList;
```
```
      }
```
```
 
```
```
 
```
```
 
```
```
    @AuraEnabled
```

    public static List getCustCredential(){

        List custCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c FROM Custom_Metadata__mdt];

        system.debug('custCredentialList ' + custCredentialList);

```
        RETURN custCredentialList;
```
```
    }
```
```
 
```
```
    @AuraEnabled
```

    public static List getHdfcCredential(){

        List hdfcCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c  FROM HDFC_Metadata__mdt ];

        system.debug('hdfcCredentialList ' + hdfcCredentialList);

```
        RETURN hdfcCredentialList;
```
```
    }
```
```
 
```
```
 
```
```
    @AuraEnabled
```

    public static List getIdbiCredential(){

        List idbiCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c  FROM IDBI_Metadata__mdt];

        system.debug('idbiCredentialList ' + idbiCredentialList);

```
        RETURN idbiCredentialList;
```
```
    }
```
```
 
```
```
 
```
```
 
```
```
}
```

Create Lightning Application

Step 5:- Create Lightning Application : customMetaLanderCmpApp.app

From Developer Console >> File >> New >> Lightning Application

customMetaLanderCmpApp.app [Component Application File]

    <aura:application extends="force:slds">

```
    <c:customMetaLanderCmp/>
```
```
</aura:application>
```

Field details of Custom Metadatas (Custom_Metadata__mdt)

Field details of Custom Metadatas (HDFC_Metadata__mdt)

Field details of Custom Metadatas (IDBI_Metadata__mdt)

Further post that would you like to learn in Salesforce

Create a Flyout Account, It will help you to grow make more money for a better living.

List your blog on Flyout and start making money for publishing sponsored content on your blog. Here’s the invite link. Get Started for Free

Check Out:- Earn Unlimited Everyday With This Trick:- Click Here

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

What is advantage of custom metadata in Salesforce?

The most advantage of custom metadata types is that they simplify the deployment process. After deploying custom settings, the data stored in those settings will not be transferred to the destination.

How does custom metadata work in Salesforce?

Custom metadata is customizable, deployable, packageable, and upgradeable application metadata.

Can we deploy custom settings in Salesforce?

With Salesforce ChangeSets, you cannot deploy all the types of metadata components in one shot.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net