How to get User Presence information in Microsoft Teams using React

Overview:

 

   Microsoft Teams as we all know is a unified communication & collaboration platform that combines persistent workplace chat, video meetings, file storage , and application integration. It is the hub for teamwork. Microsoft has announced retirement of Skype for business by July 31 2020, considering this Microsoft teams wiil be the default enterprise collaboration tool for communication. Microsoft Teams has rich set of features. There are 60+ devops integration apps available out of the box.

 

   Microsoft Teams integration API framework can communicate with outside services via Connectors. Connectors already exist to push updates from JIRA, Azure DevOps etc. and many more to Teams, and this API framework allow more to be built, also which allows organizations to link their internal apps. 

 

There are multiple use case scenarios where your line of business application needs to show the user presence information displayed in Microsoft Teams. 

 

   In this article we will walkthrough the steps to programmatically fetch the user presence information displayed in Microsoft Team into react webapplication. We will be making use of the Microsoft Graph Toolkit.

 

 

Steps to get the user presence information:

 

•  Create a React web application using below command

npx create-react-app  presence-using-mgt --template typescript
cd presence-using-mgt

 

•  Add Microsoft graph toolkit NPM library using below command

npm install @microsoft/mgt –save

• Now open open the webapplication folder in your favorite code editor.
  
• In the App.tsx file, right after the import statement, add below code to instantiate the object of MSAL provider. Providers enable authentication and Microsoft Graph access for all components. Each provider provides implementation for acquiring the necessary access token for calling the Microsoft Graph APIs. 

 MSAL provider in the background uses MSAL. js to connect to Microsoft 365 and pull the data.Notice that there is a clientID parameter that you need to pass. Enter the client Id created in Azure Active Directory (AAD) here.

• function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
    Providers.globalProvider = new MsalProvider({ clientId: '<Client Id>'});
    Providers.globalProvider.onStateChanged((e) => {
      if (Providers.globalProvider.state !== ProviderState.Loading)
        setIsLoggedIn(Providers.globalProvider.state === ProviderState.SignedIn);
    });

  
  
• In the index.tsx add this declaration. this declaration is required as react cant understand the non-"standard" tags associated with web component.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'mgt-login': any;
      'mgt-presence': any;
  }
}

Now as all the initialization is completed, we will add two components.

•  Login component:  For authentication

• Create a file with name NavBar.tsx in the root folder (same folder where app.tsx resides)
• Open the NavBar.tsx and add below code to import the react and Microsoft graph toolkit components

• import React from 'react';
  import '@microsoft/mgt';
  

  
  
• Then add the mgt-login web component as show below

const NavBar = () => {
    return (
        <nav>
            <mgt-login></mgt-login>
        </nav>
    );
}

export default NavBar;

• Presence component:  To display the user presence.

• Create a file with name Presence.tsx in the root folder (same folder where app.tsx resides) 
• Open the Presence.tsx and add below code to import the react and Microsoft graph toolkit components 

import React, { useState } from 'react';
import { Providers, MsalProvider, ProviderState } from '@microsoft/mgt';

• Now create a compoment named Presence and add below code.

• const Presence = () => {
      return(
          <mgt-person id="online" person-query="<email address of the person whose status to fetch>" show-presence view="twoLines"></mgt-person>
  
      );
  }
  export default Presence;

• Finally use these two components inside the main component called "App". Your App component should look like this:

import React, { useState } from 'react';
import { Providers, MsalProvider, ProviderState } from '@microsoft/mgt';

import Presence from './Presence';
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
  Providers.globalProvider = new MsalProvider({ clientId: '<Client Id>});
  Providers.globalProvider.onStateChanged((e) => {
    if (Providers.globalProvider.state !== ProviderState.Loading)
      setIsLoggedIn(Providers.globalProvider.state === ProviderState.SignedIn);
  });

  return (
    <div>
      <NavBar />
      {(isLoggedIn) ?
        <div className="grid sm:grid-cols-2 gap-4 m-10">
          <div>
            <h1 className="mx-3 my-3 text-2xl leading-tight">
              User Presence
          </h1>
            <Presence/>
          </div>

        </div>
        :
        <div className="font-semibold tracking-tight text-center shadow-md p-4 m-10">
          Login to show user presence
        </div>
      }
    </div>
  );
}

export default App;

 Now open the terminal and execute the command npm start and you should see the login screen as below:

 

 

 

 Provide the user credentials and you will be logged in to see the user presence.

 

 

 

 

Summary:

 

Microsoft Graph Toolkit components and helpers helps developers tremendously when accessing and working with Microsoft 365 data. In the above steps we have seen how easily we can connect to Microsoft 365 and fetch user presence information in Microsoft Teams of a user using Microsoft Graph Toolkit  in a react webapplication.