Microsoft 365 Community Adaptive Cards, 21 Jan 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Teams Meetings Apps: Emoji feedback with bot and Adaptive Card universal action model

Description

In this 11-minute developer focused demo, Markus Möller enables meeting participants to provide feedback at the end of the meeting using a simple emoji. Action is triggered by end of meeting event in Activity Handler. The bot sends an adaptive card to the meeting’s chat with 5 emoji buttons requesting feedback. Once voted, voters see current sentiment of all voters. Uses adaptive card universal action model (UAM). This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on December 23, 2021.

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

Supporting materials:
• Article – Meeting feedback with Microsoft Teams Meeting App | https://mmsharepoint.wordpress.com/2021/10/09/meeting-feedback-with-microsoft-teams-meeting-app/
• Sample – bot meeting lifecycle feedback - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/bot-meeting-lifecycle-feedback
• Documentation - Prerequisites for apps in Teams meetings | https://docs.microsoft.com/microsoftteams/platform/apps-in-teams-meetings/create-apps-for-teams-meetings?tabs=dotnet#real-time-teams-meeting-events

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

Today I want to talk about uh microsoft teams, feeding apps. Once again, I will show you a short demo how to handle with the meeting lifecycle and just requesting some emoji feedback at the end of a meeting together with an adaptive card and the universal action model. Quick introduction about me. My name is marcus muller, I'm a microsoft, 365 developer expert since this month, I'm also a microsoft mvp and I'm based in germany and worked there for abernard.

A

You can find me on twitter, as well as where my blog posts yeah we're in my blog, let's directly jump in to the demo, so you wanna request some feedback when the meeting ends and therefore we first have to create a meeting.

A

So, let's quickly add a meeting.

A

What we always need for teams meeting ups- uh you might know from my last sample- I demonstrated here uh two months back or so we always need a participant. This is always important and in this case it's more important because we also want to see later how feedback gets aggregated. So, let's invite one of my buddies here and then let's save and send the meeting.

A

The next thing we have to do now is we have to install the app to this special or specific meeting. Therefore, we go into the meeting. We add a tab here.

A

um Teams already suggest us some uh meeting apps, which are optimized for meetings, but these are some samples that work with uh the so-called in meeting experience. uh Teams does not detect a bot with dedicated for this, and so I have to go the long way over more apps built for my org and there we have our meeting feedback board.

A

We now have to add it to a meeting. This is our pmp demo meeting. So we are good to go.

A

What we already see here is that we added the bot to the chat so he's able to post there. We will let us see how we achieve that, because this is really important that this works. um Otherwise we cannot do what we want to do now. We have to join the meeting.

A

I turn off my microphone, but I don't want to talk anymore, not in that meeting now, of course, we can wait for others to join, but we can also simply exit the meeting and, as we are the only one, the meeting will officially end after we left.

A

This is what we see. We have an attendance report and there is our meeting feedback. This is an adaptive card sent by the bot and there we can simply click on the feedback which we want. How did we like it? There? We have it conservative.

A

We are not really sure about this two seconds meeting and then we have now we have voted so we can only vote once this is achieved with the adaptive card universal action model that I cannot vote once again, but what we still have is we still have that. Guy here um this is our our buddy klaus klausen, who is also invited to the meeting. He can also go to the meeting or can also see it now in the chat there.

A

He still has the other adaptive card, the the initial one where he can give his meeting. Maybe he was totally embarrassed about this meeting and he gives a different feedback and there we now have our thumbed up feedback yeah. So we are see we already have.

A

One was not really uh yeah really happy about this, and this was the feedback of klaus, and this is the sum up: okay, nothing more to demo yeah, but maybe only one thing which I will also show you later in the slides again is um this refresh of the card is also in an action that is done automatically, but you can also enforce this um yeah. We have only the german version card actually, and I think I have to switch my browser.

A

Then I can also show you in uh here's the one in english um there we have the refresh card. This is what we have to care for yeah, because we need really need to care for if this button is pressed that uh it not uh that we have voted or not here and this we will check in the code later.

