Microsoft 365 Community Microsoft Teams, 18 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on building Microsoft Teams meeting apps

Description

In this 14-minute developer-focused demo, Rick van Rousselt steps through meeting extensions (apps) organized in 3 categories - pre-meeting (tab), in-meeting (side panel tab, pop-up, extension, and bot) and post-meeting (tab). Needed manifest updates are called out. Microsoft Forms is a great meeting extension. Rick creates a meeting, add the Forms app to it and helps viewer observe how Forms does configuration. Meeting extensions are built on top of tabs, bots and messaging extensions. This PnP Community demo is taken from the Microsoft Teams community call – May 2021, recorded on May 18, 2021.

Demo Presenter - Rick van Rousselt (Advantive) | @RickVanRousselt

Supporting materials:
• Blog - Rick's blog | https://www.rickvanrousselt.com

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

What are meeting extensions but before we dive into that, let's take a little bit of a look at the prerequisites because it doesn't work everywhere.

A

um First of all you have to, I will show you in a little bit invite people in the meeting first, otherwise, there's no way to add a meeting extension or an app to a meeting. Actually it cannot be a channel meeting, and the mobile client doesn't support everything. Yet it's on its way, but it doesn't support everything. Yet. No, um since this is the community call, I wanted to give a little tip how I usually do it or how how it's easy to do stuff. I usually just take a look at yeah.

A

What does what did microsoft do so? What's one of the first party apps that way, we can really see okay. What can we build and how does it work and can we replicate that? For our example? I have, for instance, this one forms works perfectly as a meeting extension, I just took that one to see: okay what's possible because yeah, you can go to a lot of documentation and then it's it's. I, in my view, it's easier: if you just look at it and see what it does so um you can have.

A

Let me click here. We can have a quick walk too, so you can have a pre-meeting, an in-meeting and a post meeting so as a tab or in the meeting as an extension yeah. This is documentation, I know, but I don't know about you guys, but yeah this this. For me, this doesn't do anything because I need to visualize stuff. So what I usually just do is just yeah just open up a meeting.

A

So let's go to my calendar and as you like, I said, let's just open up this hour, so this is my community call and, as you can see, I there's no possible way. I can add a meeting extension or an app to this meeting. So if I save this, remember this one also not that perfect, still no possibility to add somebody. So I will add my favorite person in the world which is adele vance and then the moment I send this meeting.

A

I have the possibility to edit again so it's a little bit cumbersome, but yeah still didn't. I don't know about you guys, but you know I sometimes have to create a meeting six times before it's perfect, so this one more time will make a difference. And now I have this perfect opportunity to add more apps.

A

As you can see here, the meeting notes and the whiteboard already was popping up so here I can either add my own app or I can add an existing one from microsoft, which is the forms one looks way better than my own app I'll open it up a little bit as you can see here. We can just add the forms app and we can start adding questions. So if it runs there, we go loading yeah.

A

um This is, for instance, a really cool thing that you can see a meeting extension app is just a configurable tab, meaning you need some kind of configuration page well in this case. Forms didn't need a configuration page, so they solved it like this just a little bit of a help with a learn more and a small giphy. That makes a that shows you what it does so already. I learned something I can see. Oh, I don't need a configuration page.

A

Okay, then just add something like this to your app to your custom meeting extension app. So I save this, and here I can just ask questions so create a new poll and this will show up in my meeting of course. So uh what do you think about?

A

The community call see if I can type really fast, so cool or awesome, something like that not much of a choice, but there we go and then, as we already saw like I said in the slides, this is your pre-meeting opportunity to have to change something in the pre-meeting so before the meeting started. So I can also do this. With my own app, I created a simple community, a company app which just shows me some news from one of our locations. So it's nothing fancy nothing special.

A

As you can see here, my office location, this time is in europe. So, as you can see here, I really have a configuration page, so we need to configure something before we get started the moment I click submit. I tell teams, as you can see here, I get my news location, get all the news and I tell teams hey activate the same button same as a configurable tab, so it's nothing new in the meeting extension just a few gotchas and things you need to know so. Here's my own personal app that I built.

