ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

Configurable Map Component for Lightning Record Pages

Home / Article & Blogs / Apex / Configurable Map Component for Lightning Record Pages

Configurable Map Component for Lightning Record Pages

By Radhika Shet inApex, Lightning, Salesforce

Everyone loves to use a custom component which can be placed in any object irrespective of whether its standard or custom. In this blog, I am going to introduce one such component, which is the reusable map component.

What it does?

By placing this component in your Lightning page, you can display the map based on the address field you choose. My component has two main parts:

  1. Picklist: This displays all the available address fields in your object. Be it standard or custom. Based on the value/field you choose from the picklist, a corresponding map will be displayed by taking the address stored in that field.(Note: Custom fields will be displayed provided they contain ‘Address’ in their field labels.)
  2. Map: This will display the address the user wishes to see on the map.
The component when it is loaded
When we select a field from the picklist
Here Match Billing Address is a custom field
This is a record of custom object called Expense and Client Address is again a custom field

Sounds interesting!!! Let’s see how this can be achieved.

Prerequisites:

  1. Lightning enabled org
  2. Leaflet Javascript Library and CSS Stylesheet. Download from here.
  3. Google Map API key. Get your own here.

Now that we have all the necessary components, let’s dive into the code.

Steps:

  1. Upload the leaflet.zip file you downloaded before as a static resource in your org.
  2. Write an apex controller that displays the picklist values as well as processes the address value in the field. The code is as below:

[sourcecode language=”java”]
public class myMapApexController {

@auraenabled
public static List < String > getAddressFields(Id recsId) { //This method retrieves all the standard
//as well as custom address fields available in a particular object
List < String > options = new List < String > ();
Schema.SObjectType sobjectType = recsId.getSObjectType();
String sobjectName = sobjectType.getDescribe().getName();
List < String > availableFields = new List < String > ();
Map < String, Schema.SObjectField > objectFields = Schema.getGlobalDescribe().get(sobjectName).getDescribe().fields.getMap();
availableFields.add(‘–None–‘);
for (String s: objectFields.keySet()) {
Schema.DescribeFieldResult lfieldLabel = objectFields.get(s).getDescribe();
system.debug(‘LABEL::’ + lfieldLabel.getLabel());
Schema.DisplayType dType = lfieldLabel.getType();
string fieldType = String.ValueOf(dType);
system.debug(‘fieldType::’ + fieldType);
if (fieldType.equalsIgnoreCase(‘ADDRESS’)) //Checks for compound address fields
{
availableFields.add(lfieldLabel.getLabel().toUpperCase());
} else if (s.containsIgnoreCase(‘Address’) && s.endsWithIgnoreCase(‘__c’)) //Checks for custom field labels that have ‘Address’ in it
{
availableFields.add(lfieldLabel.getLabel().toUpperCase());
}
}
System.debug(‘availableFields::’ + availableFields);
return availableFields;
}

@auraenabled
public static String PopulateLatituteLongitude(Id recsId, String opt) { //This method queries the address from the record
//and returns the Lattitude and Longitude from the address
String city;
String street;
String state;
String code;
String country;
String addr;
String chosenValue;
string selFieldType;
Schema.SObjectType sobjectType = recsId.getSObjectType();
String sobjectName = sobjectType.getDescribe().getName();
Map < String, Schema.SObjectField > objectFields = Schema.getGlobalDescribe().get(sobjectName).getDescribe().fields.getMap();
for (String s: objectFields.keySet()) {
Schema.DescribeFieldResult lfieldLabel = objectFields.get(s).getDescribe();
Schema.DisplayType dType = lfieldLabel.getType();
string fieldType = String.ValueOf(dType);
if (lfieldLabel.getLabel().equalsIgnoreCase(opt)) {
chosenValue = s; //Get the API name of the value selected from picklist
selFieldType = fieldType;
}
}
String buildQuery = ‘SELECT id,’ + chosenValue + ‘ from ‘ + sobjectName + ‘ where id= \” + recsId + ‘\”;
System.debug(buildQuery);
sObject sObjRec = database.query(buildQuery);
if (selFieldType.equalsIgnoreCase(‘Address’)) {
Address compaddr = (Address) sObjrec.get(chosenValue);
street = compaddr.getStreet();
city = compaddr.getCity();
state = compaddr.getState();
code = compaddr.getPostalCode();
country = compaddr.getCountry();
addr = street + ‘+’ + city + ‘+’ + state + ‘+’ + code + ‘+’ + country;
} else {

addr = String.valueOf(sObjrec.get(chosenValue));
}
System.debug(‘Address::’ + addr);

string apiKey = ‘<span style=”color: #ff0000;”>USE YOUR OWN GOOGLE MAP API KEY HERE</span>’; //Unique alpha numeric key
//This is the key for server applications.
String modAddr = addr.replace(‘ ‘, ‘,’);
modAddr = modAddr.replace(‘-‘, ‘+’);
//modAddr = ‘Aditya+Enclave,Whitefields,Hitech+City,+Hyderabad’;
String url = ‘https://maps.googleapis.com/maps/api/geocode/xml?’;
url += ‘address=’ + modAddr;

url += ‘&key=’ + apiKey;
system.debug(url);
Http h = new Http();
HttpRequest req = new HttpRequest();
req.setHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
req.setHeader(‘Content-length’, ‘0’);
req.setEndpoint(url);
req.setMethod(‘POST’);
String responseBody = ”;
HttpResponse res = h.send(req);
responseBody = res.getBody();
///*Response body will include this… 46.8647086 -96.8262901 */
string geometryString = ”;
string locationString = ”;
string latitudeValue = ”;
string longitudeValue = ”;

Dom.Document doc = res.getBodyDocument();
Dom.XMLNode address = doc.getRootElement();
Dom.XMLNode result = address.getChildElement(‘result’, null);
Dom.XMLNode geometry = result.getChildElement(‘geometry’, null);
Dom.XMLNode location = geometry.getChildElement(‘location’, null);
latitudeValue = location.getChildElement(‘lat’, null).getText();
longitudeValue = location.getChildElement(‘lng’, null).getText();

return latitudeValue + ‘;’ + longitudeValue;
}
}
[/sourcecode]
The whole class is divided into two methods:

  1. getAddressFields(): This method takes the record id as parameter and returns all the address fields available in that object, which is then displayed as picklist values in the component.
  2. PopulateLatituteLongitude(): This method takes the record id and the value/field chosen from the picklist and builds the dynamic query as shown above. The address that we pass to the map should be of this format:- ‘Aditya+Enclave,Whitefields,Hitech+City,+Hyderabad’. Spaces replaced with ‘,’ and ‘-‘ replaced with ‘+’ characters. We are then making a REST API call to maps.googleapis.com and passing the API key as well as the address we generated. From the response, we get the Lattitude and Longitude which is then returned in ‘Lattitude;Longitude’ format.

