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 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):
The second one, likely the most useful for our applications, will allow us to get presence information for a list of users:
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:
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:
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.
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:
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:
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:
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:
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.
You can find the entire source code in the sp dev GitHub repo