Microsoft 365 Community Microsoft Teams, 22 Jul 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to update an Adaptive Card with a Teams Messaging Extension and MessagePreview

Description

In this 10-minute developer-focused demo, Markus Möller calls on an action-based messaging extension created with the Teams Yeoman Generator to post a simple adaptive card to a Microsoft Team's news channel. Post 'as a bot' and with an action to update the same adaptive card again and again, as opposed to a 1-time execution. Use workflow to cap number of permissible card updates, if necessary. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on July 22, 2021.

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

Supporting materials:
• Blog - How to update an AdaptiveCard with a Teams Messaging Extension | https://mmsharepoint.wordpress.com/2021/05/05/how-to-update-an-adaptivecard-with-a-teams-messaging-extension/
• Sample - Action Preview - Microsoft Teams App | https://github.com/pnp/teams-dev-samples/tree/main/samples/msgext-action-preview

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

This is my topic short intro myself. uh I think most of you know me already even presenting two weeks ago, so uh marcus muller, microsoft, 365, developer expert from avenatt in germany.

A

Contact me on twitter or over my blog, if you like, and today no big introduction, let's directly jump into the demo, the team's messaging extension posting an adaptive card and update it.

A

So first I want to show you uh the quick introduction from my last demo again where I was picking a document and posting it as an adaptive card and what you can see when you do it. This is a normal way. Is that you only post this adaptive card to the compose box, you can still write something you can also remove it again if you like, and you have to finally send it to the message channel, which then in the end, it turns out that you as a person, send this message.

A

If you want to update those cards, you need to do it different, and this is what I want to show you today and therefore I have a different messaging extension here, and this is uh based on the very uh basic demo scenario you get implemented once you establish a action-based messaging extension with the yeoman teams, generator, which will first ask you for.

A

Email once you submit this, um you would normally come back with an adaptive card in your compose box, as you have just seen, but I changed it, and so today we are coming into this message: preview window, where we can either edit it, which does in fact mean that we will jump back to our email address entry or we can say we are fine with this card and we can send it. And if we do that, then there we are.

A

Then we see that now we have no compose box anymore and we directly have a send message based on our bot channel account yeah, and this enables us to, for instance, click on a button, and this button will finally change the card under the hood, and here we can now do this again and again and again and again.

A

This is the very basic and simple scenario just edit it in a way that we can update it. So how does this look like in code or, let's first have a look at how the process is running yeah. So when we start when we kick off our when we kick off our messaging extension from the start, we first get a random picture here, and this random picture, together with the email, will be posted to our preview yeah and the preview. We can either accept it or not.

A

If we do not this, we will get back here. If we accept it, we will post an adaptive card, and this adaptive card will finally occur here in our front-end message channel, and then we can update this. This will be uh sorry.

A

We can update it and this will then run back into our bot channel where we will go back and post an updated card again.

A

As an alternative, when you have a workflow, so I will show you a sample at the very end uh in some cards, you can also, of course, uh terminate this endless process. In my case, you can vote as long as you like, but normally you might have some workflows where you might review something, and once this is reviewed, you can also come to an end. Finally, and then you will maybe only you will not have a button anymore in this in this card and then you cannot update it anymore.

A

Okay, how does this look like in code? The first two functions. What we have here in our messaging extension middleware class.

A

The first thing is quite simple: pressing the function on fetch task. I did not really change it. um This is simply responsible for the initial task module where I had to enter my email address and there it is returned- and this is uh the this is the page that is uh rendered when we click on this little icon here, once we submit this first task value and entering an email address and clicking ok, then it comes to a different shader.

A

Normally we would still create an adaptive card, but then we now return it as a bot message, preview type and with an activity preview which uh gets or which, which is included our card here- and this is a difference. This comes to the window that you have to either edit or to send the card in the preview.

A

As I have to update the card, I can clearly recommend to create a service for that. I did this here because on the one hand I have a card. This is uh above here. I shortened it a bit because I think you can imagine the card was quite simple and then I'm doing uh having a function called get the initial card yeah. This is a very basic card, with the vote of null the email address and so on, and here you can also see the url uh with the random picture.

A

You know from the demo scenario, maybe which is implemented in your teams, in your teams- generator solution already, so that you might change the picture, might change in different examples at different run times.

A

The next thing is: what's important is when we uh either create uh when you either click on the send or on the edit button. We have two functions here that uh will do uh the result that will handle that the first is the send button where we simply um get the variables.

A

Here we get our variables from the attachment content. We then create a card.

A

The initial null value, and then we send this as an activity back, and this will now finally directly post the card to the message channel and not coming to a compose box or something like that in the opposite. If someone clicks on edit, we will simply return the same input form again like we already did on the pass screen from the initial one, and then in that case we might already get grab in my case in my example, another photo, for instance, if we are not satisfied with that.

A

One final thing to show: well, the very uh the post final thing to show is: what happens when you click on the board button.

A

The first difference is that we have to change the class now, because this event is not handled in our middleware class, which we had before now. We have to switch to our bot team's activity handler class and there we have to implement the handle team's task, module fetch, and this will again receive all our values from the existing measure message and from the existing card, so that we keep our email that we also keep the photo url or we also have to grab the existing number of votes.

A

Then we will increment the votes. We will construct a new card with the new or existing values, depending on so email url doesn't change. New words did, of course, and then we also have to identify the existing message, and this we can do from the reply to id variable, and then we can finally update the message with context: update activity.

A

Only for uh completeness reasons, um increment modes is quite the same than the initial card. The only thing is that we now um use a new number yeah, and this is what we will write uh here into our card, and uh this is what I was using several times, and this is still in my adaptive card service I created for that. This is better than to recreate the cards and then directly encode them, but that's all from the code base.

A

Last, not least here the urls, uh it's my blog post on that sample and also the sample in the pmp teams, um gallery sample template and last, not least, as this is a very brief sample.

A

We can also give you uh another example where you can see how you could use this in different uh things here, for instance, if you assume you have a document and review that once this is reviewed, you can have a different button and you can also put in uh some additional um values who reviewed that by when and then, when the approval workflow is finally done. You can also remove all the kind of buttons. On the other view you have the data. This is another sample where you could use this technology for that's.

B

From my site awesome, thank you. Marcus, very, very cool stuff, really appreciate you taking some time to share that with the community today.