Showing posts with label Formatted Address. Show all posts
Showing posts with label Formatted Address. Show all posts

Saturday, November 2, 2019

Lightning Formatted Address component in Lightning Web Component(lwc)

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
<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 Controller
import { 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