A

But I think that's all what I wanted to show simple solution, but I think um was to maybe implement in even production scenarios.

A

So, let's flip back to the slides and explain how this was achieved.

A

First, what we need we need, a team's channel enabled azure bot. We need, as we have seen a meeting with at least one participant in there. Then we need permissions to access the chat, so the bot is able to post discount.

A

um This is still in preview of this stuff, so we need to have the client developer, preview enabled and uh yeah as a sum up the teams, but what application also needs to be implemented, of course, and then we have specific, uh manifest stuff which uh represents the above prerequisites. Also, how does this look like?

A

This is an extract of the manifest and what we have is what's really important here. We need the group's chat scope and we also need here the application permissions online meeting read basic chat. This is your submission. We have no app registration in the back also. This is sufficient to enable the team spot to write to the chat, but if we omit that we cannot and then the app doesn't work, so we have seen that uh that I added the meeting feedback to the chat once I installed the app.

A

So how does the bot work? We have the on event uh activity here, which is fired uh when an event takes place, so the the sample code is partially taken from a microsoft sample where they uh that they find the same code in a different in a more generic uh in a more generic hook. um So officially, this is not really necessary. Yeah. This question in this sentence, but what's of course necessary, is to check if the activity name is either meeting start.

A

In that case, we want to do nothing or if it's, the activity name is meeting end, and in that case we are simply posting our initial adaptive card to the chat, nothing else it was the beginning of the demo.

A

Next is how does the card look like? I had to shorten it up a bit, but I think I can explain um the first thing. What we see is the so-called refresh action yeah, and here two things are really important. The first thing is, we need to have a verb to really detect uh if this action or another one was fired, and we also what we need to store here inside is.

A

We need to store all the user ids of the voted persons so that the team's uh chat when rendering the card already detects, hey the user in front of the screen. Did he already worked so do I have to refresh the card or not yeah and then the rest is.

A

uh I only have one action here and this is that one, and this is only that one I and originally I have five if I would scroll down- and they are only simply rendering my uh my emoji pictures and they have a dedicated word again so world one, two, three and so on, and the feedback object, which I saw in the background, also to know hey in which meeting am I and and so on and so forth? What I need for that we've seen this.

A

It was the initial card how it was loaded, um the first time the bot ascended to the chat.

A

Once we click on uh one of the uh icons we come back to the to the bot and there we are in the in on invoke- and here quite simple switch yeah. So we are checking first about the world. So already voted was the refresh action. We do not have it here.

A

We have the invoke action and then we have the other. um They have the other five boats and depending if it was voted, one, two, three or and so on. Then we simply increase the votes and put it to our feedback object which we store in the back of the adaptive card. So we can render the number of votes later on.

A

This is all what we do and then we simply send the updated card back to the chat, and then uh the user who did not watch will still still see the initial one and the users who did vote will see the results.

A

The free flash card is handled slightly slightly different, only yeah here we are. We now see what uh what happens when we have the verb already voted yeah, so we request the feedback and then we have to check if the user who fired this action really already voted or not. Now this is a double check here we can detect if the user has an automatic uh refresh or did he maybe call this refresh card action?

A

I just showed you here and to circumvent or to avoid that he cannot vote, although he didn't do I'm doing that, and if everything is fine then I will simply send I called it disabled card and the disabled card is the version where I already see the results, and this is what the return back and to see once again what I'm talking about. Here's, the disabled card, the results and that one was the action about how to refresh your card what you can do manually, yeah simple, that was for my site, as you always know.

A

At the very end, I'm posting my resources, so I have one blog post on that topic. I have a pnp sample delivered for that and there's also some microsoft documentation on teams, meeting events and that's it for my site. Thank you back to you, david.

B

Awesome, thank you mark very, very cool implementation of this very useful, practical. Well done. uh Thank you for sharing that and sharing your blog post as well, very valuable.