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

2,017 views

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.

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.

Final Output

display different types of metadata in aura component -- w3web.net

 

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]

  1. <aura:component controller="customMetaLanderCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
  2. 	<aura:attribute name="customCrdtlObj" type="Custom_Metadata__mdt" default="{'sobjectType':'Custom_Metadata__mdt'}"/>
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
  4.     <aura:attribute name="landerPickListItems" type="Custom_Metadata__mdt[]"/>
  5.     <aura:handler name="change" value="{!v.landerVal}" action="{!c.handleChangeAction}"/>
  6.     <aura:attribute name="landerVal" type="string" default=""/>
  7.     <aura:attribute name="customCrdtlList" type="List"/>
  8.     <aura:attribute name="hdfcCrdtlList" type="List"/>
  9.     <aura:attribute name="idbiCrdtlList" type="List"/>
  10.     <aura:attribute name="targetLanderVal" type="string"/>    
  11.  
  12.     <lightning:card>
  13.  
  14.         <div class="slds slds-p-around_medium">
  15.             <div class="slds-grid slds-wrap">
  16.                 <div class="slds-col slds-size_6-of-12 slds-m-bottom_small">
  17.                     <div class="slds-form-element">
  18.                         <label class="slds-form-element__label">Landers Master (Metadata)</label>
  19.                         <div class="slds-form-element__controller">
  20.                             <ui:inputSelect class="slds-select" aura:id="landersId" change="{!c.changeTarget}" value="{!v.targetLanderVal}">
  21.                                 <ui:inputSelectOption text="--None--"/>
  22.                                <aura:iteration items="{!v.landerPickListItems}" var="landerItem">
  23.                                     <ui:inputSelectOption text="{!landerItem}"/>
  24.                                 </aura:iteration>
  25.                             </ui:inputSelect>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.                 <div class="slds-col slds-size_6-of-12"></div> 
  30.             </div> 
  31.  
  32.             <aura:if isTrue="{!v.landerVal == 'Custom Metadata'}">
  33.                 <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
  34.                     <h2><strong>Custom Metadata</strong></h2>
  35.                 </div>
  36.                 <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
  37.                     <thead>
  38.                         <tr>
  39.                             <th>Lander Name</th>
  40.                             <th>Endpoint</th>
  41.                             <th>Client Secret</th>
  42.                             <th>Client Id</th>
  43.                         </tr>                   
  44.                     </thead>
  45.                     <tbody>
  46.                         <aura:iteration items="{!v.customCrdtlList}" var="item" indexVar="index">
  47.                             <tr id="{!index}">
  48.                                 <td>{!item.MasterLabel}</td>
  49.                                 <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>
  50.                                 <td>{!item.ClientId__c}</td>
  51.                                 <td>{!item.Client_Secret__c}</td>
  52.                             </tr>
  53.                         </aura:iteration>                   
  54.                     </tbody>
  55.                 </table>
  56.             </aura:if>
  57.  
  58.  
  59.             <aura:if isTrue="{!v.landerVal == 'HDFC Metadata'}">
  60.                 <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
  61.                     <h2><strong>HDFC Metadata</strong></h2>
  62.                 </div>
  63.                 <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
  64.                     <thead>
  65.                         <tr>
  66.                             <th>Lander Name</th>
  67.                             <th>Endpoint</th>
  68.                             <th>Client Secret</th>
  69.                             <th>Client Id</th>
  70.                         </tr>                   
  71.                     </thead>
  72.                     <tbody>
  73.                         <aura:iteration items="{!v.hdfcCrdtlList}" var="item" indexVar="index">
  74.                             <tr id="{!index}">
  75.                                 <td>{!item.MasterLabel}</td>
  76.                                 <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>
  77.                                 <td>{!item.ClientId__c}</td>
  78.                                 <td>{!item.Client_Secret__c}</td>
  79.                             </tr>
  80.                         </aura:iteration>                   
  81.                     </tbody>
  82.                 </table>
  83.             </aura:if>
  84.  
  85.  
  86.             <aura:if isTrue="{!v.landerVal == 'IDBI Metadata'}">
  87.                 <div class="slds-section__title-action slds-p-around--small slds-m-bottom--medium">
  88.                     <h2><strong>IDBI Metadata</strong></h2>
  89.                 </div>
  90.                 <table class="slds-table slds-table_bordered slds-table_col-bordered" style="border:1px #ddd solid;">
  91.                     <thead>
  92.                         <tr>
  93.                             <th>Lander Name</th>
  94.                             <th>Endpoint</th>
  95.                             <th>Client Secret</th>
  96.                             <th>Client Id</th>
  97.                         </tr>                   
  98.                     </thead>
  99.                     <tbody>
  100.                         <aura:iteration items="{!v.idbiCrdtlList}" var="item" indexVar="index">
  101.                             <tr id="{!index}">
  102.                                 <td>{!item.MasterLabel}</td>
  103.                                 <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>
  104.                                 <td>{!item.ClientId__c}</td>
  105.                                 <td>{!item.Client_Secret__c}</td>
  106.                             </tr>
  107.                         </aura:iteration>                   
  108.                     </tbody>
  109.                 </table>
  110.             </aura:if>
  111.  
  112.             <!--Start RelatedTopics Section-->
  113. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  114.  
  115.             <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>
  116.  
  117.             <br/><br/>
  118.             <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>
  119.             <div style="display:block; overflow:hidden;"> 
  120.                 <div style="width: 50%; float:left; display:inline-block">
  121.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  122.                         <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>
  123.                         <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>
  124.                         <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>
  125.                         <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>
  126.                         <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>
  127.                     </ul>
  128.             </div>
  129.  
  130.             <div style="width: 50%; float:left; display:inline-block">
  131.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  132.                         <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>
  133.                         <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>
  134.                         <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>
  135.                         <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>
  136.                         <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>
  137.                     </ul>
  138.                 </div>
  139.                <div style="clear:both;"></div> 
  140.                <br/>
  141.                 <div class="youtubeIcon">
  142.                     <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>
  143.                 </div>
  144.     </div>
  145.  
  146. </div>
  147.  
  148.   <!--End RelatedTopics Section-->
  149.         </div>
  150.    </lightning:card>     
  151. </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]

  1.    ({
  2. 	doInit : function(component, event, helper) {
  3. 	  helper.landersListItemsView(component);
  4. 	},
  5.  
  6.  
  7.     changeTarget:function(component, event, helper){        
  8.         var targetLanderVal = component.find('landersId').get('v.value');
  9.         //alert('targetLanderVal ' + targetLanderVal);
  10.         component.set('v.targetLanderVal',targetLanderVal);
  11.         component.set('v.landerVal',targetLanderVal);
  12.     },
  13.  
  14.     handleChangeAction:function(component, event, helper){        
  15.         var landerChangeVal = component.get('v.landerVal');
  16.         //alert('landerChangeVal ' + landerChangeVal);
  17.  
  18.         if(landerChangeVal == "Custom Metadata"){           
  19.             helper.customCrdtlHelper(component);	
  20.         }
  21.         if(landerChangeVal == "HDFC Metadata"){           
  22.             helper.hdfcCrdtlHelper(component);	
  23.         }
  24.         if(landerChangeVal == "IDBI Metadata"){           
  25.             helper.idbiCrdtlHelper(component);	
  26.         }
  27.  
  28.     },
  29.  
  30. })

