Geolocation Component - Magic of targetConfig & @api - LWC

Salesforce • Jun 17, 2019

Hello Guys,

I am back with some LWC learning & want to share it with you all. In past few days, I am trying to learn how to configure LWC components so that it can be made dynamic and can be setup by admins at time of using them on any layout.

With magic of targetConfig, property in LWC component meta file & @api annotation in typescript, you can easily achieve this & this makes components really really useful & resuable.

You can also checkout this page for more relevant tags according to your use case.

Changes Required:

meta.xml file

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="Geolocation">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">
      <property name="objectApiName" type="String" label="Enter object api name to set geolocation" />
      <property name="latFieldApiName" type="String" label="Enter latitude field api name to set latitude" />
      <property name="longFieldApiName" type="String" label="Enter longitude field api name to set longitude" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Typescript JS file

import {LightningElement, api} from 'lwc';
@api objectApiName;
@api latFieldApiName;
@api longFieldApiName;
@api recordId;

To demonstrate this, I have created a sample geolocation component which allows to show current location's longitude & latitude. On Record pages, it allows to set them on any object's geolocation fields as well

To see this component in action, deploy it directly from Playground