Microsoft 365 Community Microsoft Teams, 5 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Teams meeting apps with Power Apps

Description

In this 10-minute developer-focused demo, April Dunnam shows a new capability for collaborating in a Power App within a Microsoft Teams meeting using Main Stage (Developer Preview) – that allows app content from meeting side panel to take full screen. Requires minor modification to manifest file – create option to add app to side panel. Upload custom app to Teams, create new meeting, add app to meeting sidebar, broadcast app to Main Stage. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 5, 2021.

Demo Presenter: April Dunnam (Microsoft) | @aprildunnam

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

All right so there's some new functionality where we can have our powerapps applications as teams meeting apps that I want to walk through first, I want to kind of briefly set the stage here and what we can do right now today already before all of this, with integrating our power ups and teams. So we have this nifty, add to teams button in our canvas apps, and we can click that that will actually go and open up teams for us and we can easily add a power up canvas app this way into teams as a tab.

A

So you see we kind of have two options for add to a team or even add to a chat. So we can search for the team. We want to add it to find the channel there and that will actually go and just set up the tab. So it's really simple integration out of the box that we have now and of course, in addition to this whole functionality of being able to add it as a tab which we've had for quite a while.

A

Now we also have the ability that we've had for a while as well to be able to take these power apps, that we build and add them as tenant, wide applications in the app catalog here and the app store and teams. So you see a conference schedule app that I have there that I've deployed this way and it shows in the left rail.

A

This is just a powerapps canvas app that I've been able to surface up here in teams, so we've had this type of integrative capability for a while, in addition to dataverse for teams, which is the even more tightly integrated uh power apps within teams with the full ui feel and all that, but what's new is meeting tabs is one way so this has been here for a couple months now, so we've been able to add tabs into our meetings here.

A

In addition to the chat, the details and the files- and we can actually embed in the meeting tab- a power app here, so this is good if you want to do some collaboration and a power app that you built before a meeting.

A

But the thing that I want to show today is what, if we want to do some work in collaboration with an app during a meeting, so that's possible with some functionality called main stage. This allows our app content from a meeting side panel, which we're seeing here actually able to silo in the side panel a power app here, and then we can take that.

A

We can basically present that to the screen kind of like we do a powerpoint presentation now and attendees now can then see that and interact with that application real time in the meeting. This is pretty cool functionality. I want to show a simple use case of how we could get this set up. uh First thing I want to share about this main stage, though, is this- is right now still the in developer preview, so you will need to go into your team's client settings and enable that developer preview.

A

If you want to try this out today for this to show up. So let's take a look first at a power-up that I have so my use case here is this time sheet application. Maybe we have weekly status meetings where we go through and look at everyone's time in group meetings? Wouldn't it be cool if we could just collaborate in that app? So if I look at that time sheet app, I click those three dots again and we do add the teams um we're going to do there in the ads and teams there.

A

Instead of choosing the button that we looked at earlier, where we selected add to teams we're going to go and choose this different option uh here, where it says download app and uh some things, I wanted to point out quickly: you'll notice too, in the advanced settings when we do the added teams, if you are wanting to deploy this into teams, we can put in some additional information just like we can in our normal teams, app like the developer um and their your website terms of use, privacy policy there and even your partner id.

A

So if you're wanting to put this in the app store there, you can associate that with your partner id, so make sure that you fill some of that information in there if you'd like when you're adding this to teams.

A

But we want to choose the option below for download the app instead of add to teams, because this functionality is new and it's not baked into the native add to teams functionality yet. So we need to make a few tweaks here to the manifest file to be able to add this application in as a main stage type application.

A

So I just extracted this we're going to open it up with visual studio code right and I'm going to use my favorite extension here to beautify the json, since it's all on one line, um so I can see it a little bit better now what we want to do here that we just need to make a very small change to this manifest file, which is a big json file. We're going to go here to the configurable tabs section and below we'll see a the scopes and then we'll see context.

A

So you want to make sure in the scope. First of all that we have team and group chat and in the context right now you see that what this means is. Where can we use this power app? Well, we can use it in the meeting details. Tab in the meeting chat, tab, private chat and channel, but if we want to use it um in the other scope there, then we need to we're sorry just a second.

A

My slides went crazy one minutes here, um but if we want to do that, we need to let me just switch over here. Actually, this will be easier because I have this open. um We need to add these two options here we need to add meeting side panel.

