Microsoft 365 Community Adaptive Cards, 4 Nov 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Feedback bot using the new Adaptive Card capabilities

Description

In this 12-minute developer-focused demo, Rabia Williams introduces viewers to a bot that operates across Microsoft Teams and Outlook thanks to Universal actions. She showcases 3 Adaptive Card features - Sequential workflow (concurrently awaits/tracks action from initiator and each participant), Up-to-date cards (real-time refresh across all users’ cards) and Contextual views (Reader’s view changes based on role). Sample created with node JS/Type script and Yeoman Generator for Bot v4. Step through well commented code. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 14, 2021.

Demo Presenter: Rabia Williams (Microsoft) | @williamsrabia

Supporting materials:
• Article - Universal Actions for Adaptive Cards in a NodeJs project | https://rabiawilliams.com/teams/uam-bot/
• Sample - Card Bot - Bot showcasing the Adaptive Card Universal Action Model in Node/TypeScript | https://github.com/pnp/teams-dev-samples/tree/main/samples/bot-uam-cardbot
• Documentation - Universal Actions for Adaptive Cards | https://docs.microsoft.com/microsoftteams/platform/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/overview?WT.mc_id=m365-42737-rwilliams&tabs=mobile
• Documentation - Bots and SDKs | https://docs.microsoft.com/microsoftteams/platform/bots/bot-features#bots-with-the-microsoft-bot-framework?WT.mc_id=m365-42737-rwilliams&tabs=mobile
• Samples - BotBuilder-Samples | https://github.com/Microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs
• Demo - TCS’ Incident Management Teams app integrates Universal Actions for Adaptive Cards | https://www.youtube.com/watch?v=FaBGvnAzAS4

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

I've got this um sample that I did, um I think, made of this year after build, so we announced universal actions for adaptive cards which had a lot of cool features in it. So we already have a pnp video on universal action. What the capabilities are what we can achieve uh with these new features, so I'm not going to go in and open up the powerpoint, because I know you've.

A

Probably there is a video there and I will also link that in a deck that I've shared with david, um so we have like around four features we discussed um during the time for build. uh We f4 this adaptive cards like from one point: uh four upwards. You have features like um contextual views, so you can have adaptive cards uh that would show up different views for different people with this was a game changer.

A

When I announced it, um it was one of the coolest thing that I could think of, because you know previously adaptive cards uh would just show up. You know the same view for every single person that would be. um You know you could change the messaging. You can update it stuff, but everything is just like in that same conversation, you would see the changes happening.

A

All the users having the same view so context, contextual view was one thing that I was excited about um and another feature was sequential workflow and that what that means is every user would get to take part in a in a workflow process at their own suite time like they didn't.

A

uh If one person went ahead in that conversation and updated or did some action on the adaptive card, it wouldn't change it for other users who haven't started the world floor yet, and that was another big improvement in that area as well, um and then the other one was introducing the refresh capability for the adaptive cards. So you could go ahead and update um the card, and you know you could see the status updated and stuff like that.

A

So these are the three things I'm going to be demonstrating in the sample that uh is currently in the pnp gallery as well. For teams, it's called a feedback bot, I'm not sure if it's actually a feedback, because I created it as uh for a demonstration purpose, um because there were some, I think, right after build, we had some samples from the community as well. I remember um nandeep had a sample on incident management and there was one from waterdemon um on another approval process and they were in c-sharp.

A

So I took that opportunity to create something in the node.js javascript typescript space as well for folks who are into that framework, so um have this bot, so I'm just gonna share my screen and jump right into the demo, so I already have the project up and running and I'll go to the source code. Once I've got this working and once I've showed you the demo, but I have like two users: uh three users actually logged in and side by side. What I'm going to do is I'm going to invoke this uh this feedback part.

A

So what I'm doing here is I'm gonna. Ask some questions to my colleagues or my you know teammates here in a channel called pmpdemo, um and then I want to see their responses. So, most of the time uh what happens is we ask a question? It might be something really important like you know. What are you watching these days?

A

What series are you watching and stuff like that, and then you know that there might be people who replied to it, but then you lose the conversation because there's something else coming in between and then you don't know what the others said about this. It's somewhat like a conversation, you know just keeping everything in one place, so I'm just gonna go ahead and invoke my bot, so it's called cardbots.

A

I'm gonna ask a question: how is the new series I'm just gonna, some random questions, new serious squid game, because that's what I'm watching these days squid? What was it called squid game? I think it is.

A

Only I can spell things okay, so I'm gonna ask this question as a person, so this is my initiator um who is initiating this bot and it will throw me a base card, so this is what's happening under the hood as well. It will throw a card to everyone. I hope it's working, uh yep cool, so you can see for a tiny moment there. You can see that everybody in that in that whole team in that whole channel, can see uh the base card being sent out, but immediately for the initiator.

A

It changes it updates. This is the contextual view that I was talking to you about, like based on what your role is in that particular uh workflow. um You will see uh the cards so uh in my case uh here uh he do admin. He or she is the initiator so immediately the base card updated and it showed me like a summary of you know if my teammates responded or not in the meantime, I'm logged in as a deal here who gets a card where um she could respond.