A

Let's save this and let's join our meeting so now I'm going to be in two meetings. So, let's see, if teams like that, let me just make sure that we don't have an echoing sound and see my microphone is already not working now in the teams meeting. Of course we get, because this is the browser we get a little less functionality. Normally you get like this cool bar here as well, but still we have our meeting extension, so our extension is here.

A

So this is our form which is popping up, so we can add more questions or we can have uh this one I build so you can also have a messaging extensions like this or I don't know, search for teams. You can add stuff to the meeting cool thing about this is. Is you can give information that people need in the meeting directly to the meeting?

A

So if you connect this to whatever backend system, you have it's perfect, because people are searching for stuff during the meeting they open up browsers, they leave the meeting because they're doing something else in another system. This way you can easily add this to a meeting, and I need to upgrade my app of course.

A

um We can also just uh use it as a bot, of course, just like this. So if you say my company app, I can just add it now, because it's a bolt, oh it just added as a user, I can even say: okay just ping, everybody and it will ping everybody in in the meeting. As you can see here, let's do a teams channel data, so this is especially added for meetings.

A

So, as you can see here, alert in meeting which will alert and everybody inside of the meeting and this school will also be publicly shared, of course, makes it a little bit easier and then everybody will get the team's community. Send you a message now, because I'm already sharing my skin. You won't see this, but normally you get like this pop-up as well, that you especially are notified, and you know what's going on so we can even add uh what else can we do?

A

We have a form of course, but we can add: let's, let's order some lunch, so we also have a pop-up like I already discussed here. So we have the in meeting experience, which is a tab. So a side panel, a pop-up, an extension and a box will already show the bottom extension. So we can even add a pop-up.

A

Be careful of this, of course, with this, of course, because yeah, if somebody, if you're in a meeting and you're going to start doing, pop-ups yeah, you don't want to, you- know- interfere in people's meeting not too hard. If it's really something that's triggering for the meeting, I don't know a vote for uh what you thought of this sprint or something like that. Then it's okay, it's you can do it, but yeah, don't start popping up every time every two seconds, a new screen, because people will get um very distracted during the meeting.

A

So I am, this is my lunch. So what do I want for lunch? I don't know my name. My name is week. Of course we can also get that from the box, but this was easier and let's have a date. There we go. We can just even just have pop-ups and you can have an entire flow added in here.

A

So this is really really cool and then, of course, after the meeting. So if I close this meeting up, we of course, if I go back to my calendar, we can go back here and we have our polls and our news, of course, or it's already um back in the meeting where it was before. So let's do this now, like I said it doesn't work with the channel meeting. So the moment you, let's me, add a channel something in general.

A

You have a lot of general channels so channel meeting and then, let's add fans, then this is not going to work. So remember that it's not for channel meetings. So once you start building with teams meeting extensions, you should remember it's not for channel meeting and once it wants to load. Let me go back to my calendar. Yeah there we go see still no opportunity to add something to this meeting. So remember that one that's very important and then let's continue so there we go.

A

How do we build this ourselves? Well, if you have ever built something on teams, you know how to do this. It's nothing really new! It's meeting extensions built is built on top of known technology, so it's tabs bots messaging extensions. So, as you can see here, this is my uh messaging extension. We have our tabs, we have our bot, so it's it's all known technology that we already see the only thing that changes actually is the manifest. So we have a lot of new stuff in the manifest we have a channel tabs private chat.

A

Tabs meeting chat tab, so this will configure your app to be shown, of course in which location. So if we go to um there's also a really cool new thing here. So if we go to our manifest now, this manifest is version dev preview still. So um that's because I didn't update it, yet it's normally ga.

A

But, um as you can see here, we have a context.

A

So we already had a personal tab and a channel tab, but we now have also meeting details and meeting site panels and meeting stages and we also have meeting services which is coming along, so you can also have a site panel or stage, and something is also new here, which I also noticed was steam's meeting devices, which is one of the cool new devices that I'm begging my boss to buy for me, but yeah, that's a different, totally different story: let's not go into that one.