A

That's what allows us to load the powerapps application into the side panel there and then once we have that we need to add meeting stage option to the context here once we have that all set, then we're good to go and we're going to be able to actually take this power app and load it into the meeting.

A

So you'll just give this a save and you'll zip your files back up that when all the files are right here, if we take a look at they're, just a manifest file and then images for the color and the outline so we're just going to take those zip those back up into a new package so that we can go and add this into teams now.

A

So in teams, all we need to do is go into our apps tab here in the left, rail and then we can go to upload a custom app. We have a few different options. um Do you upload for my org if you're wanting everyone to be able to utilize this in their meetings and point that to your zip file, that you have click open and that will go install it now? I've already had this installed and it's all ready to go.

A

So if we want to use this now in a meeting, all we have to do is we'll go back here. So that's how I have it added we're going to actually just go, create a new meeting from scratch to start this out with.

A

So I'm going to create a time sheet review meeting, I'm going to add in some attendees I'm going to make david and be part of this meeting, we're going to create it and I'm going to open up the meeting first thing I want to show is that meeting tab experience first before I show the new functionality, so those are the tabs we have across if you wanted to have it as a meeting tab.

A

All I have to do is click the plus button and I can find my weekly timesheet and we can click on that and we can have it in the meeting tab so that we can use that and put in our time, maybe before our meeting. So that is that functionality that's there. We don't have to do anything special to get this functionality working right now.

A

We didn't even have to modify the manifest to get this, but what, if we want to take it a step further, so they're interacting with the app here and be able to use that in the actual meeting itself?

A

Well, what we can do is if we click out of this application, the tab we can go back here and then we can go into the meeting.

A

um So I'm going to join the meeting like I'm just going to join it usually, and I'm going to wait for a few minutes here for for david to get on to just so. We can see what the experience looks like um as me being the host of the meeting and the ones sharing the app and, as david being an attendee of the meeting. So david should join here in a second there. He is so.

A

I want to add this as a meeting panel application, so I'm going to click the three dots and we have that add an app option. You see so again. If you have the dev preview, this will show up, and then I can click on my weekly timesheet application that should show here, since I just added it, and all I have to do, is click save, and this is going to load that into the side panel now you'll see right now.

A

This is a little, um not super intuitive to use, because the side panel here for meetings is optimized, for, I think about 365 pixels wide type applications- and this is a desktop optimized app. So if you had a power app that was optimized for mobile, this would look really nice in the panel. But this is why I want that share to main stage functionality to really be able to use this. So um so, while I can interact with it, it's not very usable. So how do I share it to the main stage?

A

Well, at the top right up, there you'll see that little share trace. So we have the settings there. We can click that and that will broadcast this application as soon as I click it into the main stage, and now we can start interacting with the power app live in our teams meeting. So this is what it looks like for me. Moving around and david's able to see me moving around the application and using it there now.

A

What is it going to look like for david, though so I can see my timesheet, so I can go through the approval process, see what everyone's submitted there. Now, let's switch over to david's profile as he's in the meeting- and I wanted to point this out for a reason, because, if you're wanting to use this functionality, you'll notice, that dave is getting this big, this app isn't opening correctly error. So that's not good right. Why is this?

A

Well if we want to share the power apps that we build this way, we have to make sure that we are sharing those out first with anyone that would be wanted using it in the meeting. So I didn't do that for this application. Yet so the attendees are getting an error. So how do we share this out?

A

Well before we want to slide load this in into our team's meeting, I want to go back into powerapps and click. The share tab for the application that I want to broadcast, I'm going to go at david, and you see when I did that david got that message to log in with his credentials and now he's able to use the app. We see it's him because there's his picture and then there's his name and the welcome.

A

So now he can interact with the app on his own there's no timesheets in there because he doesn't have any, and you can see approvals and all of that. So it's a fully fledged functioning experience here for everyone to be able to collaborate in an application inside of a team's meeting with powerapps. So it's I'm pretty excited about this functionality and it's pretty simple to get set up and start using, and it's really great for those collaborative meeting experiences and being able to use some of the power apps that you have cool man yeah.

A

That's all that that I had to show there, um but I don't know if there's any questions in the chat or anything about this wonderful, that was very cool demo thanks some new functionality there.