Microsoft 365 Community Community Demos, 27 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Access Microsoft Teams meeting details in a meeting app

Description

In this 10-minute developer-focused demo, Markus Möller delivers a tab that displays details about the meeting and current participant. Retrieval of the details is accomplished using an Azure Bot and Bot Framework SDK. In this demo, create a meeting and add the static tab application to meeting. Behind scenes, requires a Teams channel enabled Azure bot, a meeting with at least one participant and a Teams bot/tab app with a specific Teams manifest. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on October 27, 2022.

Demo Presenter
• Markus Möller (Avanade) | @Moeller2_0

Supporting materials
• Article - Teams Meeting Details with Bot Framework SDK | https://mmsharepoint.wordpress.com/2022/08/04/teams-meeting-details-with-bot-framework-sdk/
• Sample - Tab Meeting Details - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/tab-meeting-details
• Documentation - Meeting apps APIs | https://learn.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/meeting-apps-apis
• Article - Get full meeting details in a Teams meetings app, without Bot SDK - Yannick Reekmans | https://blog.yannickreekmans.be/get-full-meeting-details-in-a-teams-meetings-app-without-using-bot-sdk/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

Meeting app once again, but this time more about the background API, to show us something about meeting details, not only meeting details but also participant details, short intro about me.

B

Once again, my name is Marcus Miller I'm, a Microsoft 365 developer expert working for abernath in Germany since last year, I'm also on Microsoft MVP for M365 development, and, if you want to reach out to me, then you can use Twitter or can comment on one of my blog posts, but as I always like, let's directly jump into demo time, what we first need always when we want to show something about meeting apps, we first need a meeting.

B

What we always need is a participant, otherwise it doesn't work, you send it out and then we can edit it and install our application.

B

We do not really have to configure something here. This is our the Box stop and what happens. Ci now looks pretty pretty easy: yeah simply static, tap application and showing some details yeah in an Ideal World. We could now be done with everything and I could let you go, but the problem is. This is not an ideal.

B

What yeah, because uh something happens under the hood I, will explain that in a minute, but in short, this is no simple, like you know, from spfx applications, a simple API call to the back end and showing some details. What you need in fact to do. This is not only a tab application, but also a bot, because the API that's used here is included in the bot framework. Sdk, API and I can show this in an additional demo, which is doing exactly the same here. I decided to use some test modules.

B

So let's open a simple task: module here and now, once we click on submit, we get exactly the back the same data, but now we have a round trip a clear round trip to the bot and back the same, we can do also for the participant that you also get in in a an idea. What's behind the partition?

B

Pin here so, for instance, it's quite addressing for the participant- we get, for instance, a meeting role here or if the user is already present in the meeting- and it's not obviously that's not the case, because the meeting did not even start and and so on and so forth. And here we have uh got the same round trip uh with the bot. But I will skip this, but what I can show you, for instance, is the same view with another user.

B

Because we have some time, that's not that you know, let's clap this and open it grab the meeting details, and here especially the participant, because here the participant is different: I'm, always using the current user as a participant. The thing is: the API always requests and user ID. There's no API in the background to get all the participants from that web.

B

Okay, but uh nevertheless this was really small uh by cool demo, um but yeah. The detail, I think, is uh the problem here and let's uh quickly explain how to achieve that and said. We have some prerequisites but yeah, it's quite simple: we do not need any developer preview or something like that anymore. So, a simple meeting uh same per participant meeting and simple specific teams at manifest the teams app manifest. uh The key points are here: we need a scope. That's group chat.

B

Yes, we have a group chat as part of the meeting and the context here. What I was showing was the pre-meeting experience. uh So mainly, we are here talking about meeting chat, Tab and meeting details, tab, which is not exactly but quite the same at the moment, um on top at the very bottom. We can see that we need also a bot uh with uh the scope group chat as well and last, not least depending on the type of meeting on the right side.

B

We need some resource specific permissions for the bot, so what I was showing here was a simple online meeting. Therefore, we need uh yeah read basic chat permissions. If you are working with Channel permissions, you need with Channel meetings. You need the same for channel meeting permissions now coming back to the second part of the demo, so the task module flow which I was showing yeah.

B

um So not the initial part. The initial part I will explain on the next slide. So once the user presses on the first button, we will start the task module here, yeah and uh to be precise, I'm already working with teams, Js 2.0 version, but the start Task is not yet supported, uh it's not yet to transform to open dialog or those who already are familiar with that, especially when you work with adaptive cards what I'm doing here so once the user presses the button, he gets this initial task module to initialize notebook conversation.

B

Second, button click then we'll reach the bot in a handle team's task module submit and what I'm doing here is the bot framework SDK method, where I get meeting info. In that case, for a specific meeting ID and the joint context of the bot operation, and this returns my whole data, which I'm transforming to an update this card and sending this back to the user yeah. This is how the task module flow works.

B

What's interesting is here uh the switch, maybe um that I'm using above because I have the same uh task: module submit to use for getting either the participant or getting the meeting details, and in this case, in the sample here or in this screenshot here you see how to get the meeting details below. You would also find, in my sample code, how to get the participant details, but that's not all and how did I achieve it.

B

On the very first page, there I was using not the the SDK really but the SDK rest API, and this works the following in the bot Constructor or below the bot Constructor I'm, establishing an event talk on conversation update, and this conversation update, for instance, is fired once the bot and the whole app gets installed into a meeting.

B

What you can see here on the right side, when Marcus Miller added the bot tab meeting details to the chat and, in that point of time, I'm retrieving a so-called service URL from the bot, and this normally looks currently like uh that one showing here smba trafficmanager.net apis I'm, always retrieving that I, to be honest, I have no idea how stable this is if I could also hard code, it yeah, but uh in another Microsoft sample, which was not really good, documented I found it exactly that way here. So we plan retrieving its here.

B

Then I'm, persisting this and after I have persisted this service. Url I do not need a bot interaction anymore. I can simply call the service URL, as you can see, on the bottom right with an API call and the only thing what I need here are some Microsoft ad credentials. This is a bit cut off here, but what I'm using here is simply the application ID and the application secret from my bot.

B

This is how the initial page, the static tab, page, gets loaded. Now you might think yeah it looks a bit complicated. Do I always need a bot to just get some simple, immediate details. The official way is exactly like that, but there is an alternative. I, wouldn't only quickly uh show you and bullet points yeah, um but you always get directly from the context when you have any kind of meeting ID as a meet and meeting app is a meeting ID.

B

This meeting ID is not really the ID of the meeting, but this is an encoded ID of the meeting chat.

B

When we make a graph request against this chat, we get some further information about it: yeah, for instance, the join web or URL of the meeting, and with that web URL we can also filter some online meeting details and so on and so forth. Yeah. This was not my idea. The credits go to Young great months. He has a great blog post about that, how this works together and how you can decode it and so on, um and this leads me to my officially last slide for today.

B

The resources, as you always know, I've written a blog post about my sample I've contributed that sample to the PNP Library. There's some official Microsoft documentation on this meeting, apps API and last, not least, it's also really interesting, blog post. How and how we figured that out by Yanni Greek months about how to circumvent the usage of the bot SDK.

B

That's for my site.

A

Really cool stuff, I love the Choose Your Own Adventure option that you gave at the end too right like you, uh you can. You can get with this, so you can get with that. You got two options, so very, very cool. Thank you.