Microsoft 365 Community Microsoft Graph, 8 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams Messaging extensions using SPFx: Message data with Microsoft Graph

Description

In this 15-minute Developer - focused demo, Vardhaman Deshpande shows how to use SharePoint Framework to build a task modules in Microsoft Teams messaging extensions. Messaging extensions allow users to interact with applications within the context of their conversations – in a channel or group chat. Access SPFx task modules from Teams Compose Box, Tabs, Personal Apps as well as from Adaptive Cards. Static and dynamic extension use cases are explained. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.

Demo Presenter: Vardhaman Deshpande (Valo Intranet) | @vrdmn

Supporting materials:
• Blog post - Microsoft Teams messaging extensions using SPFx: Getting the message data with Microsoft Graph | https://www.vrdmn.com/2020/09/microsoft-teams-messaging-extensions.html
• Repo - spfx-teams-message-action | https://github.com/vman/spfx-teams-message-action

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

Hi everyone, uh my name, is walterman deshpande, I'm an office development mvp and I currently work with walo on the team's product teams based product where we're using spfx we're using bots. So recently, I've been involved in a lot of that space and on this on this demo on this call we'll go through something called teams, messaging extensions and teams, task modules powered by spfx.

A

Now I wrote a blog post a couple of uh weeks ago, and in that we we talked about uh specifically messaging extensions and spfx. Now uh now, after that, we decided to kind of agree on coming on the call, and then I realized that it's not just a messaging extensions. It's basically task modules and anywhere task modules can be uh presented in teams. You can do that with spfx. You can have spfx web part. Come come, come up as task modules, so uh I will follow this up with the blog post with more details.

A

So the demo we are going to see today is actually uh has a couple of more things than the blog post so and then I'll follow it up with another post and then potentially, I will uh push all of this to the pnp samples repo as well, so that uh all of us can take advantage of this. Now uh we will be talking about messaging extensions and task modules.

A

uh So, first, let's see what messaging extensions are now any the messaging extensions basically help you execute custom code or custom logic within the context of or with without leaving the context of of teams. So you it could be that you, uh you invoke that logic on messages which are already posted in teams from this ellipsis menu going to more actions, and then you can have certain tasks show up there.

A

uh Messaging extensions can also be brought up from the command bar uh and, lastly, messaging extensions can also be brought up from the compose bar like, for example, the praise applications which is in teams is is, is the messaging extensions uh messaging extension, sorry uh and similarly, uh similarly, uh you can use spfx webparts, which, as which show up as messaging extensions as well.

A

Now, let's talk about the message, actions or the messaging extensions which are invoked on messages posted already in teams, so I'll go to the ellipsis menu I'll go to more actions and I'll invoke the messaging extensions and the sharepoint framework web part can be can be brought up as part of that now, where do we configure this? uh There's two types of ways in which you can configure messaging extensions. uh First, is the teams manifest in the teams manifest? You have the compose extensions uh section inside that you can.

A

You can set up your messaging extension there's two types of extensions, static and dynamic. First, we'll have a look at the static extensions where you can configure the entire task module options or task module properties right from the teams app. So you can see that the teams, the spfx url, is configured here and the way to kind of decide whether whether the extension is a static one or a dynamic.

A

One is using this fetch task property, where, if you set that as false, then teams is going to see if you have a task module defined as part of your manifest in that task, module in the spfx url a couple of important things to note that it's it's not the same as the spfx tab based url.

A

There is a different aspx page behind the scenes, teams, task task, hosted, app and, and then the other information is more or less similar, uh where you specify the component id of the spfx web part uh and then and then the spfx task module uh shows up now. The one good thing about this approach is that you don't need to do a lot with teams, bots and stuff. You just create the manifest you deploy the spfx web part.

A

You configure the task module over here and then and then you can see that the the web part starts working within teams after the app is installed. Now, when we invoke this extension, you can see that in the spfx context there is already a lot of information available like what was the team on which the extension was invoked. The channel id on which particular message did you invoke, is, but there is not a lot there's, not all the information which we might need.

A

For example, we might need the message body, so this information is not available by default on the spfx side. So let me go to the spfx webpart, and this is a this- is a normal boilerplate spfx webpart without react, without uh without any framework, so just to demo the the pr code. So you can see that inside the team's context, so inside the spfx context, it's the teams context and you have the various properties available already called group id channel id and chat id.

A

Now when we invoke the messaging extension there is this thing called parent message id as well, uh we will fetch that and from there then to get more details about the message. You can then use the graph api, so uh the graph teams api lets. You fetch all the details about uh about a message or a chat message or a channel, uh so just having this id available as part of the spfx context, gives you some uh some some data which then you can use to fetch even more relevant data. Now.

A

One thing about this is that uh we have to depend a little bit on what properties are available out of the box within the spfx context. Now I came across a slight limitation. As you can see, uh this is a top level message. I will invoke the static message extension and then, when fetching, the body will get the message body now, when I invoke the same extension on a reply.

A

At that time I, the the parent message id property, keeps pointing at the top level message and- and you can see that the body is still uh being fetched for the top level message so and then I knew that uh whenever we work with teams, bots and teams messaging extensions- you there is a lot of data which is sent from teams to the to the bot.