3. Next, build a new lightning component as follows:

[sourcecode language=”java”]
<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes” controller=”myMapApexController”>
<aura:attribute name=”recordId” type=”String” />
<aura:attribute name=”availvals” type=”String[]” />

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

<ui:inputSelect aura:id=”getsel” class=”slds-input” change=”{!c.onSingleSelectChange}”>
<aura:iteration items=”{!v.availvals}” var=”val”>
<ui:inputSelectOption text=”{!val}” />
</aura:iteration>
</ui:inputSelect>
<ltng:require styles=”/resource/leaflet/leaflet.css” />
<ltng:require scripts=”/resource/leaflet/leaflet.js” />
<div aura:id=”mapnew” id=”mapnew” style=”height: 300px”>
<div align=”center”>
<h1 style=”font-size: 2em;”>SELECT A VALUE FROM PICKLIST</h1>
</div>
</div>
</aura:component>
[/sourcecode]

Every time we change the picklist value, the “onSingleSelectChange” method is called which indirectly calls the apex PopulateLatituteLongitude() and passes the currently selected picklist value.

4. The controller for the above component is as follows:

[sourcecode language=”java”]
({
doInit: function(component, event, helper) {
var lat;
var lng;

var recId = component.get(“v.recordId”);
console.log(recId);

var action = component.get(“c.getAddressFields”);
action.setParams({
“recsId”: recId
});
action.setCallback(this, function(res) {

var state = res.getState();
if (state === “SUCCESS”) {
console.log(state);
var str = res.getReturnValue();
component.set(‘v.availvals’, str);
}
});
$A.enqueueAction(action);
},
onSingleSelectChange: function(component, event, helper) {
var lat;
var lng;
var recId = component.get(“v.recordId”);
console.log(recId);
var map = null;
var leafl;
document.getElementById(‘mapnew’).innerHTML = “”;
document.getElementById(‘mapnew’).innerHTML = ”
<div style=\”height: 300px\” class=\”map\” id=\”map\”></div>
“;

var selected = component.find(“getsel”).get(“v.value”);
var action = component.get(“c.PopulateLatituteLongitude”);
action.setParams({
“recsId”: recId,
“opt”: selected
});
action.setCallback(this, function(res) {
var state = res.getState();
if (state === “SUCCESS”) {
console.log(state);
var str = res.getReturnValue();
var arr = str.split(“;”);
lat = parseFloat(arr[0]);
lng = parseFloat(arr[1]);
setTimeout(function() {

map = new L.map(‘map’, {
zoomControl: true
});
map.setView(new L.LatLng(lat, lng), 16);
L.tileLayer(‘https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}’, {
attribution: ‘Tiles © Esri’
}).addTo(map);

// Add marker
L.marker([lat, lng]).addTo(map)
.bindPopup(‘The Location’);
map.invalidateSize();
console.log(map);
});

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

}
})
[/sourcecode]
Here we handle the response we receive from the controller. We extract the Lattitude and Longitude from the string and pass both values to the map function

[sourcecode language=”java”]
map = new L.map(‘map’, {
zoomControl: true
});
map.setView(new L.LatLng(lat, lng), 16);
L.tileLayer(‘https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}’, {
attribution: ‘Tiles © Esri’
}).addTo(map);

// Add marker
L.marker([lat, lng]).addTo(map)
.bindPopup(‘The Location’);
[/sourcecode]
This part, creates the map and sets the map view to the passed Lattitude and Longitude values.

[sourcecode language=”java”]
document.getElementById(‘mapnew’).innerHTML = “”;
document.getElementById(‘mapnew’).innerHTML = ”
<div style = \”height: 300px\” class=\”map\” id=\”map\”></div>
“;
[/sourcecode]
Whenever we change the picklist value, we are creating new map instance. Thus we need to remove the previously initialized dom element from the component and create a fresh one.

5. Next, to position the map, paste the below code in the CSS part of the component:

[sourcecode language=”java”]
.THIS.map {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
[/sourcecode]

6. Lastly, place this component in your record detail page.

There you go! Your reusable map component is ready.

Note: This again is just the basic code. It can be optimized and customized according to one’s requirement.
leaflet google mapLightning component
91
Like this post
3 Posts
Radhika Shet

Search Posts

Archives

Categories

Recent posts

International SEO: How to Get Website Traffic from Other Countries

International SEO: How to Get Website Traffic from Other Countries

Top Reasons to Use Salesforce Consumer Goods Cloud

Top Reasons to Use Salesforce Consumer Goods Cloud

What should Gay Pride Month mean to an organization?

What should Gay Pride Month mean to an organization?

10 Amazing Benefits of Salesforce Marketing Cloud

10 Amazing Benefits of Salesforce Marketing Cloud

How to Set SMART Goals for Employee Performance?

How to Set SMART Goals for Employee Performance?

  • Previous PostHow to design better web pages?
  • Next PostGeneric Use Cases of Heroku

Related Posts

What You Need To Know About India Salesforce Days 2022 – Platform Accredited Professional
Salesforce

What You Need To Know About India Salesforce Days 2022 – Platform Accredited Professional

What Is Salesforce Commerce Cloud?
Commerce Cloud Salesforce

What Is Salesforce Commerce Cloud?

Why Do We Use Lightning in Salesforce?
Lightning Salesforce

Why Do We Use Lightning in Salesforce?

<strong>Salesforce announces NFT Cloud pilot with far-reaching impact</strong>
Salesforce

Salesforce announces NFT Cloud pilot with far-reaching impact

1 Comment

  1. skhilauria1988
    Reply
    25 July 2017

    Nice Work and great utility !

    Reply

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo
  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

ABSYZ Software Consulting Pvt. Ltd.
USA: 49197 Wixom Tech Dr, Wixom, MI 48393, USA
M: +1.415.364.8055

HYD – India: 6th Floor, SS Techpark, PSR Prime, DLF Cyber City, Gachibowli, Hyderabad, Telangana – 500032
M: +91 79979 66174

2nd Floor, 91Springboard, Padmavathi Complex, 80 Feet Rd, Koramangala, 8th Block, Bengaluru, Karnataka-560095.
+91 8886332345

Copyright ©2020 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT