Creating Teams Meeting Connected Power Apps

I have earlier blogged about creating a Power (canvas) App you could add to your meetings. This time we are taking a big leap forward by making the application meeting connected and “aware”! This means that your application knows it is inside a meeting that it can be used in that particular meeting context: like adding tasks specific to that meeting or perhaps there is a recruitment going on in which case the interviewer wants to enter notes specific to that candidate to be automatically processed – or gets automatically questions that should be asked from the candidate. All that with just Power Apps without having to be a professional developer and holder of Azure secrets? What about licensing?

Yes – you can do already do this with Power Apps in Dataverse for Teams since it exposes the necessary information right into you to use! This means that you don’t need to buy new licenses either!

Let’s first take a look how this very crude, rought and rugged PoC application of mine looks like and what it can do. And then take a look how you can create one (if you just want that information jump forward) .

Power Platform and Power Apps are great tools for extending Microsoft Teams! And now you can extend Teams meetings with them!

I presented this Meeting connected Power App in a Microsoft Teams Spotlight webinar on 10th of March 2021. You can take a look in action how it works! You are free to check out the rest of the webinar recording as well if you like.

Here are the key steps of the application in written:

We start by creating a meeting and then adding a new application to it

As you can see, this Meeting App (sorry for not inventing a better name) appears in the list of apps that are optimized for meetings. That is because I once I created the app I downloaded it’s manifest out of Dataverse for Teams PowerApp app and edited it as in my earlier blog post before uploading it to the use of everyone in the tenant. Thus enabling it as a meeting app. Let’s continue adding it.

Final steps

Finally we can open the Meeting App tab!

What can be seen here in the pre-meeting screen:

• Meeting Title: not connected to a meeting.
• Dropdown
• An attach button
• List of tasks added in this meeting (now empty)

The first step we want to do in this demo application is to connect this meeting to the right title. It is of course kind of silly why this needs to be done but I explain it later (after the app walkthrough). Let’s use the dropdown to select the meeting title for this one (it looks for meetings in the future where the user is the organizer).

Once the app is connected to a meeting other users will not have the option to change the meeting later (organizer information is stored). This works nicely nice only meeting organizer can add a app to the meeting – thus making that person the first one to connect the app to a meeting.

And we are connected once we hit Attach to selected meeting

The big text “This is a tab screen” is just to highlight that the application already knows it is in a meeting but it is not inside the meeting yet.

Then we open the meeting.

In the meeting we can see the app icon and open the app

And there it is – the app looks different here than on the tab screen! We can also see we can add tasks while in the meeting.

And we have added this “Demo meeting task”. All tasks you have added will be shown in the list below the Add a task button so it is clear that it was added.

The task is added to your ToDo as a task in this demo app.

But what about the app inside the meeting in edit mode?

In there we can see that the task has been added there (yes, it refreshes automatically!). The point here is that everyone in the meeting (who can open this screen) can see who and what tasks were added in the meeting. Purely informational.

And yes – task is in your To Do. Now, let’s take a look at a few key things how this can be achieved.

How to create this connectivity? Teams-object is the key to all!

When a Dataverse for Teams Power App is created, it comes with a Teams-connection. What we get out of that entity?

• ContextEntityId
• IsFullScreen
• IsSidePanel
• Theme
• ThisChannel
• ThisMeeting
• ThisTeam

Out of this list we are going to be using IsSidePanel (=we know if this screen is currently displayed in Teams meeting as a side panel and allows makers to create applications that can adapt to different uses of the app: pre/post meeting tab and during the meeting as a side panel) and ThisMeeting.Id (=unique ID for each meeting this app is attached onto – the way to make this application connected to a single meeting instance).

Application structure

The app is rather simple (it is a demo/poc after all) :

• Teams is connected to the app automatically since it is a Dataverse for Teams Power App (yes: you need to create a Dataverse for Teams app!)
• Splash screen just make sure everything loads in time and decides which screen to show. This one has a couple of seconds wait timer and then preloads information from the database and chooses which screen to display based where the app is opened.
• Tab is the pre-meeting tab inside meeting in view/edit mode.
• MeetingScreen is the side panel shown during the meeting

When we are loading the pre-meeting screen (Tab) we can check out if Teams.ThisMeeting.Id has a value or not. If it has a value then this is connected to a Teams meeting. But here comes the catch: the Id is not in a format you could use it to retrieve the information from a Exchange Calendar. In fact it looks like that it a purely unique ID. This might is still be a work in progress since there hasn’t been any announcement from Microsoft about this feature. I have my fingers crossed that in the future it will be possible to retrieve the meeting automatically.

When figuring out how I would process with this I decided to create a Dataverse for Teams table with information about the meeting Id, Meeting title, organizer email and a few other fields just to the show the idea.

I added some logic that will hide the controls if the current user (User().email) is not the same as the meeting organizer stored in the Dataverse for Teams table – unless meeting connection is undefines. This adds to the making the app more meeting aware – allowing different views to organizers than participants already! I also used this logic with the meeting app to add some information about user’s role in the meeting.

And a another meeting where user is not the organizer

So in this phase we know if our app is currently running inside a meeting context. What about when we are running it inside the actual meeting? The Teams.IsSidePanel is the key to the solution here! In the Splash screen the opened screen is determined with IsSidePanel:

If (Teams.IsSidePanel, Navigate (MeetingScreen,ScreenTransition.None), Navigate (Tab));

And the same logic is also used in Tab and MeetingScreen to determine what should be shown to the user.

Yes – it is that simple. In the Power App Studio it showns that it is not inside meeting since .. it is not! If you have wondered what Power Fx means by evaluating the code/formula all the time: this is one clear example how it works.

For the rest I used quite ordinary Power Apps capabilities:

Using Outlook Tasks connector to add the task to the user’s To Do and also to Meeting Tasks table so tasks can be shown in the meeting details app screen as well. Office365Outlook-connector is used to retrieve calendar meetings and placed in the dropdown where the user selects to which one to attach the Teams meeting.

Yes – it is not at all that complicated to get this done! More time goes to UI and logic than to know whether the app is running inside a meeting or now.

Did you know that these meeting apps can be added to meetings via App Store?

This is a quite a nice way to add these apps to exiting meetings – you don’t have to navigate to calendar, open the meeting to edit mode and then using +.. Instead you can do it this way if you just want to app there and won’t be doing any editing.

Distributing the application to others

Of course you want to give others permissions to use your application by Sharing it! You or your team can develop the app in one team and then make it available for others using Share with colleagues.

Teams Meeting connected Power Apps

To really take advantage of meeting connected and aware apps there needs to be more logic into it. In case you close your PowerApp and reopen it while in a meeting tab or in a meeting to a side panel you will notice soon that the app “resets” every time: build on logic there so the user doesn’t have to start over from the screen one.

Dataverse for Teams tables are a good place to get started with that: log in user state and show screens and data accordingly. You might want to add more configuring functionality to the pre/post-meeting tabs/screens: connection to a backend or HR systems. Perhaps you want to see interview candidates information right inside your Teams meeting? Connected to a project? Azure Dev Ops Board? Yes – there are lots of use cases here!

As for example I added the capability to connect this meeting to a specific team. All added tasks will be then written to the team also – keeping people up to date what is happening. This one is done by calling a Cloud Flow directly from inside Power Apps – but you can also create a trigger to the Dataverse for Teams table and launch other Cloud Flow from there (yes, did it too as a extended demo). All this opens possibilities to interact and integrate with numerous systems: in and out of Microsoft 365 cloud.

That is of course for just pure demo purposes – but it starts to give out the idea how widely you can use these applications! Power Platform connectors are numerous and you can create your custom ones as well!

The key bits of knowledge from this blog post are simple: Teams.ThisMeeting.Id and Teams.IsSidePanel that will get your started.

Power Platform and Power Apps are great tools for extending Microsoft Teams!

Take advantage of Teams as a Platform by empowering your business citizen devs with these superpowers!

Before this extending Teams meetings became possible with Power Apps it was necessary to use developers make ideas a reality. Now citizen devs / power users can create applications to Microsoft Teams meetings and of course also to Teams!

Have you thought about this yet: Microsoft Mesh will be connected to the cloud via Microsoft Graph. This opens even more possibilities: how about connecting your Microsoft Teams meeting to Mixed Reality using Power Platform?

That will combine three platforms together: Microsoft teams, Power platform and Microsoft mesh – the platform for mixed reality