A

So just a sample of that data, you can see on the microsoft docs files that uh this this data is, uh is basically everything which the with the bot behind the scenes uh receives. So you have uh you have the id of the messages on which it was invoked. You have even the the client of the team like whether it was a desktop client, whether it was the web client, whether it was a mobile client and so on, and then you have a lot of channel data now.

A

I knew that one of these properties was the was the id of the reply on this. So then that kind of leads to the other type of messaging extension, which was the dynamic messaging extension now. The way you configure the dynamic extension is is like this, where you define the fetch task as true. That means that teams is going to go and talk to the configured bot, uh which is the I, which is this bot.

A

uh It's going to say that uh do you have a fetch task for me to return, and so it's not going to look for the task info object, which is configured in the manifest itself. So I think this is a slightly more flexible approach, uh but then it has a kind of a c on you having a bot configured behind the scenes and uh inside that, then you have much more options.

A

So all the all the data which you saw here in the which is sent to the bot from teams is accessible in a strongly typed way inside the bot. Now I'm using a.net bot uh configured, but then you could use a node.js bot or any any other platform as well, which has the bot framework sdk now inside.

A

Here we are going to get the reply id as well as well as the id of the message and then the exact same we're going to do the exact same thing, which is we're going to configure the spfx url, and then we are going to pass the stuff which we need as parameters to spfx, which is using the message id and the reply to id.

A

So this is the exact same thing, but done in the backend way where we get more parameters from the bot framework and we pass those parameters to uh to spfx uh inside spfx. Again we look at the query string parameters uh and then once we get the query string parameters we'll again use the same graph calls to get the uh data as well, so uh to show that uh if I go in here and invoke the dynamic messaging extensions here, this sends the message to the bot behind the scenes.

A

The bot fetches the required information, and then it gives us the correct message id and then it gives us the correct text of the message as well. So that's those are the basically the two types: static, messaging extensions and dynamic ones.

A

Speaking of task modules, task modules are not only limited uh in message in in messaging actions, so you can even bring up a task module from from the compose box. So just like you saw uh you can bring up spfx web part as part of from the compose box as well. Now, here the chat, id message, id message body will be empty because it's not on a message where we are executing this.

A

uh You still get the same context like the team id and channel id, and then you can invoke certain third party services or you can do anything. Basically, whatever you can do from spfx, you can do in a task module and then another place find personal is from adaptive cards. So you have adaptive cards posted in teams where you have a slightly fancier message. Maybe there is a third party app which is posting these adaptive cards as part of the spfx, also as part of the adaptive buttons.

A

You can have spfx task modules open up as well, and uh you can have the same of context. Information available there, uh so yeah speaking of uh speaking, of uh coming back to messaging extensions.

A

As I mentioned, there's two types, the static ones and the dynamic ones- the dynamic ones- uh require you to do a bit more work with the bot behind the scenes.

A

uh So I, if you have lots of complex logic, if you are, if you need the immediately all the data which is available as part what framework, then the dynamic uh approach is probably better, uh but if you just want to get started, if you, uh if you want to see how uspfx web part looks inside task modules, uh there is there's, obviously the the static ones where you just configure the url in in the teams manifest and then the it should. It should start working in terms.

A

So it's easy to get started but like if you want more control over your messaging extension and task modules with spfx the dynamic one with the bot is probably the right way to go in that scenario uh and then and then the spfx supports calling graph api using aad clients. And uh you can you can do everything you you want inside the task modules, then so just another way in which uh spfx can be surfaced inside teams, in addition to bus, in addition to uh tabs and personal apps um yeah.

A

That's that's it about the first.

B

Question uh because I know that you're you're implementing this within the valo as well- and that's not this- isn't really intended to promote wallace products but more on. Can you explain the scenarios and and where you've been using this within the within your implementation? So what would be the scenario where people would be using this kind of a messaging extension in first place because those questions around them.

A

Yeah sure so, just to give you an example of valor specifically so we I I work on the ideation product, where employees are kind of uh promoted or or rather employees are encouraged to submit their ideas. So one of the things which uh we do is we uh allow the teams, tab or sorry the team's message to be promoted as an idea uh like from the messaging extensions.

A

uh I'm not sure if I have the the uh the app working right now, but just to give the uh give an example that uh what you could you could kind of uh promote the someone post, something in teams and then you could.

A

uh You could uh promote that as an idea throughout the throughout the tenant, so promoting messages uh then um uh creating something creating some things like forms and stuff right from the compose box, uh which which then gives you uh the option to do that with spfx, as well with the compose extension, so without leaving the context of teams. If you want to work with teams data in your third-party application.

A

I think this is a great scenario and, and sorry before I forget, uh I I'm showing I'm showing uh all of this as uh as an example within the team's channel, but this works in group chats uh as well like, for example, if I'm part of a group chat, uh I can bring up the same uh messaging extensions to it, so you don't have to be in the context of a team if you, if you can execute third party logic as part of a group chat or a personal chat with someone as well, it doesn't have to be in a team's channel.

B

Excellent thanks barcelona so really good clarification on the use case, because, that's always the the key point is to understand. Where would I actually use the capability? Not just? How do I use the api or or implement things so really really great stuff? So thank you for that. Thank you.