Microsoft Teams has brand new extensibility points that will enable developers to expand the meeting experience. With this new capability, developers are able to build apps or integrate existing ones within the meeting surface and provide richer collaboration experiences for users across the entire meeting lifecycle – covering events and actions from before, during, and after a meeting.

The whole concept was created to have standard web solutions incorporating the ability to interface with Teams meetings through configurable tabs and the Teams client JavaScript SDK, but what about Power Apps?

What if we can combine Power Apps with the new meetings extensibility features and quickly create applications to interface with the meeting surface. It can be done, well… currently with some limitations, but what is currently available is at least enough to get our hands dirty and create some cool stuff.

Here is what I’m trying to achieve:

“I want to create a very simple application that can be incorporated and used by any meeting participant to track time  during a meeting. It will present a clock in stop watch mode (regressive timer) that can be adjusted and used to ensure you will use the meeting time in the most efficient way.”

Step 1 – Create the Power App

The power app will have two screens. The first one will be presented just after the configuration of the app in the meeting, just to provide more information on the purpose of the application. The second one will have the stopwatch logic, as well as a time picker and a button to set/reset the regressive counter.

Screen Intro is the first app screen. It has just three labels to present a text message to all users configuring the application on the meeting invite. Screen Timer has a group of components formed by TextInput2 and Icon1 to allow users to set the stopwatch. The icon was used just to create a good looking text box with a small watch. The Button1 is used to set the Timer1 object with the start value and the cmp_TimePicker_1 is a custom time picker that allows users to select hours, minutes and seconds that will be configured as the start value for the stopwatch. The cmp_TimePicker component was created and documented by Matthew Devaney here (Make A Time Picker In Power Apps – Matthew Devaney) if you are interested. As I’m using the component to select hours, minutes and seconds I made a few changes to remove the AM/PM selection and include the ability to select seconds.

Here are the two screens in the initial state.

One important thing is the logic required to decide which screen present when. When the Power App is called from Teams, we need to detect if it is being executed from the tab pre-meeting or during the meeting. To create the detection logic I’m using a context variable that is incorporated by Teams when calling the Power App.

The logic was incorporated to the initial execution of the app and based on the context we decide if we will navigate to Intro or Timer screens. Here is the relevant code:

Set(varSubEntityId, Param(“subEntityId”));

If(
     varSubEntityId = “{subEntityId}”,
     Set(
         varInMeeting,
         true
         ),
     Set(
         varInMeeting,
         false
         )
);

If (varInMeeting, Navigate(‘Screen Timer’), Navigate(‘Screen Intro’));

If you are not familiar with Power Apps and just want to have access to the sample package with the clock, please click here and download the zip file with the app. You will need to import it in your Power Apps environment. After the import, please save and share the app with all the users that will use it… and remember, this is not a production ready app, it is a prototype just to prove a concept.

Step 2 – Teams App

Now that you have your Power App up and running, let’s work on the Teams App. A Teams app package is a.zip file containing the following: A manifest file named “manifest.json”, which specifies attributes of your app and points to required resources for your experience, a transparent “outline” icon and a full “color” icon.

The manifest file is the key file of the app and the one we need to dedicate time to configure the meeting experience based on the Power App.

Before we start, go to the Power Apps editor and get the URL of your Power App. You can do that opening powerapps.com, and selecting details on your app under Apps. The url will be listed under Web link.

We will need the value for App ID. Copy that value as you will need it to create your manifest file.

You will also need a random UUID for your Teams App. Please go to Online UUID Generator Tool and click “Generate a version 4 UUID”. Copy the value as you will need it in to create your manifest file.

Now you have the two values you need, go ahead and download the sample manifest from here. Unzip the file and open the manifest.json.

Replace <RANDOMUUID> with the value you generated for the random UUID.

Replace <APPID> with the value you copied from your Power App.

Save the manifest.json file and zip it again, together with the two icons. Make sure you are creating a file with all the files in the root of the zip file (very important).

Step 3 – Using your App

Now that you have your Teams App package (the zip file with the manifest and the two required icons) you will need to load it to Teams. You can load the app using the Teams Admin console (if you want to distribute the application in a more robust way) or you can just upload the file using your Teams client.

Here we will use the Teams client to upload the app. Open your Teams client and click in the Apps icon located in the lower left. Click on the Upload a custom app option and select Upload for <Your Company>.

Select the zip package and click Open. The app will be installed into Teams and will be available to be incorporated to meeting invites.

Now schedule a meeting with your colleagues, open the invite and click + on the top of the screen. You will see your app listed in the Optimized for meetings section. Click Meetings Timer and you will see a new tab in the invite.

Clicking on the Meetings Timer tab you will see the first Power App Screen (intro). Click join to enter the meeting. You will now see a new clock icon on the top of the screen. Click it and the second screen (timer) will be available on the right hand panel. You can select a time from the time picker, click set and start the stopwatch clicking on the big button.

Limitations

I’m sure our dev team is still working to improve the experience with Power Apps in this new meetings extensibility scenario. Currently there are some limitations:

• The meeting context (user role, meeting id, meeting members, etc) is only available via Teams Client SDK (based on JavaScript). As you may know, Power Apps doesn’t allow the use of custom JavaScript code in applications, so you’re unable to detect the user role, get the meeting id, and obtain other information from the context.
• I also couldn’t find a way to use the application from the Teams web interface. The application is available, can be installed from the web interface but the button to activate it during the meeting is not presented.

If you followed those instructions and found additional limitations, please reach out. We will make sure to communicate to the right product groups and contribute to improve the product.

Have fun, Cristiano.

Disclaimer – The information contained in this blog post doesn’t represent the official Microsoft guidance or best practices. It is just the view of the author on current alternatives, implementations and workarounds for common issues and/or business needs. Please refer to official Microsoft documentation and evaluate carefully any steps, code or procedures documented herein. The author doesn’t offer any warranty. Use this information at your own risk.