ClearPeople logo

Calling the new Presence endpoint in MS Graph API from SPFx

3 March 2020
  

Last December, the Microsoft Graph team announced the preview of a new endpoint in the MS Graph API, that allows us to get presence information for a set of users.

 

Read the full announcement from Microsoft Graph team here

 

With this new endpoint, we can show presence information in our own custom LOB applications, or, as we will see in the sample below, from a SharePoint site, using an SPFx webpart. You can see the result in the image below:

 

Calling the new Presence endpoint in MS Graph API from SPFx 1

Calling Presence Endpoint from Postman

Before diving into our webpart code, let’s see how we have to call the presence endpoint, and what type of information is going to be returned. To do that, we are going to use Postman.

 

There are 2 different presence endpoints. One is going to return the presence information of a given user (or the current logged user):

 

Calling the new Presence endpoint in MS Graph API from SPFx 2
 
The second one, likely the most useful for our applications, will allow us to get presence information for a list of users:

 

Calling the new Presence endpoint in MS Graph API from SPFx 3
 
In order to call MS Graph API from Postman, I recommend to use the postman Graph collection that the Graph team provides in this GitHub repo

One of the requests in the collection, will get us a valid AccessToken, which we can use to invoke other endpoints in the API. The readme.md file has all the detailed information to configure Postman to call Graph. Basically, you will need to register an Azure AD App in Tenant’s Azure Active Directory, create a secret, and assign permissions to the presence endpoint:

 

Calling the new Presence endpoint in MS Graph API from SPFx 4
 
Once we get the AccessToken, we can call the presence endpoints.

Request / Response for getting current user presence info

To get the presence information for the current logged user, we will do the following:

  

Calling the new Presence endpoint in MS Graph API from SPFx 5
 
As you can see in the image above, the Response data consist in the user’s id, and two more fields:

  • Availability: According to the documentation, the possible values are: Available, AvailableIdle, Away, BeRightBack, Busy, BusyIdle, DoNotDisturb, Offline, PresenceUnknown
  • Activity: This is complimentary information to the availability field. Possible values: Available, Away, BeRightBack,Busy, DoNotDisturb, InACall, InAConferenceCall, Inactive,InAMeeting, Offline, OffWork,OutOfOffice, PresenceUnknown,Presenting, UrgentInterruptionsOnly

Request / Response for getting different user´s presence detail

In order to get the presence information for different users, we must do a POST to the /beta/communications/getPresencesByUserId endpoint, and in the body of the request, we include an array with the different users id that we want to get.

 

Calling the new Presence endpoint in MS Graph API from SPFx 6


As you can see, the response data is the same than in the previous endpoint, but for each of the users requested.

Note: If we send an ID of a non-existing user in the directory, we will get a “PresenceUnknown” in the availability and activity fields (but the request will be executed successfully).

 

Calling the endpoint getPresencesByUserId from an SPFx webpart

Now that we know the request we have to submit, and we understand the data that will be returned in the response, it’s time to call the endpoint from our SPFx webpart and render the results.

To do this, as the endpoint is a MS Graph one, we can use the MSGraphClient provided by the framework. As what we want to do is to get the presence info for all the users in the current SharePoint site, first we need to get all the members of the site, this will also achieve calling another endpoint in MS Graph API.

In the OnInit method of our spfx webpart, we will use the object msGraphClientFactory to get a MSGraphClient:
 Calling the new Presence endpoint in MS Graph API from SPFx 7

We will pass that Graph client, to the React component, that will do all the hard work.

First, we get all the members of a site with the following code:

 

Calling the new Presence endpoint in MS Graph API from SPFx 8


Basically, we are calling Graph, and the result is stored in a Dictionary. Later, we will update that dictionary with the presence info for each user.

Now we compose an array with the user’s IDs, and we call the presence endpoint:

 

Calling the new Presence endpoint in MS Graph API from SPFx 9


Finally, in the React component render method, we use the Persona component from the Office Fabric UI, which will allow us to render a card per user, with the presence detail:

 

Calling the new Presence endpoint in MS Graph API from SPFx 10
 
The function _fromPresenceAvailabilityToPersonaPresence, just do an easy mapping between the possible values of the availability field from Graph API, and the different options in the PersonaPresence class, in the Persona component.

 

Calling the new Presence endpoint in MS Graph API from SPFx 11
 
You can find the entire source code in the sp dev GitHub repo

Author bio

Luis Mañez

Luis Mañez

I help find the best technical designs to meet client needs and act as tech lead to build great solutions. I have fun with some R&D tasks, always trying to improve our tools and processes, and I often help the Microsoft community as a blogger and speaker, contributing to open source projects.

View all articles by this author