Description:
An Autocomplete Address feature provides users with the ability to reduce typing time and avoid errors. To utilize this feature, users need to select the address search bar, indicated by a magnifying glass icon, start inputting the address, and then opt for the desired result from the suggested list.
Here’s how the process works:
We will be implementing Address Lookup in Lightning (LWC) using the Google Maps Places API within Lightning Web Components. Users can pick an address from the dropdown, which will subsequently auto-fill address fields based on the selected address. The chosen address can then be saved to the applicable record.
For Lightning Web Components, Salesforce’s Lightning Framework furnishes the lightning-input-address component. This component employs the Google Maps Places API to enable the Address Lookup feature. As the default configuration, all address fields are presented in text format.
To enable Maps and Location Settings in our Salesforce Org, follow these steps:
- Enter “Maps” in the Quick Find box and select “Maps and Location Settings.”
- Proceed to click “Edit.”
- Check the box for “Enable Maps and Location Service” and save the changes.
Please note: Maps and Location Settings are accessible in Professional, Enterprise, Performance, and Unlimited editions, but are not available in the Developer Edition.
Codes:
HTML:
<template>
<div class=”slds-box slds-theme–default”>
<lightning-record-edit-form record-id={recordId} object-api-name={objectAPIName} onsuccess={handleSuccess} onsubmit={handleSubmit}>
<lightning-messages>
</lightning-messages>
<lightning-input-address
address-label=”Address”
street-label=”Street”
city-label=”City”
country-label=”Country”
province-label=”State/ Province”
postal-code-label=”Zip/ Postal Code”
onchange={addressInputChange}
show-address-lookup>
</lightning-input-address>
<lightning-button class=”slds-m-top_small” type=”submit” label=”Update Address”>
</lightning-button>
</lightning-record-edit-form>
</div>
</template>
JavaScript:
import { LightningElement,api } from ‘lwc’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
export default class AddressLwc extends LightningElement {
@api recordId;
@api objectAPIName;
strStreet;
strCity;
strState;
strCountry;
strPostalCode;
handleSuccess( event ) {
console.log( ‘Updated Record Id is ‘, event.detail.id );
this.dispatchEvent(
new ShowToastEvent({
title: ‘Successful Record Update’,
message: ‘Record Updated Surccessfully!!!’,
variant: ‘success’
})
);
}
handleSubmit( event )
{
let fields = event.detail.fields;
console.log( ‘Fields are ‘ + JSON.stringify( fields ) );
event.preventDefault();
if ( this.objectAPIName === ‘Account’ ) {
fields.BillingStreet = this.strStreet;
fields.BillingCity = this.strCity;
fields.BillingState = this.strState;
fields.BillingCountry = this.strCountry;
fields.BillingPostalCode = this.strPostalCode;
} else if ( this.objectAPIName === ‘Contact’ ) {
fields.MailingStreet = this.strStreet;
fields.MailingCity = this.strCity;
fields.MailingState = this.strState;
fields.MailingCountry = this.strCountry;
fields.MailingPostalCode = this.strPostalCode;
}
this.template.querySelector( ‘lightning-record-edit-form’ ).submit( fields );
}
addressInputChange( event ) {
this.strStreet = event.target.street;
this.strCity = event.target.city;
this.strState = event.target.province;
this.strCountry = event.target.country;
this.strPostalCode = event.target.postalCode;
}
}
JS-Meta.XML:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets=”lightning__RecordPage”>
<property name=”objectAPIName” type=”String” label=”Object API Name”/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Output:
Related Links:
https://merfantz.com/blog/how-to-enable-autocomplete-on-standard-address-fields-in-salesforce