Tip of the week # 210 : Lightning Input Address with Autocomplete

Lightning Input Address with Autocomplete

Description : In Lightning Web Components (LWC), A lightning-input-address component with Autocomplete.(Powered By Google)
Code snapshot is following :

---

• HTML File

  
      
  		
          <template>
             <div class=&#8221;slds-box slds-theme&#8211;default&#8221;>
                     <lightning-record-edit-form record-id={recordId} object-api-name={Contact} onsuccess={handleSuccess} onsubmit={handleSubmit}>
                     <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" 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='Contact';
  		strStreet;
  		strCity;
  		strState;
  		strCountry;
  		strPostalCode;
  		handleSuccess( event ) {
  			this.dispatchEvent(
  			new ShowToastEvent({
  			title: 'Successful Record Update',
  			message: 'Record Updated Surccessfully!!!',
  			variant: 'success'
  		}));
          }
  		handleSubmit(event){
  			let fields = event.detail.fields;
  			event.preventDefault();
  			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;
  		}
  }
      
  	
  	

• XML.

  
      
  		<!--xml version=&#8221;1.0&#8243; encoding=&#8221;UTF-8&#8243;?-->
  		<LightningComponentBundle xmlns=&#8221;http://soap.sforce.com/2006/04/metadata&#8221;>
  		<apiVersion>63.0</apiVersion>
  		<isExposed>true</isExposed>
  		<targets>
  		<target>lightning__RecordPage</target>
  		</targets>
  		</LightningComponentBundle>
      
  	
  	

• 
  Note : If you are used custom object then you have to enbaled Address field for Custom Object. You are need below step for Google searching.
  Autocomplete Addresses

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!

Use below Chrome Extension for Productivity and share your feedback. Download Link : https://chromewebstore.google.com/detail/quick-shortcuts/ldodfklenhficdgllchmlcldbpeidifp?utm_source=ext_app_menu