A

So that was a really super fast overview of the meeting extensions. I'm gonna share this code publicly I'll put it on my github or somewhere.

A

So I want to thank you guys- and this is my github, so just search for greek and result I'll put it there and- and that was my name and I hope uh we'll see you next time on the community call.

B

Cool that was really cool. That was really really good. Don't stop sharing it. No.

A

B

Okay, so so a few, a few pointers and, of course, thanks for calling out also the limitations which exist right now. Some of the things will be addressed, of course, and there will be new capabilities announced potentially even next week on some of their stuff. So but it's really good to have a coverage where we show off also what's currently supported and what work and what doesn't work, because that helps then the developers to understand what's possible so really really cool.

B

Now, if you go back in in the the polls or news in here, just a recap and re-evaluate or re-elaborate what you showed- and this is basically just a themes- tab which has been then configured to be a meeting application right. Yes,.

B

Cool and then the launch button here, what does that do actually so can you explain how that works.

A

Now this is uh live so now it's as you can see here. Now I get this cool. I don't know this community call so normally, uh oh yeah, that was the meeting. I got a configuration that it was live so uh now this will now. I can just say: okay, this was a cool community call or an awesome community. Let's take awesome, let's submit it and we can view the results, and I can also do this for my meeting of course. So if I join the meeting, let's join this meeting, but I already answered it.

A

So I'm not sure if I can answer it one more time hi here it is yeah exactly now it's live now you can see it so yeah. You can preset your um forms, um yeah your the questions. You want to ask people, you can already prepare that and then, once you want to go live you can just hit the button and then you're good to go and ask those questions. We use it a lot doing: uh split, plannings and stuff like that yeah yeah. It's.

B

Really cool to be clear: what what we're also seeing here is that it's an adaptive card with the bot behind of the scenes is basically throwing automatically to the meeting for the meeting attendees um and then what's really cool is that the adaptive card can be updated in place. So um it's it's! Basically, if you haven't responded on the question, um we can see the updated cool awesome 100 below that uh is that oh, no! Well, you can do that.

B

I don't know if the full microsoft forms is actually doing that, but I know that it's possible to update the existing instance of the adapter card. Now elise arsenault is asking: can you get results posted in the meeting tab? Also the results posted in a meeting there. So if you go to the pre-meeting experience back in there, we can.

A

B

Yeah, so it's just a matter of again: how do we root the data? So it's a question: how do we implement that? uh Where do we restore the responses of these questions and then, after the meeting you can have the post meeting summary like in this case, with microsoft, forms now of collecting the information? What was collected during the meeting and that's really the post-meeting experience so um technically, pre and post meeting are kind of the same experience so.

A

Yeah, but you could make it different yeah and the.

B

Cool thing about this is.

A

Yeah just look at it see how microsoft does it and rebuild? I rebuild build something yourself and get that there.

B

Yeah, the microphones one is certainly the most uh advanced scenario and, and it works really really well, it's also the most common scenario, probably for meeting applications so that you're able to ask questions from the attendees using also the pop-up mechanism. That was by the way, a cute call out as well. Let's, let's only use the pop-ups when it's actually really needed, because um pop-ups basically means that it takes it's it's pauses to meeting and then people need to actually answer the question, so it's it might be really annoying.

B

If there's a lot of a lot of pop-ups during the meeting.

A

Yeah we had the one question they wanted to uh because of covet people yeah. They have online meetings. But if you have an online meeting with somebody who needs to get paid, it's very difficult, so they wanted to have a pop-up. That specifically said you have to pay first and then the meeting will proceed so.

B

That's a cool scenario, yes, absolutely absolutely and related by the way. Also on the scenarios, please have a look on the m365 extensibility lookbook uh scenarios, section, there's actually really cool business-to-consumer scenarios explained how the banks and financial institutes as an example could be using the meeting applications to collect the information and have a discussion uh with to attend this. So really really cool ideas comes out of those pictures.