Save Location details to SharePoint Location column through SPFx and PnP JS


The Location field in SharePoint has been announced in February 2019 - (https://techcommunity.microsoft.com/t5/sharepoint/add-location-details-to-sharepoint-data-and-content/m-p/284875). Before this announcement, data has been saved as addresses and coordinates(Latitude, Longitude) in different columns in SharePoint because if they have to be filtered by address, city, or state.   

The data of the location column is saved with all these details:
Image 1

If you want to save only the coordinates, you can pass only that value to the location column while saving the item. If you want to save, only the address like city, country and Pincode, you can pass only those values to the location column. I initially thought because it is a location column you have to pass the coordinates for saving. But, there is no mandatory value that needs to be passed to save the value for the location column and that is really useful. 

Save Location Details through SPFx/PnP JS:
In this example, I am going to get the address from bing map first for the location coordinates, and then save the address and coordinates to the location column using PnP JS.
  1. Get the set of address values based on latitude and longitude using bing maps. You can get the values from the following REST service : 
         http://dev.virtualearth.net/REST/v1/Locations/{point}?includeEntityTypes={entityTypes}&includeNeighborhood={includeNeighborhood}&include={includeValue}&key={BingMapsKey} 
    The API requires these two mandatory parameters- the points(Latitude and Longitude) and the bing map key. Follow this Microsoft article to get the bing map keys - Getting a Bing Maps Key

public getAddress(Latitude: string, Longitude: string, key: string): Promise<any[]> {
    //Reference: https://docs.microsoft.com/en-us/bingmaps/rest-services/locations/find-a-location-by-point
    let url: string = "https://dev.virtualearth.net/REST/v1/Locations/" + Latitude + "," + Longitude + "?key=" + key;
    return fetch(url, {
      credentials: 'omit',
      method: 'GET'
    }).then(response => response.json())
      .then(result => {
        let addrss: any = result.resourceSets[0].resources[0].address;
        let resultAddress: any = {
          City: addrss.adminDistrict2,
          CountryOrRegion: addrss.countryRegion,
          PostalCode: addrss.postalCode,
          State: addrss.adminDistrict,
          Street: addrss.addressLine,
        };
        return [resultAddress, result.resourceSets[0].resources[0].name];
      });
  }

In addition to the address value, I additionally took the display name of the location.

    2. The next is the simplest step.  Save the data to the SharePoint Location column by passing the values that are necessary to save. Pass the same key as per the Image 1.
 public saveLocationData(Latitude: string, Longitude: string) {
    //pass the key and coordinates
    let key = "AjClfsBm-UGnvnk_WHbgUkjRRETzD7noDytrb9YwOSjB8-xxxxxxxxxxxxxxxxxx";
    this.getAddress(Latitude, Longitude, key).then(async (locationResult) => {
      sp.web.lists.getByTitle("listname").items.getById(1).update({
        address: JSON.stringify({
          "Address": locationResult[0],
          "DisplayName": locationResult[1],
          "Coordinates": { "Latitude": Latitude, "Longitude": Longitude }
        })
      }).then((itemUpdateResult) => {
        console.info(itemUpdateResult);
      });
    });
  }

I updated an item in this example. You can use the same logic to create an item as well. The item is updated with coordinates, address and display name. 

Comments

Post a Comment

Thank you for your comment.

Popular posts from this blog

JavaScript Tips and Tricks - I

Image
I decided to write a series of coding tips and tricks that I follow while writing my code. This series will help Javascript developers to have a good judgement when to use them and helps to build a quality application. Now, let's jump into the first one. Ternary Operator: It is commonly referred to as the conditional operator , inline if (iif) , or ternary if . I personally use this one in most of my codes. Before jumping into how to use them, let study why to use them. when you write an if block, first you declare the variable outside the if block, so that you can use them after the if block. So a simple condition takes a two-block.   Block 1 for variable assignment and Block 2 for executing the condition.   A minimum of 6 to 7 lines of code required. Let's see how ternary operator makes it more concise.  The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression...
Read more

Create And Deploy Outlook Add-Ins Using SPFx 1.10

Image
These are simple steps to create your first Outlook add-in from the SharePoint framework 1.10 version. The integration of SharePoint Framework lets you use all of the tools of SPFx, including access to Graph APIs, along with the rich, native JavaScript APIs that are available across applications. Please note that it is still in Preview mode.   Prerequisites Node version 10 LTS Latest Yeoman and gulp Visual studio code For more details, Please follow check Microsoft docs for  Setting up your SharePoint Framework development environment .   Development Steps Run the following command:   yo @microsoft/sharepoint --plusbeta   For the below question, select yes, as the solution needs to be deployed, tenant scoped.    Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?  Y   Select the framework you would want to use. I preferre...
Read more