Drag and Drop Address Field on Google Map | Salesforce Help Guide
Why we need
Why we need this type of Address functionality - In the business there are lots of accounts (Person/Business account) and we need a component to show the exact location of the user using their billing address or shipping address then we can use this type of component to show exact of the location of the user on the map. Currently, we're using the Billing Address from the account object (Only for Account Object).
Implementation
1. Firstly we need a LWC controller class that will fetch all the accounts with their billing address information (Currently we're getting only 5 records using LIMIT). You can refer to below method.
@AuraEnabled (cacheable=true)
public static List<Account> getAccountLocations(){
return[SELECT Id, Name, BillingStreet, BillingCity,
BillingState, BillingPostalCode, BillingCountry
FROM Account Order By LastModifiedDate Limit 5 ];
}
Don't forget to check out: Time Based Workflow in Salesforce | Configuration Guide
2. Now we're setting up all our variables using a track and wire decorator as well as a method for drag and drop functionality. You can refer to below code.
let accountId; //store id from the div
@wire(getAccountLocations) accounts;
@track selecAccnt;
handleDragStart(event) {
event.dataTransfer.dropEffect = 'move';
accountId = event.target.dataset.item;
for (i = 0; i < this.accounts.data.length; i++) {
if (accountId !== null && accountId === this.accounts.data[i].Id) {
this.selecAccnt = this.accounts.data[i];
}
}
event.dataTransfer.setData("divData", this.selecAccnt);
}
handleDragOver(event) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
}
handleDrop(event) {
//assigns account records
if (event.stopPropagation) {
event.stopPropagation();
}
event.preventDefault();
if (this.selecAccnt !== null || this.selecAccnt !== undefined) {
//assigns account records
acct = this.selecAccnt;
this.DroppedAccountName = acct.Name;
//prepares information for the lightning map attribute values.
this.markersTitle = acct.Name;
this.mapMarkers = [
{
location: {
Street: acct.BillingStreet,
City: acct.BillingCity,
State: acct.BillingState,
Country: acct.BillingCountry,
},
icon: 'custom:custom26',
title: acct.Name,
}
];
this.center = {
location: {
City: acct.BillingCity,
},
};
this.zoomLevel = 6;
}
}
3. Now we're creating a Layout with the lightning card, lightning layout with the if-else logic, and also used for:each loop. You can refer to below code for only drag functionality.
<div class="c-container">
<lightning-layout horizontal-align="stretch" multiple-rows="true" class="x-large slds-grid slds-wrap">
<lightning-layout-item padding="around-small" class="slds-p-around_small" size="12" medium-device-size="12" small-device-size="3"
if:true={accounts.data} style="display: inline-flex;">
<template for:each={accounts.data} for:item="account">
<!-- use draggable="true" to make div as draggable-->
<div class="custom-box slds-box slds-p-around_medium slds-text-align_center" style="background: burlywood;
color: white;
font-weight: bold;
border: 2px solid black;
margin-left: 11px;box-shadow: 10px 10px 10px rgb(0 0 0 / 15%);" key={account.Name}>
<div class="column" draggable="true" key={account.Id} data-item={account.Id}
ondragstart={handleDragStart}>
<div class="slds-text-heading_small">{account.Name}</div>
</div>
</div>
</template>
</lightning-layout-item>
</lightning-layout>
</div>
Check out another amazing blog by Prafull here: Salesforce Marketing Cloud Custom Profile and Preference Centre
4. Currently we're using this component on the Home tab of every app you can customize according to your need inside a js-meta.xml file.
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
Responses