A

So I'm just going to go ahead and respond to that and she she wasn't a big fan. She said it's overrated um cool, so she has sent her response now. On this particular question, you can see that the message updates itself at the same time it refreshes for every uh person involved here. So you can see here the uh the information is already captured um and she got a card that says.

A

Thank you for your response, so you don't need to do any more uh response on that um and you have the admin I mean uh she or he can see that a deal responded to it with a reply. um It's it's a super simple uh demo, like I said it wants. I wanted to demonstrate the capabilities of adaptive card, but you can think of other scenarios where this could be uh used as well. So we have seen now contextual views feature and we also see the refresh capability of adaptive cards.

A

One thing we didn't see is a sequential workflow right, so we have um normally before previously. What happened was when you have an adaptive card you make some. uh You know you go ahead and approve, or things like that, that card changes for everyone in that conversation.

A

um But if I'm logged in as another person who did not respond um in our case, um it is now alex. I'm logged in as alex alex can see this card again because he hasn't started his uh process. Yet so he can see the question and um he can reply then and there. So this is the uh feature that they're talking about the sequential workflow, so alex can go ahead and reply saying it.

A

It is great: okay, um there's someone who actually likes it um and respond back immediately. What happens? Is um it updates the card for every single person in that channel and shows you know um the summary uh for the admin or the initiator? Whoever initiated this bot- and you know nothing- changes for um a deal because she she responded, so that's fine and for alex um it should be again similar to um a deal.

A

So this is basically the demo demo part of it uh how it all works together and how you can all get all these features now with just few uh changes, because they, the game changer, was that they introduced some uh refreshed properties uh and also the response sending the adaptive card response back into the bot. So that was the game changer for all this to work together. Apart from this, they also had the feature of uh it. You know being universal.

A

That was the whole concept right, so you have universal actions, means it works in teams and it works um in outlook as well, because the backend is now the same bot uh registered. So uh you just have to open up the channel to outlook. I unfortunately cannot demonstrate that in in this sample, because it's the code's not there, but so I will jump and jump into the code aspect.

A

You know the sample and open up and show you how I built this, so I'm not going to go into detail, but I'll show you what really helped me, because I have all this documented in my blog, so let's jump into the vs code. So this is basically my project and it is probably um I started off at a very good uh base project and thanks to bob german who is my colleague and friend, who suggested uh the yeoman generator for bot builder.

A

It was a game changer for me, because I was looking for something really simple to start with, and I wanted a structure or a project that does not have a lot of things going on, because obviously I wanted to learn these concepts first, so I used the generator for that and it was perfect. I used an ecobot template for it and it just created this bot, dot, ts um and my entry file, and that was it. That was the only thing I need to worry about.

A

So here a few things that I've done extra is, I have a memory, so I have some conversation data that I needed to store in order to make sure that I know who the who the initiator is. You know the user id of that person.

A

I wanted to know who responded so that I can show them a different view or a different card. So for that reason I needed some sort of a memory so use this memory. Storage shares, which is what you see in this file. Other changes is basically the main changes are all happening in the bot. So I have the activity handler uh here and for what it's worth. I have included comments in most of the lines, because again this is a demonstrating sample.

A

So I I find it really helpful when people uh will see some comments, so go ahead and check this out in our pnp gallery, and you can probably understand what I'm trying to do here. But you know it's it's just basic stuff and, like I said getting the user information and things like that, and what I'm really interested to show you today is this invoke activity function.

A

That is what I override um and then I put my logic in for all that refresh activity, that's happening, and here what's happening, is uh based on the action on the card like. If I'm going ahead and submitting the card, um then I'm checking I'm storing this information of this user um into the payload into the memory and then using it in the payload to refresh that card, so that you know. First, I send out the base card and then I would check if that's an initiator boom.

A

I show the initiators card, which is like a summary card and um if someone else goes ahead and put the form information in and click the boom button, and then I will go ahead. So that's a switch case here. Okay and then I go ahead and add that person into the list of user id and based on who they are they're, not the initiator, okay, show them the other card. That says thank you, and um this is how it works.

A

So it's like um it was pretty interesting to do this, but thanks to the refresh uh payload I mean refresh property or the object in the payload that made it possible.

A

So this is that extra piece of stuff they added, so this user id is where you can add uh these users, who are active participants um of this workflow like if, in in a in a business scenario, it would be a person who's, approving a person who you know created an incident form or something like that that those user ids can go into the payload and they could kick off a refresh of that adaptive card and show something new. So I think we have just one moment for this uh meeting so yeah.

A

I really wanted to just show you that and finally I will share this links. uh Basically, I think I have shared this deck with david as well, so I've got the blog. I've got the source code in pnp uh gallery. I've got. If you want to read more about universal actions, you can go to aka dot. Ms slash pnp hyphen. um I also linked in the generator that I used to build this one out so yeah, that's uh basically the demo.

B

Fantastic ravi, this is really awesome, stuff very exciting. Thank you for sharing it. Today. Links are in the chat. They will also be in the blog if you're watching the video.