Create JavaScript Helper

Step 3:- Create Lightning Component : customMetaLanderCmpHelper.js

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

customMetaLanderCmpHelper.js [JavaScript Helper File]

  1.     ({
  2. 	landersListItemsView : function(component, event, helper) {
  3. 		var action = component.get('c.pickList');
  4.         action.setParams({"obj":"Custom_Metadata__mdt", "str":"Credential_Landers__c"});
  5.  
  6.         action.setCallback(this, function(response){
  7.             var state = response.getState();              
  8.             if(state == "SUCCESS"){
  9.                 var result = response.getReturnValue();
  10.                 component.set('v.landerPickListItems',result);
  11.             }
  12.         });
  13.         $A.enqueueAction(action);
  14. 	},
  15.  
  16.     customCrdtlHelper : function(component, event, helper) {
  17. 	  	var action = component.get("c.getCustCredential");        
  18.         action.setCallback(this, function(response){
  19.             var state = response.getState();            
  20.             if(state == "SUCCESS"){
  21.               var result = response.getReturnValue();
  22.                // alert('result ' + JSON.stringify(result));
  23.                component.set('v.customCrdtlList', result);
  24.             }
  25.         });        
  26.         $A.enqueueAction(action);
  27. 	},
  28.  
  29.     hdfcCrdtlHelper : function(component, event, helper) {
  30. 	  	var action = component.get("c.getHdfcCredential");        
  31.         action.setCallback(this, function(response){
  32.             var state = response.getState();            
  33.             if(state == "SUCCESS"){
  34.               var result = response.getReturnValue();
  35.                //alert('result ' + JSON.stringify(result));
  36.                component.set('v.hdfcCrdtlList', result);
  37.             }
  38.         });        
  39.         $A.enqueueAction(action);
  40. 	},
  41.  
  42.     idbiCrdtlHelper : function(component, event, helper) {
  43. 	  	var action = component.get("c.getIdbiCredential");        
  44.         action.setCallback(this, function(response){
  45.             var state = response.getState();            
  46.             if(state == "SUCCESS"){
  47.               var result = response.getReturnValue();
  48.                // alert('result ' + JSON.stringify(result));
  49.                component.set('v.idbiCrdtlList', result);
  50.             }
  51.         });        
  52.         $A.enqueueAction(action);
  53. 	},
  54.  
  55.  
  56. })

