Create an Avatar with presence status indicator in Power Apps

How can we get the modern Avatar control to use the Microsoft Teams’ presence to set its status indicator? One of the modern controls is the Avatar Control. This control includes a badge property that allows you to indicate the user’s current presence status. However, this feature is not automatically connected to the user’s Teams status. In this post, we will explore how to integrate Microsoft Teams presence status into the Avatar control, ensuring it accurately reflects the user’s availability.

Understanding the importance of presence indicators in modern digital workplaces is essential. Presence indicators can communicate availability to colleagues in real-time, enhancing collaboration and communication. Users benefit from knowing if their teammates are busy, available, or away, which can lead to more effective teamwork and reduced interruptions.

Prepare the Microsoft Graph calls

To get our current status value from Microsoft Teams’ presence endpoint we will need to sort out the access to the end point.

We will need to create an app registration in Azure and supply this with the Presence.Read.All permission.

Creating a flow to obtain presence data is a straightforward process when using Power Automate. You will begin by setting up a trigger that initiates the flow when you want to fetch the user’s presence data. This could be on a schedule or triggered by a specific event in your app.

Moreover, you can implement error handling within your flow to manage cases where presence data might not be available. This ensures a smoother user experience, as users will be informed if their presence status could not be retrieved for any reason.

Create a Get Presence Flow

First, create a flow that will collect the presence information for the logged-in user. This flow will run within Power Apps, seamlessly integrating the presence data into your applications.

This endpoint is specifically designed to return presence information for a user, leveraging the Microsoft Graph API. Ensure that the request is structured correctly to avoid errors and that the authentication is properly set up.

It is essential to capture and store this information in a variable for further processing within the app. By doing this, you can effectively update the Avatar control with the user’s current status, enhancing user interaction.

Within the HTTP action, set the URL to the following endpoint:

Understanding the specific roles of each parameter is vital. The Authority field directs the request to the right authentication service, while the Tenant ID, Client ID, and Secret must correspond to your Azure app registration. Ensure these values are securely stored and managed, as they control access to your application.

https://graph.microsoft.com/v1.0/users/@{outputs('Get_my_profile_(V2)')?['body/id']}/presence

After gathering the presence data, ensure that your flow sends this information back to your app effectively. This involves packaging the data into a suitable format that your application can understand and utilize without issues.

Next, configure the flow to respond with the availability status of the user:

body('HTTP')?['availability']

To keep the user’s status current, implement a Timer control that periodically triggers the flow to fetch the latest presence status. This ensures that the Avatar control always displays the most accurate information, adapting in real-time to changes in the user’s availability.

When setting up the app registration, it is crucial to carefully consider the permissions required. The Presence.Read.All permission is necessary for accessing the user’s current presence status. This permission allows the application to read presence information across the organization. Therefore, make sure to review the permissions and understand their implications, as they are a critical part of the security model in Microsoft Azure.

To get our current status value from Microsoft Teams’ presence endpoint, we first need to establish access to the endpoint. This process involves creating an app registration in Azure, which will serve as the bridge between our application and Microsoft’s services.

Authority : https://login.microsoft.com
Tenant: The tenant ID to be found in the app registration
Audience: https://graph.microsoft.com
ClientID: The Client ID to be found in the app registration
Secret: Generated in the app registration

Remember to handle various status types appropriately. The greater the number of statuses you incorporate, the more informative your application can be. For instance, you might include statuses like ‘Busy’, ‘Do Not Disturb’, and ‘Be Right Back’, each represented visually to enhance clarity.

1. Available
2. Busy
3. Do Not Disturb
4. Away
5. Offline
6. Be Right Back
7. Presenting
8. Unknown

Responding Back to the App

Now we get the flow to respond back to the app with the availability:

For more insights into working with Microsoft Graph and the Power Platform, check out my series on Microsoft Graph and the Power Platform. Here, you will find various posts that cover essential topics and advanced features that can enhance your understanding and application of these powerful tools.

Get a Regular Update of the Avatar’s Status Indicator

I’m going to use a Timer which calls a flow to get my presence for the user. And I can now set a variable to the current status.

On the Avatar Control, you set the Badge property to reflect the user’s current status. This integration creates a visually informative element within your application, allowing users to quickly assess their team’s availability.

Notice that the above is a bit of a simplification as I didn’t want to clutter the code too much. There are a larger number of statuses other than the offline and Available as implemented above.

The following eight statuses are available and could be implemented in the above switch case:

Other Related Posts

For more posts about Microsoft Graph and the Power Platform please read my series about Microsoft Graph and the Power Platform