Read Names from a Person Field with PnPJS

If you’re starting out and you need to read names from a person field, it may not be clear how to go about this. In this example, I have a list that has an Organizer person field. In order for me to get the name(s) in that field for a given item, I will name the fields that I need in my select and then expand my Organizer field. If you don’t do this, all that get’s returned is an OrganizerId field.

sp.web.lists.getByTitle(this.props.listName)
   .items.getById(id)
   .select("Title", "Organizers/Title", "Event_x0020_Location/Address", "Members")
    .expand("Organizers/Title")
    .get().then((item: any) => {
      
      // array of meeting organizers
      const meetingOrganizers = item['Organizers'];

      console.log(meetingOrganizers[0].Title)

});

In the example, we’re naming a few fields that we want returned. Title, Organizer/Title, Event Location/Address, and Members. Then we expand Organizers/Title. Expanding Organizer/Title will include the names of the individuals as an array of objects. I used a console.log to display the first record in this example. Hope that saves you some time.

How to Extract Location Data with PnPJS

The SharePoint location field is a nice way of adding location information with the help of Bing Maps. It contains quite a bit of information about a given location. The field stores the data in JSON format so it’s simple to get the data that you need.

A location will be stored in the following format:

{
	"EntityType": "LocalBusiness",
	"LocationSource": "Bing",
	"LocationUri": "https://www.bingapis.com/api/v6/localbusinesses/YN873x128404500",
	"UniqueId": "https://www.bingapis.com/api/v6/localbusinesses/YN873x128404500",
	"DisplayName": "Microsoft",
	"Address": {
		"Street": "45 Liberty Boulevard",
		"City": "Malvern",
		"State": "PA",
		"CountryOrRegion": "US",
		"PostalCode": "19355"
	},
	"Coordinates": {
		"Latitude": 40.05588912963867,
		"Longitude": -75.52118682861328
	}
}

If you’re building a web part with React, and are using the pnpjs libraries, it’s pretty straight forward and here’s a snippet showing how you might do it.

import { sp } from '@pnp/sp';

...

sp.web.lists.getByTitle(this.props.listName)
     .items.getById(id).get().then((item: any) => {
         //parse the event location info
        const location = JSON.parse(item['Event_x0020_Location']);
                   
        console.log(location.Address.City);
        console.log(location.Address.State);

});

So once you have an item, you can assign it’s location field to a variable/const using JSON.Parse. Once you have that, you can access the data via properties. Address is available and has properties of it’s own. City, State, etc. That’s it. Pretty simple.

Telephone Links In SharePoint

I was asked to build a contact directory in SharePoint. I started with the People web part but the list included people who didn’t work for the company so I scrapped that.

On attempt #2, I created a site page and tried the text, and markdown web parts. The text web part has a Hyperlink but this doesn’t work because it expects a full link but all we want is something like <a href=”callto:5551233777″>555-123-3777</a> or
<a href=”tel:5551233777″>555-123-3777</a>

Next, I tried the markdown web part but this only half worked. In the web part, I typed:

[Call Now](callto:5551233777)
[Call Now](tel:5551233777)

In the browser, the above creates a link that will prompt you to choose an app to make that call. That same page on a mobile browser or the SharePoint app will produce the same content, but no link. Bummer.

What does work is the hyperlink field in a list, but callto isn’t valid. Instead, you need to use “tel”. Using Tel in a list produces a link that will work on a mobile device.