Lightning Components

Working with GeoLocation field in LWC Datatable

Things to keep in mind when you work with the GeoLocation field in LWC Datatable.

Teja

04 Nov 2019 • 2 min read

Have you ever worked with the GeoLocation field in LWC?

There is a good possibility for you to come across a bottleneck in case you follow the documentation.

The reason I say that is, the documentation says, when you want to display data in a datatable which includes a GeoLocation field then your columns property should look something like this.

{
    label: 'Longitude',
    fieldName: 'Location__Longitude__s',
    type: 'location'
},
{
    label: 'Latitude',
    fieldName: 'Location__Latitude__s',
    type: 'location'
}

Expected JSON for columns of Datatable

But when you follow this code snippet it just shows blank fields and nothing much.

Here is the workaround for it ..

{
    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}
}

Actual JSON dump to configure the columns

Here is the complete JS file of 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;
    }
  }
}

Complete JS file to render the datatabe with latitude and longitude fields

Here is the HTML file

<template>
  <lightning-datatable data={data} columns={columns} key-field="id">
  </lightning-datatable>
</template>

GeolocationDataTable.html

Regarding the Apex class it's going to be plain and simple.

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());
    }
  }
}

AccountsControllerLWC.cls

Liked the post? Let me know what you think of it.