PowerApps - App to Show Microsoft Teams members using MS Graph API

Microsoft PowerApps helps business/teams in building quick OOB apps. This post helps understanding, how to get access to Microsoft Teams data from PowerApps using custom connectors.

Why there is a need for custom connector? Microsoft has introduced lot of connectors on PowerApps interface to get access to the data. The Office 365 connectors included in Microsoft PowerApps are office 365 users, mails, etc. The custom connectors are created for the data, which is not exposed as connectors readily. The custom connectors are common for both Flow and PowerApps.

We are leveraging Microsoft Graph API as data sources for this app, and to be connected as custom connectors on Microsoft PowerApps. 

The following snapshot shows the end result, showing data from MS Teams on MS PowerApps using MS Graph API.

Demo App to Show MS Teams Data

Let us look at step by step approach for achieving the functionality.

Create Custom Connector

Let us quickly see how to create one custom connector. The custom connector needs to pull the members of the Microsoft Team.

• Navigate to apps landing screen (https://make.powerapps.com), and click on data -> custom connectors on the navigation bar.
• Create new custom connector and provide some name. Select scheme as HTTPS, host name as graph.microsoft.com and base URL as /.

Note: Before proceeding to next step, go to azure active directory section on the azure portal. Add necessary API permissions to the data/API you are going to provide access to. And copy the app client credentials (client ID and generate secret key). Please refer to the my post on Azure AD authentications or MS documentation to get the credentials. 

• In the security screen, select oAuth and provide the following details.

Custom Connector authentication

• In the definition tab,
• add new action and provide the operation details. Operation ID to be GetTeamPeople and visibility as None.
• Select import sample in the request section, provide verb to be GET and URL to be https://graph.microsoft.com/v1.0/groups/<MICROSOFT_TEAMS_ID>/members
• Select Add default response from Response section, and paste the body results for the above URL. [This body results could be extracted by using graph explorer https://developer.microsoft.com/en-us/graph/graph-explorer or Postman tool)

Adding API definitions to custom connector

• Save and Update the connector, before testing.
• Create the new connection and test operation.

Testing the custom connector to get data from MS Teams

The custom connector is created. Once the test succeeds, go back to apps section. 

Configuring App - MS Teams data via custom connector

Create a new app or go to existing app on PowerApps portal.

• In the home screen of app creation portal, click on data sources. Under connectors, the app created will be listed. Double click to list it under “in your app” connectors pane. Also add necessary connectors to your app. 

Configuring connectors on the app

• Then add a new screen with list template.
• Select the template gallery list
• Then in the functions pane, insert the graph function as hellonavapp.GETTeamPeople().value.userPrincipalName

The following screenshot shows the insertion.

Configuring Properties on PowerApps - uses custom connector data

• Then for Title, insert the function with Office365Users data source to select the user display names. 
• The following is the function Office365Users.UserProfile(ThisItem.userPrincipalName).DisplayName

The following snapshot shows the function inserted for display names.

Configuring Name property on PowerApps - uses OOB Office365 users connector data

• Then for image, insert the function with Office365Users data source to select the user images.
• The following is the function: Office365Users.UserPhoto(ThisItem.userPrincipalName)

You have successfully created a Microsoft PowerApps to pull data from the Microsoft Teams using Microsoft Graph and Office 365 user data sources. The following snapshot shows the simple app with users from selected teams.