Create Apex Class Controller

Step 4:- Create Apex Class : customMetaLanderCtrl.apxc

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

customMetaLanderCtrl.apxc [Apex Class Controller]

  1.    public class customMetaLanderCtrl {
  2.  
  3.   @AuraEnabled
  4.     public static List pickList(String obj, String str) {
  5.          List regList = NEW List(); 
  6.             Schema.DescribeFieldResult plistvalues = Schema.getGlobalDescribe().get(obj).getDescribe().fields.getMap().get(str).getDescribe();
  7.             FOR(PicklistEntry ent:plistvalues.getpicklistvalues()){
  8.                 regList.add(ent.getLabel());
  9.             }
  10.             system.debug('regList ' + regList);
  11.              RETURN regList;
  12.       }
  13.  
  14.  
  15.  
  16.     @AuraEnabled
  17.     public static List getCustCredential(){
  18.         List custCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c FROM Custom_Metadata__mdt];
  19.         system.debug('custCredentialList ' + custCredentialList);
  20.         RETURN custCredentialList;
  21.     }
  22.  
  23.     @AuraEnabled
  24.     public static List getHdfcCredential(){
  25.         List hdfcCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c  FROM HDFC_Metadata__mdt ];
  26.         system.debug('hdfcCredentialList ' + hdfcCredentialList);
  27.         RETURN hdfcCredentialList;
  28.     }
  29.  
  30.  
  31.     @AuraEnabled
  32.     public static List getIdbiCredential(){
  33.         List idbiCredentialList = [SELECT Id, MasterLabel, API_Endpoint__c, ClientId__c, Client_Secret__c  FROM IDBI_Metadata__mdt];
  34.         system.debug('idbiCredentialList ' + idbiCredentialList);
  35.         RETURN idbiCredentialList;
  36.     }
  37.  
  38.  
  39.  
  40. }

Create Lightning Application

Step 5:- Create Lightning Application : customMetaLanderCmpApp.app

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

customMetaLanderCmpApp.app [Component Application File]

  1.     <aura:application extends="force:slds">
  2.     <c:customMetaLanderCmp/>
  3. </aura:application>

Field details of Custom Metadatas (Custom_Metadata__mdt)

Custom Metadata Custom_Metadata__mdt -- w3web.net

Field details of Custom Metadatas (HDFC_Metadata__mdt)

Custom Metadata Types HDFC_Metadata__mdt -- w3web.net

Field details of Custom Metadatas (IDBI_Metadata__mdt)

Custom Metadata Types IDBI_Metadata__mdt -- w3web.net
 

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

 

 

 

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.

Related Topics | You May Also Like

Our Free Courses โ†’

๐Ÿ‘‰ Get Free Course โ†’

๐Ÿ“Œ Salesforce Administrators

๐Ÿ“Œ Salesforce Lightning Flow Builder

๐Ÿ“Œ Salesforce Record Trigger Flow Builder

๐Ÿ‘‰ Get Free Course โ†’

๐Ÿ“Œ Aura Lightning Framework

๐Ÿ“Œ Lightning Web Component (LWC)

๐Ÿ“Œ Rest APIs Integration

 
 


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

Leave a Comment