Forum Discussion

areejalabri's avatar
areejalabri
Copper Contributor
May 23, 2024

out of office status api to sharepoint

HI, 

 

I am working on a project .. where i have list of users with some additional details. 

I have developed a view from this list with script editor.. 

I am displaying all the information of each user including user photo. 

 

What I am straggling with is how to fetch the user status. 

 

 

and here is example of how i am retrieving the rest of the values 

 

I found a solution to user Microsoft Graph API, so i have create a new application on Azure and add the following permissions: 

 

after that i add this script on a testing page to test this feature: 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Presence Test</title>
    <script src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js"></script>
</head>
<body>
    <h1>Presence Test</h1>
    <div id="user1-presence">User 1 Presence: <span id="presence1">Loading...</span></div>
    <div id="user2-presence">User 2 Presence: <span id="presence2">Loading...</span></div>

    <script>
        const msalConfig = {
            auth: {
                clientId: 'YOUR_CLIENT_ID', // Replace with your Azure AD app client ID
                authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID', // Replace with your tenant ID
                redirectUri: 'YOUR_REDIRECT_URI' // Replace with your redirect URI
            }
        };

        const msalInstance = new msal.PublicClientApplication(msalConfig);

        const loginRequest = {
            scopes: ['Presence.Read']
        };

        function fetchUserPresence(userEmail, callback) {
            msalInstance.loginPopup(loginRequest).then(loginResponse => {
                return msalInstance.acquireTokenSilent(loginRequest);
            }).then(tokenResponse => {
                fetch(`https://graph.microsoft.com/beta/users/${userEmail}/presence`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${tokenResponse.accessToken}`,
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    callback(data);
                })
                .catch(error => {
                    console.error("Error fetching presence data:", error);
                    callback({ availability: 'Unknown' });
                });
            }).catch(error => {
                console.error("Error during authentication:", error);
                callback({ availability: 'Unknown' });
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            const user1Email = 'email address removed for privacy reasons'; // Replace with the actual email of user 1
            const user2Email = 'email address removed for privacy reasons'; // Replace with the actual email of user 2

            fetchUserPresence(user1Email, function(presence) {
                document.getElementById('presence1').innerText = presence.availability;
            });

            fetchUserPresence(user2Email, function(presence) {
                document.getElementById('presence2').innerText = presence.availability;
            });
        });
    </script>
</body>
</html>

 

The results i am getting is:  Unknown 

 I feel like there is something small i need to fix it here 

could you please help ! 

 

 

Resources