Meetings-aware Power Apps in Teams

Microsoft Teams is the hub for teamwork. While we may have started using Teams as a replacement for legacy chat tools, it has clearly become the digital workplace where we chat, meet & collaborate with our teams. But where Teams truly shines is when we use it as a platform to leverage one of the 750+ Apps in the App store or build custom Apps to meet our business needs. 

With the recent announcement around meetings extensibility for apps, we can now build apps that can transform the meeting experience.

This article explores some of those extensibility options using a Power App in Teams. The inspiration for this came from Cristiano, a dear friend of mine at Microsoft, who blogged about Power Apps with Teams Meetings extensibility. We don’t have all of meetings extensibility options available in a Power App just yet (expecting them to be released soon), but the ability to use a low-code platform to create Apps using the new extensible content surfaces for meetings is exciting.

While there are a lot of cool ideas that come to mind to take advantage of these extensibility options, I decided to build this simple app “Action Items for Meetings” to address one of the biggest pain points in a meeting – Capturing action items and assigning them to the appropriate team members. Before we get into the specifics of the app, I am sure some of you are wondering why not just use Planner to capture those tasks. Well, you can and that’s what this app does behind the scenes for you but I wanted to explore a way to assign tasks using the in-meeting side panel, so I didn’t have to switch to another App during the meetings. Btw, if you haven’t used a Planner in teams to organize your tasks yet, I highly encourage you to check it out.

App Overview

Let me provide a quick overview of the App before we look at the internals

AIM (Action Items for Meetings) App allows you to capture action items during a meeting and assign it to someone on the team with a due date. Ideally, I would have liked to pre-select the Planner and Bucket settings during the pre-meeting experience using the Tab surface, but for this demo I am doing that all in the in-meeting side panel. Once the meeting starts, you can launch the AIM App, select the Planner & Bucket where you want the tasks stored and create any follow up tasks as needed.

Building the App

Let’s take a look at the internals. The app has 2 screens – Home Screen and ManageActionsItems Screen.

The logic for which screen to display is embedded in the App OnStart event. Since we are not yet getting all of the meetings extensibility params in Power Apps yet, we are only relying on the SubEntityId value to be passed during in-meeting experience. If no SubEntityId value is being passed, we display the Home Screen otherwise we display the ManageActionItems Screen.

I am also leveraging a “debug” param so I can test the in-meeting experience using standalone web experience. This will allow us to pass in the param from a web url and force the app to display the ManageactionItems Screen. I will show you how to use this later in the article.  If you download my solution, you will also see a few more variables being set. These were created to identify what values the app is able to read during the meeting experience and I have left them in the final solution for you to explore.

There is not much happening in the Home Screen right now. I identify the full name of the user using User().FullName and have a few labels to provide guidance. As I mentioned earlier, I would love to come back and update this to store the Planner and Bucket values during the pre-meeting experience perhaps in a SharePoint list. If we build this App using Dataverse in Teams, we can also store the values along with the unique Id in a Data Table. 

The ManageActionItems Screen has the main code for the App. This is where you see the power of the low-code Platform as I have fewer than 10 lines of code to make the whole thing work.

1.      In the App Onstart event, create a Planner collection using: ClearCollect(Planners, Planner.ListMyPlans().value);

2.      This Planner collection is used as the source (Items Property) for the Planner dropdown ddnSelectPlanner

3.      In the OnChange event of the Planner dropdown, populate the Buckets collection which will be used to populate the ddnSelectBucket dropdown: Set(SelectedPlannerId,ddnSelectPlanner.Selected.id); ClearCollect(Buckets,Planner.ListBuckets(SelectedPlannerId).value)

4.      The Action Items Details control is a standard Text box and the Due Data is a standard Data Picker control

5.      To assign a task to a team member, I am using a combo box cboAssignedTo and setting the Items property to Office365Users.SearchUser({searchTerm:cboAssignedTo.SearchText,top:10}). This allows me to search for a user by name

