We can show the formatted address using the lightning-formatted-address component in a lightning web component.
This example shows how to use the lightning-formatted-address
Ex:
HTML Code
Configuration File
Output
This example shows how to use the lightning-formatted-address
Ex:
HTML Code
<template>
<lightning-card>
<lightning-formatted-address city={accCity}
country={accCountry}
postal-code={accPostalcode}
province={accState}
street={accStreet}
show-static-map={showStaticMap}></lightning-formatted-address>
</lightning-card>
</template>
Javascript Controllerimport { LightningElement, api, wire, track} from 'lwc';
import { getFieldValue, getRecord } from 'lightning/uiRecordApi';
import ACC_BillingCity from '@salesforce/schema/Account.BillingCity';
import ACC_BillingStreet from '@salesforce/schema/Account.BillingStreet';
import ACC_BillingState from '@salesforce/schema/Account.BillingState';
import ACC_BillingPostalCode from '@salesforce/schema/Account.BillingPostalCode';
import ACC_BillingCountry from '@salesforce/schema/Account.BillingCountry';
export default class formatAddressComponent extends LightningElement {
// recordId value provided by Account record page
@api recordId;
@track showStaticMap = true;
@wire(getRecord, { recordId: '$recordId', fields: [ACC_BillingCity, ACC_BillingStreet, ACC_BillingState, ACC_BillingPostalCode, ACC_BillingCountry]})
account;
get accStreet() {
window.console.log('accpount ===> '+JSON.stringify(this.account.data))
return getFieldValue(this.account.data, ACC_BillingStreet)
}
get accCity() {
return getFieldValue(this.account.data, ACC_BillingCity)
}
get accCountry() {
return getFieldValue(this.account.data, ACC_BillingCountry)
}
get accState() {
return getFieldValue(this.account.data, ACC_BillingState)
}
get accPostalcode() {
return getFieldValue(this.account.data, ACC_BillingPostalCode)
}
}
Configuration File
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="formatAddressComponent">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
Output
No comments:
Post a Comment