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:

 

Screenshot members on a SharePoint site

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):

 

Screenshot of endpoint from Postman
 
The second one, likely the most useful for our applications, will allow us to get presence information for a list of users:

 

Screenshot of endpoint from Postman
 
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:

 

Screenshot assigning permissions to the presence endpoint
 
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:

  

Screenshot presence information for current logged user
 
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.

 

Screenshot presence information for different users


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:
 Screenshot msGraphClientFactory

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:

Screenshot code all the members of a site


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:

 

Screenshot array with user's ID


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:

 

Screenshot render a card per user
 
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.

 

Screenshot PersonaPresence
 
You can find the entire source code in the sp dev GitHub repo

Author bio

Luis Mañez
Luis Mañez
Atlas Chief Architect & Microsoft MVP
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.

Comments


comments powered by Disqus

Related Articles

Sign up to our ClearThought newsletter

Get inspired and learn something new by subscribing to our FREE newsletter. It’s full of ClearPeople's thought-leadership whitepapers, blogs, events, and much more. We promise to not use your email for spam.

Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.