Salesforce | Use Map In Lightning Element?


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.

  1. Merely storing and displaying worth from the map within the element. 
  2. 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); 
  } 
})

dont miss out iconDo 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:

dont miss out iconTry 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


 





Source link

Thanks for Reading

Enjoyed this post? Share it with your networks.

Leave a Feedback!