For utilizing the map within the lightning element, we have to outline the attribute of the sort map to carry key-value pairs. On this weblog, we are going to see two alternative ways to make use of the map within the lightning element.
- Merely storing and displaying worth from the map within the element.
- Displaying map through the use of aura iteration.
Case 1: Merely Storing and Displaying Worth from the Map within the Element.
Let’s perceive with a easy instance:
Step 1: Construct A Lightning Element
<aura:element controller="Mapvalue" > <aura:handler title="init" worth="{!this}" motion="{!c.doinit}"/> <aura:attribute sort="map" title="Mapuse"/> // Map sort attribute to carry the worth of map {!v.Mapuse.key1} {!v.Mapuse.key2} {!v.Mapuse.key3} </aura:element>
Notice: The init technique get’s known as after the development of element is over and can name doinit technique within the JS controller.
Step 2: Construct A Javascript Controller
({ doinit : perform(element, occasion, helper) { var motion= element.get('c.getmymap'); // Calling apex technique motion.setCallback(this,perform(response) // getting response again from apex controller { var state=response.getState(); // getting the state if(state==='SUCCESS') { element.set('v.Mapuse',response.getReturnValue()); // setting the worth in map attribute } }); $A.enqueueAction(motion); } })
Do not forget to take a look at: Learn All About Collections in Salesforce: List, Set and Map
Step 3: Construct Apex Controller
public class Mapvalue { @AuraEnabled // Methodology should be AuraEnabled in apex public static map<string,string> getmymap() { map<string,string> putkeyvalue= new map<string,string>(); putkeyvalue.put('key1', 'Value1'); // Setting key,worth in map putkeyvalue.put('key2', 'Value2'); putkeyvalue.put('key3', 'Value3'); return putkeyvalue; } }
Step 4: Previewing With An Utility
<aura:utility extends="power:slds"> <c:Firstlightningcomponent/> </aura:utility>
After Preview:
Try one other superb weblog by Mohit right here: What is Pardot? What is Engagement History in Salesforce in 2023?
Case 2: Displaying Map by Utilizing Aura Iteration Methodology
Step 1: Apex Controller
public class mapIterateApexClass { @AuraEnabled // Methodology should be AuraEnabled in apex public static map<string,string> getmymap() { map<string,string> putkeyvalue= new map<string,string>(); putkeyvalue.put('key1', 'Value1'); // Setting key,worth in map putkeyvalue.put('key2', 'Value2'); putkeyvalue.put('key3', 'Value3'); return putkeyvalue; } }
Step 2: Create a lightning element (title=”mapIteration.cmp”).
<aura:element controller="mapIterateApexClass" > <aura:attribute sort="record" title="list1"/> <aura:attribute sort="map" title="map1"/> <ui:button label="Iterate Map in lightning element" press="{!c.getMapValues}" /> <aura:iteration objects="{!v.list1}" var="key"> // Iterating over keys in record <c:mapIterationChild map="{!v.map1}" key="{!key}" /> // Calling youngster element </aura:iteration> </aura:element>
Step 3: mapIterationController.js
({ getMapValues : perform(element, occasion, helper) { var motion= element.get('c.getmymap'); motion.setCallback(this,perform(response) { var arrayToStoreKeys=[]; // Declaring array to retailer values. var state=response.getState(); var response1=response.getReturnValue(); if(state==='SUCCESS') { element.set('v.map1',response.getReturnValue()); // Storing response in map. } for(var key in response1 ) { arrayToStoreKeys.push(key); // Pushing keys in array } element.set('v.list1',arrayToStoreKeys); // Storing keys in record. }); $A.enqueueAction(motion); } })
Step 4: Create a lightning element title=”mapIterationChild.cmp”
<aura:element > <aura:handler title="init" worth="{!this}" motion="{!c.doinit}"/> <aura:attribute sort="map" title="map"/> <aura:attribute sort="string" title="key"/> <aura:attribute sort="string" title="worth"/> {!v.key}-------{!v.worth} // Displaying Key,Worth. </aura:element>
Step 5: mapIterationChildController.js
({ doinit : perform(element, occasion, helper) { var key=element.get("v.key"); var map=element.get("v.map"); element.set("v.worth",map[key]); } })
Step 6: Utility to run the element
<aura:utility extends="power:slds"> <c:mapIteration></c:mapIteration> </aura:utility>
Step 7) After Preview