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


No comments:

Post a Comment