Have you had experience dealing with the GeoLocation field in LWC?
There’s a potential bottleneck you might encounter if you strictly adhere to the documentation. The reason behind this caution is that the documentation suggests a specific format for the columns property when displaying data in a datatable that includes a GeoLocation field.
{ label: 'Longitude', fieldName: 'Location__Longitude__s', type: 'location' }, { label: 'Latitude', fieldName: 'Location__Latitude__s', type: 'location' }
However, when you implement this code snippet, it merely displays blank fields with little to no information.
Here’s a workaround for this issue…
{ label: 'Longitude', fieldName: 'Location__Longitude__s', type: 'number', /* type: 'location' → Documentation says type should be location but it doesn't work that way and it only works when the type is number */ typeAttributes: {maximumFractionDigits: 8} }, { label: 'Latitude', fieldName: 'Location__Latitude__s', type: 'number', /* type: 'location' → Documentation says type should be location but it doesn't work that way and it only works when the type is number */ typeAttributes: {maximumFractionDigits: 8} }
Presented below is the entire JavaScript file for the web component.
import { LightningElement, wire } from "lwc"; import getAccounts from "@salesforce/apex/AccountsControllerLWC.getAccounts"; const columns = [ { label: "Account Name", fieldName: "Name", type: "text", sortable: true }, { label: "Rating", fieldName: "Rating", type: "text", sortable: true }, { label: "Longitude", fieldName: "Location__Longitude__s", type: "number", /* Documentation says type should be location (type: 'location') but it doesn’t work that way and it only works when the type is number. */ typeAttributes: { maximumFractionDigits: 8 } }, { label: "Latitude", fieldName: "Location__Latitude__s", type: "number", /* Documentation says type should be location (type: 'location' ) but it doesn’t work that way and it only works when the type is number. */ typeAttributes: { maximumFractionDigits: 8 } } ]; export default class GeolocationDataTable extends LightningElement { data = []; columns = columns; error; @wire(getAccounts) wiredAccounts({ error, data }) { if (data) { this.data = data; } else if (error) { this.error = error; } } }
Below is the HTML file.
<template> <lightning-datatable data={data} columns={columns} key-field="id"> </lightning-datatable> </template>
As for the Apex class, it will be straightforward and uncomplicated.
public with sharing class AccountsControllerLWC { public AccountsControllerLWC() { } @AuraEnabled(cacheable=true) public static List<Account> getAccounts() { try { return [ SELECT Id, Name, Industry, Rating, Location__Longitude__s, Location__Latitude__s FROM Account ]; } catch (Exception e) { throw new AuraHandledException(e.getMessage()); } } }
Enjoyed the post? Share your thoughts with me.