6.      Once we have all the values we need to create & assign a task, use Planner.CreateTaskV2(ddnSelectPlanner.Selected.id, txtActionItem.Text,{bucketId:ddnSelectBucket.Selected.id, dueDateTime:dtDueDate, assignments:cboAssignedTo.Selected.Id}); in the btnCreateActionItem OnSelect event to create the task when the “Create Action Item” button in clicked. I also save the Task name in the varTaskName variable

7.      Once the task is successfully created, lblAIMSuccess is used to display a confirmation using  the varTaskName variable: "Action Item """ & varTaskName & """ created successfully"

8.      There are a few more lines to enable/disable the button or to clear out the fields.

 

Hope you were able to follow along and build the Power App. You can also download the sample App from here and import it in your environment. Make sure you save and publish the App. 

If you launch the App in the browser, you are going to see the Home Screen as the subEntityId will be blank. This is where the debug flag is used. In the browser address bar, append “&debug=true” to your URL. 

https://apps.preview.powerapps.com/play/<your App id here>?tenantId=<your tenant id here>&source=portal&debug=true

This will trigger the code in the App OnStart event and navigate to the ManageActionItems screen where you can test out the creation and assignment of action items. 

Importing the App

Using the Import canvas app option, use the package zip file to import the solution in your environment. You have the option to rename the App during the import process.

 

Deploying the App

I recommend using the “Add to Teams” option in Power Apps to create a package that can be imported to Teams. There are 3 files in the resulting package: color.png, outline.png and manifest.json. Manifest file is the key file here that contains the information for your app. You can also create a manifest file manually or use the “App Studio” in Teams to create your manifest. 

Since I used the "Add to Teams" option, the resulting package zip file already has the manifest.json file. Before we can use this with Teams meetings, we have to make one change to this file. Find the "configurableTabs" section and add "meetingSidePanel" as shown below. (You will have to extract the files from the package and zip them again after making the changes)

The resulting manifest.json should look like this.

Package up the files again in a zip file. Once you have the Teams App package, you can add it to Teams using the “Upload a custom app” option to test out the App inside Teams. If you want others in your org to use this App, you will have to work with the Teams Admin to upload this app and make it available for the organization using App Setup Policies. 

Using the App in Teams

The hard work is done. Now that the app in available to use, let's add it to a meeting and take it for a test drive. Once you have a meeting scheduled, click on the + and add the App to your meeting. 

Launch the App in the pre-meeting experience and you will be presented with the Home Screen. During the meeting, you will see the AIM App icon on the top bar. Clicking on the App icon will launch the App in the in-meeting side panel and the ManageActionItems screen will be presented. 

That's all folks. No more missed tasks! Have an AIM in every meeting!

Pre-Meeting experience

During Meeting experience

Extending the App!

I would love to hear what you think of this app and more importantly what other scenarios would you be building Apps with meetings extensibility for. Here are a few other things I would like to build into v2 of this app time-permitting:

1. Extend the pre-meeting experience and capture the Planner and Bucket settings for the upcoming meeting.
2. Identify attendees for the meeting and prefill assignments drop-down with attendees
3. Show an in-meeting content notification when a task is assigned. Ideally I want to show this to only the assigned individual.
4. Add a post-meeting experience that summarizes all the Action Items created during the meeting (or maybe that’s just a redirect to the Planner 😊)

Note: If you want to check out the value of the various params being passed in, click on the Icon in the screen title. This toggles a gallery that displays the param collection. I found it really useful to have this handy and check values at run time.

Resources

• Download the sample AIM App from here and import it in your environment. Make sure you save, & publish the App and Add to Teams.
• YouTube video link covering overview of the AIM App and publishing details: http://bit.ly/MeetingAppsVideo 
• Team Blog on  Creating customized meetings experiences with apps in Microsoft Teams - Microsoft Tech Community
• Teams apps in meetings: https://aka.ms/create_apps_in_meetings 

 

Disclaimer –  This is a sample app to showcase the meeting extensibility options. This is not a production ready app. 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.