Let us see how to create an interface on Power Apps platform, listing down all the teams under office 365 Microsoft teams tenant, also enable options to join the team if user is already not a member.
In the previous article, we have seen the ways to identify the user membership information via Microsoft Graph API. Using these Graph API and information, we will build the user interface functionality.
Here, a simple app is built for end-users on Power Apps platform, which in turn connects to Microsoft Graph API data explained in the previous article. The below snapshot shows the end result.
 |
| Microsoft Teams List - Options showing if user is member of /or join team button |
Custom Connector
Expose the Graph API data on Connectors:
- To get all Office 365 groups: Custom connector is required
- To get only teams (user joined), Microsoft Teams Connector is leveraged.
Here are my previous posts explaining how to create custom connector to get Office 365 groups list.
- Article explains Office 365 Group association, but has detailed section on how to creating custom connector for getting office 365 groups data on Power Apps / Power Platform:-http://www.techwithnakkeeran.com/2019/12/identifying-microsoft-teams-and.html
- Detailed steps explaining how to create a custom connector, which also includes configure Azure AD application for flow authentications, configuring and testing custom connector for Flow (on Power Platform):- http://www.techwithnakkeeran.com/2018/05/creating-office-365-sharepoint-custom.html
Note: With this connector, we are only trying to pull all Office 365 groups list. Once retrived, we will set necessary filter to get only all teams under the tenant.
Assuming custom connector is available, let us get into steps for creating app on Power Apps platform.
Configuring App on Power Apps Platform
Create an App,
- In the data source find and add the necessary connectors.
- Microsoft Teams OOB connector – to identify the teams of logged in user.
- Custom connector (explained in my previous article) - to identify all teams under the tenant.
 |
| Data Sources - Custom connector to get office 365 groups and Microsoft Teams default OOB connector to get teams user is member of |
- In OnStart property of app, get all teams for user logged in and set into a variable/collection. In this case, variable.
 |
| OnStart Property showing way to store teams - user is member of |
- Insert a gallery, In the Item property, associate the Office 365 groups custom connector data source. Filter only the groups, which has teams association.
 |
| Gallery Items Property - Filtering only teams from Office 365 groups |
- Inside gallery, insert Label control and change the Text property of label to show the group display Name (in our case, it is Teams display Name)
 |
| Label to show Team Names on the gallery list |
- Inside gallery, insert a icon showing tick icon to display if user is already joined the team. Configure visible property of tick icon, to show only if user is part of team. The same could be identified with the help of TeamMemberships variable created in the beginning step.
 |
| Show Tick icon - if user is already member of Team |
- Inside gallery control, insert a button to enable option to join team if user has not joined already. Configure the visible property of join team button, to show only if user is not part of team. This is opposite logic of above step.
 |
| Show Join Team button - If user is not part of team |
- Inside gallery control, configure the OnSelect property of button, to launch the team on the same interface for user to join respective team.
 |
| Setting Launch URL in the OnSelect property of a join button |
Then save and publish this app, configure the app embed URL in the SharePoint or Microsoft Teams.
 |
| App showing all teams list n the tenant - Showing tick icon if user is member of or showing join button if user is not member of |
