Add PowerApps As In-Meeting Teams App

Do you have a PowerApp canvas app which you want to use as Teams in-meeting app?

This article is focused on how you can use your existing PowerApps canvas apps inside the Teams meetings as in-meeting apps.

Pre-requisites:

• Microsoft 365 account with Microsoft Teams and PowerApps license
• Power Apps canvas app created in mobile format
• Zip package of your Power Apps canvas app which will have 3 files (manifest.json, color.png, outline.png)
• Microsoft Teams

Let’s take a use-case of a sample app, below figure shows a sample Employee Performance Review canvas Power App created in Portrait format.

Fig – Sample Employee Performance Review App

Note
If you want to change the orientation of your PowerApp, follow these steps:

1. Click on Settings from the top navigation bar.
2. Go to Display, then click on Orientation.

As highlighted in the below figure, 1.1, you can change the orientation of your app from Landscape to Portrait or vice versa.

Fig 1.1 – Display orientation setting for PowerApps canvas app

Steps to add PowerApps canvas app to Teams in-meeting app

1. Navigate to PowerApps home page: https://make.powerapps.com/.
2. Select the app you want to add as in-meeting app.
3. Click on “Add to Teams” as shown in Fig 1.2.

Fig 1.2 – Add PowerApps canvas app to Teams using Add to Teams from top navigation bar

When you click on Add to Teams, a panel will open like shown in Fig 1.3.

Fig 1.3 – Add to Teams Panel

If you click on Add to Teams inside the Panel, PowerApps will redirect you to Microsoft Teams and the App will open. When you will click on the Arrow button beside Add, you will see that this app can be added to only Team and chat scope, as shown in Fig 1.4.

Fig 1.4 – Add to Teams from PowerApps adds the app only to Team and Chat scope

1. So, we are not going to click on “Add to Teams” button in Fig 1.3, because it does not have meeting scope that we are looking for.
2. Instead of clicking on “Add to Teams” in Fig 1.3, click onDownload App as shown in Fig 1.3.
3. Download app will download a zip package for your app in your local file explorer.
4. Navigate to the downloaded zip package, extract, and open the manifest.json file in code editor of your choice.
5. In manifest.json file, check context in “configurableTabs” section. It should show meetingSidePanel, meetingChatTab, meetingDetailsTab, meetingChatTab, added as shown in Fig 1.5.
6. If the below shown meeting contexts are not added, then add and save the manifest.json file and create a zip package of saved manifest.json file, color.png, outline.png file. If the meeting context is already added, then use the existing zip package for the later step.

Fig 1.5 – Manifest.json file of PowerApps canvas app to include meeting context

Now Navigate to https://admin.teams.microsoft.com/ > Manage Apps > Upload new app > upload the zip package of your app.

If you don’t have the Teams admin permissions, ask your Teams admin to upload the app in Manage apps.

Fig 1.6 – Upload zip package of app to Manage Teams in Teams admin center

Make sure the app status is set to Allowed. Once the app is uploaded, search the app and check the status of the app as shown in the below figure, 1.7.

Fig 1.7 – Uploaded app status set to Allowed

Now navigate to Microsoft Teams > left rail > Apps > Built for your org > You will find your uploaded app as shown in Fig 1.8.

Fig 1.8 – Microsoft Teams app store

Now click on the app, you will see an arrow beside the Add button. Click on the arrow, and you will also see the option to Add to meeting as shown in Fig 1.9. 

Fig 1.9 – App shows Add to a meeting scope

Now click on Add to a meeting. You can search for a meeting where you wish to add this app. I have selected Performance discussion meeting, as shown in Fig 1.10. Once you select the meeting, click on the Set up as tab button.

Fig 1.10 – Add app to meeting as a tab

On clicking Set up a tab, it will redirect you to meeting and an app configuration will pop up. Click on the save button as shown in Fig 1.11.

Fig 1.11 – Save the app configuration

Now you will see that the app has been added to your Meeting as a tab, as shown in Fig 1.12.

Fig 1.12 – Meeting app added as Tab in meeting chat

Now join the meeting, and from the top bar click on the app. You will see that the app will be shown in the meeting side panel as shown in Fig 1.13.

Voila, PowerApps is added as in-meeting Side panel app!

Fig 1.13 – PowerApps added as in-meeting side panel app

This article briefly talks about how you can add your own PowerApps canvas app as Teams meeting app.

I hope this article is helpful. Keep learning and keep sharing!