Microsoft 365 Community Microsoft Teams, 23 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Search-based Messaging Extension for Microsoft Teams

Description

Markus Moeller (@moeller2_0), Microsoft 365 Developer and Avanade Manager, demonstrates how a search-based messaging extension works with authentication to Microsoft Graph. In his scenario, he retrieves documents via Microsoft Graph from a SharePoint document library that are due for a review. A selected document is transformed to an Adaptive Card and posted to the messaging channel where users can “View” that document and directly set it to “Reviewed” with card actions.

Detailed blog https://mmsharepoint.wordpress.com

Demo taken from the October Microsoft Teams community call
https://youtu.be/gwvHpKUM9Cg

Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

A

My name is mark smeller, I'm a microsoft, 365 developer and I work for abernath in germany. You can reach me on twitter or where my blog and the last line is only a warning just in case of unpredictable background noise here in a small flat and stay at home times. It can happen that my little daughter surprised today. I want to show you um about a microsoft team's messaging extension, which is uh search based impact and the authentication method to access microsoft graph in the back.

A

My scenario is uh that I'm talking about some uh documents that need a review. We can see this here in my small little document library, so I have some documents here that need a review and those uh documents. I want to communicate inside teams and enable the review from that perspective. How does this work in teams?

A

I created a messaging extension, as mentioned you can fire it up here. This is a search based scenario. I said, or it's quite a simple display. We can pick up now either a document or what we can also do return back and also do some filtering here.

A

So that we only and assuming we have lots of documents here, we can also intercept and do some search-based stuff here and again paste this in teams. Now we have this adaptive culture in our team's channel and everyone having access to it would be able to either view our document or even put this on review.

A

uh It can adapt this by a small date and put this on review directly and when we go in our document library, we can see that our document just got reviewed and also the next review is set to a date in the future.

A

What we can additionally do um is because you might ask how to access these documents, I'm doing this with uh the graph api, but with cyber point access. So I need some information from where I get these documents, um so such a messaging extension can also be configured with some settings and in my case here I have a site id and the list id that point to that. This was just demonstration.

A

Now, let's check, how does this work? First? Is the injection. So how uh does this code get fired? This is done in the team's manifest with the so-called compose extension.

A

um What we have here um is, on the one hand, we have a bot id that will be inserted and um two other things are interesting, so the setting can update configuration and initial true says that this automatically executed. So this is what we have seen already once we click on the extension. We already get documents, not only when we search for something um this is uh we see this in the code later how this is detected.

A

The next thing is, of course, how to get the initial documents.

A

This is executed in the so-called middleware in the teams in the teams app and this middleware, this imessaging extension middleware processor in the on query method, is uh communicating with the bot in the background and here what we first try to do. Is we try to get a user token? In my case, this was successful and I will just uh so that I forget to demonstrate how, when it's not successful, I will catch this up in a minute.

A

So uh here we have a token. This is why I shortened the negative token response here. I directly jump to where we get our documents and then we instantiate the graph controller, get our settings what I've shown you.

A

I do this in a really simple way in a json db option, of course, in a productive scenario, you might do this different, but just to show you how configuration is done and just retrieving the parameters and finally, at the very end, and the second last line uh my controller retrieves, the documents with, uh in the background, the simple graph call, and then we have the documents.

A

Alternatively, um we had the search, the filtering in my case, it's more filtering, because when I, when you look in my code, you see that I'm taking the documents from the initial run in this document, so I'm not doing another server request. In my case, of course, I could do this, but just for simplicity reason, I take the original request and simply fill that by the string that I'm retrieving from such parameters.

A

And finally, I will also use the documents, the items that I have and then iterate them and transform them in right. On the one hand, on the left side, you see the so-called preview uh visualization.

A

This is in the in the overall result and on the right side, you see the single adaptive card representation once I select one and how this is achieved.

A

This is by simply returning an adaptive card and on the right hand, you see a bit shortened my adaptive card consisting of a body and actions and on the left hand you can see um the preview which is quite similar, but here in the search based scenario, you cannot modify this uh in a real way.

A

I'll show you some other examples at the end break how you can do this different um and, finally, I will put the pieces together in an attachments uh object, and this is, I will return as a result to my messaging extension, where it will arrive the settings um you have seen. It's also quite simple. Therefore, we need two methods. um This is, on the one hand, on query settings url.

A

This is just returning. Finally, the url to my settings page with a small html page inside my solution, but I also have to return, of course, existing parameters like if you already have configured values you need to return them. This is what I'm doing here in most of the parts of the code and the second method, the on settings method. This is executed once the configuration is done and returned back, and in that case, I'm just simply saving all my parameters to my json db, simple configuration storage, the reviewed action.

A

Finally, um we can make this quite short. This is what we also again need to check for the authentication and then we will finally take some parameters. First, the configuration again in a short way, and then we will only execute the update item method of my controller and what I'm finally doing- and this is now I can jump back to my demo- because this is what I missed to show you is that I'm signing out the user. This is no production scenario.

A

Of course, this is just for demonstration purposes and when we go back and try this again, I just want to show you how this looks like when I have no token when I'm not signed in then I will get this and once I just set this up, then I'm signed in again and now we see that we only retrieved two documents, because one was already reviewed yeah. This is quite clear and to show uh how this authentication works.

A

My last two slides or demos, is first um what I just showed uh yeah. I hided this in the last screenshots of my code. Here I have the negative check of my token response. So if I don't have a token, then I will simply retrieve from my bot adapter and get signed, inlink and return this as a messaging extension result, and this is how I retrieved this window, what you this pop-up window, what you have just seen now, the final question, how this is configured.

A

This is configured, of course, what you need. I showed this in the manifest already that you need an id of your bot, and this is a bot adapter. You need to configure in azure. This is on the left side, um where you also have to put a messaging extension endpoint.

A

This is a debug scenario here, where I'm using android for this, I o, but you can also deploy this, of course, to an azure web app for production scenarios and at the very bottom you can see the out connection settings and this connection setting you see on the right is here I put in my app registration value, so my client id my client secret and the scope and uh behind the scenes.

A

Of course, I have requested the right graph permissions to write to sharepoint and that's all how the authentication works together this um this app now only some simple screenshots. um With this I've seen, I told you that it's not uh you cannot massively configure the ui in the search based alternative.

A

Therefore, it's quite easy to implement, as you have seen, but you can also create an action-based alternative and what I've done here is I'm presenting a grid, and I was also, for instance, highlighting a document that is much longer due for review and also I can get input parameters what you can see at the bottom that I could also request.

A

For instance, some additional parameter some comments for this specific review case, and I could also point this out in uh the adaptive card as an additional parameter, not coming directly from the document and another option I recently presented in the sharepoint framework call is also quite similar in this action-based scenarios, for instance developed with spf x as an alternative to the yeoman teams, generator, which I was using here last, not least, some resources.

A

I've created a blog series on on several authentication scenarios, all around messaging extensions um here you can see the link and then uh the whole code of this example, and also of the other ones, uh is available on my github and also on the team's dev samples, github repository, that's from my site, thanks so much awesome. Thank you. So much marcus for for walking us through that.