Referencing Apex Map in Lightning Component

Posted on Updated on

Hi All,

In this post will show you, how to reference Apex Map in Lightning Components?
In visualforce, you can directly process map using markup. But in Lightning Component you can’t process map using Lightning Markup.

Here is the complete code.Let’s walk through code

MapDemoController.apxc :

public class MapDemoController{
    
    @AuraEnabled
    public static Map<Id,Contact> getContacts(){
        Map<Id,Contact> conMap = new Map<Id,Contact>([SELECT Id,FirstName,LastName,Phone,Email FROM Contact LIMIT 100]);
        
        return conMap;
    }
}

getContacts() method is passing a Map of contact to Lightning Component.

MapDemoComp.cmp :

<aura:component controller="MapDemoController">
	<ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/>
	<!-- Attribute Definition -->
    <aura:attribute name="contacts" type="Map" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="slds">
        <div id="contactDetail"></div>
    </div>
    
</aura:component>

aura:attribute type is defining type to Apex Map. Defining this map in this component is of no use as I am not using this map in the component directly.
But if you are passing map from some other component/app, this can be used to assign map.

MapDemoCompController.js :

({
	doInit : function(component, event, helper) {
		var action = component.get("c.getContacts");//Fetching Map from Controller
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());//Set return value to Contact Map
            var contacts = component.get("v.contacts");//Getting Map and Its value
            
			var tile='<ul class="slds-list--vertical slds-has-cards">';
			
            for (key in contacts){
                tile += '<li class="slds-list__item">';
                tile += '<div class="slds-tile slds-tile--board">';
                tile += '<div class="slds-tile__detail">';
                tile += '<p class="slds-text-heading--medium">'+ contacts[key].FirstName+' '+ contacts[key].LastName +'</p>';
                tile += '<p class="slds-truncate">Email - '+ contacts[key].Email +'</p>';
                tile += '<p class="slds-truncate">Phone - '+ contacts[key].Phone +'</p>';
                tile += '</div>';
                tile += '</div>';
                tile += '</li>';
            }
            tile += '</ul>';
            document.getElementById("contactDetail").innerHTML = tile;            
        });
        $A.enqueueAction(action);
	}
})

component.set(“v.contacts”, a.getReturnValue()) is used to set “v.contacts” map.
component.get(“v.contacts”) is used to get “v.contacts” map.
I could directly assign returned value from a.getReturnValue() to javascript variable. But to show you how you can set or get map, I did in this way.
contacts[key].FieldName is used to retrieve value from map.

🙂

One thought on “Referencing Apex Map in Lightning Component

    Binayak Mukherjee said:
    June 10, 2016 at 9:33 pm

    this is a nice post. Thanks Kishan.

    Can you please also help me regarding a Map containing a list of records to be displayed in Lightning

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s