Microsoft 365 Community Microsoft Graph, 6 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams Messaging Extension with Authentication, access to Microsoft Graph

Description

In this 11-minute Developer - focused demo, Markus Möller introduces viewers to a search-based messaging extension using authentication to display, in a Microsoft Teams channel, all documents requiring review. Documents are stored in a document library. Retrieved documents are transformed into Adaptive cards with View and Review Action buttons. Review action connects to SharePoint via Graph. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 6, 2020.

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

Supporting materials:
• A Microsoft Teams Messaging Extension with Authentication and access to Microsoft Graph | https://mmsharepoint.wordpress.com/2020/07/03/a-microsoft-teams-messaging-extension-with-authentication-and-access-to-microsoft-graph-i/
• GitHub - Document Review Messaging Extension - Microsoft Teams App | https://github.com/mmsharepoint/teams-docreview/tree/master/extension

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

Just a short intro to myself, who doesn't know me, the whole slide is for you and uh who have seen my last demo, for instance, five months ago only the last line is for you, um which only changed him then, and today I'm gonna talk about the microsoft uh team's messaging extension and especially about the authentication part uh to access, for instance, a microsoft graph, but this you could also replace to other third-party apis where you have authentication in and let me first show you what the scenario is about so scenarios about a small document.

A

Library could also be a bigger one, but uh just for example, we have several documents and some of the documents are uh need some review and this uh we wanna uh communicate about in microsoft teams. What we need for that is, of course, uh or is the library and the microsoft teams app. We come to that in a minute, but what we also need is a messaging channel is a bot channel.

A

So we need some settings here and and this spot- and this is very important- has a custom, microsoft graph connection, and this graph connection um is simply an app registration um which needs to be configured and needs to be placed here inside this board message settings and how does this work and for uh when we have installed our app? We can, uh for instance, reach this messaging extension here from the composer bar. We click on it, and then we get the documents shown here.

A

That needs a review the display. This is what I have to add is uh search command based. So you have no ma in this scenario. You have not much uh customization options here. You can only list some documents or some other items, and then you can pick them and put them in. Of course, you can also.

A

Move and what you can on top do is once you have them, you can also filter them, so, for instance, filter out all the document stuff and only get this special one. This would work as well and on top, we can also configure that stuff.

A

So, in our case, um we have a direct library, connection or search something. um So in this example, what I'm doing here is just putting my site id and my list id where I can retrieve my data from and configure in that stuff.

A

Oh, this is how it works from a user perspective, and now let us check how it works from code perspective. Therefore, we can attach our debugger switch back.

A

And then we are in our debugger and an uh so-called middleware processor here, and um what we did here is we were trying an authentication against our connection name from the connected channel, and in this case we have the positive case here. We already received the token, and if we receive this token, we will continue later. Otherwise we would come into a sign in authentication this I will show later, because therefore I will have to sign out, because you already have seen um that I was successfully running that demo a minute ago.

A

So let's first continue with the positive part, so we already have signed in and then we are coming first here to our so-called initial run. This initial run means we have no further filtering, so we will show all the parts we have no search um such value to uh incorporate and then we will go on and uh go to our graph controller and retrieve the documents from there.

A

This is what I will um shorten up here. Once we have our documents, we can see that we have four of them. We will iterate them and transform them into adaptive cards. This adaptive card is the final result.

A

We should see in the messaging extension and also with our action buttons here and then what we also have on top is this small preview parts- and this is the small not really customizable, result in our search result window, and um so here we only have a title: the text, our description and an image here, there's not much to customize.

A

So here's our preview. We can now uh continue it and what we will see when we go back to our result, of course, is that this took too long, and in this case this is because our debugging and my explanation took too long for teams teams could wait for that and to jump or further. I would just have to turn off debugging once again that we can go on and come to the next point.

A

So once again, we have our documents and what we do now here is. We will insert a document. We can also send this, but this doesn't really matter for the next step. What I want to show you in the next step and therefore I have to turn my debugger on again.

A

Is the action? Of course we have a small view action. This is only html link. This is not really. uh This is quite boring, but we also have a review action and this review action has directly back connection to the sharepoint via graph, and we will only extend this a bit. We could enter some date here and we can finally kick off the action and put this to review.

A

Then we are back in our middleware on the card button click here and what we will do here is now we get our graph controller again, we will get our site ids um our list, ids from the configuration here. The code is not quite correct, but anyway I will get some values and then I will finally take off the update item. I will kick off my graph connect and go through that and what I finally did um also. I can show you in the last point. This is not really necessary.

A

This is just for demonstration purposes here at the end, I'm signing out now. So in my next step, I can show you uh how it looks like when the user is not signed in yeah. This is not officially. This has nothing to do with an update uh of a document, but just for demonstration purposes.

A

Okay, switching back to our team or better, let's check our library here and our special document. What happened to.

A

It we are, we have an update, so we remember the date first of february there we are so. Finally.

A

This doesn't really matter the action took place um now we get back in and remember we signed out and this time we are in our debugger mode here and there our token is undefined, so we have no token and we press f5 and we will return an action here.

A

Hope this works and there it is here's our sign in action. We can set this up. This works seamlessly, and now we are back- and here we have our token again. This is signed in this is not a process for minutes. This is the process for a long time. So, if I make a demo tomorrow again- and I would not execute my sign out- I would be still sign in because this is an indication against the boss channel quickly run through it. Oh I'm fast enough. You've seen that already!

A

No, I was not fast enough. Anyway, we can turn off again the debugger and show you once again. That's your data. We are missing one document, of course, because this is already reviewed and that's it.

A

So this was from my side for today. um I think david already shared my blog series on that topic. If you want to get deeper information, also the code repository and to get back to my slides again, to sum up what we have seen, we have a search based messaging extension. You have seen we have seen something about authentication, especially here in the back end, we have seen searching and filtering and we have seen the configuration part.

A

What I'm currently working on is to transform this to an action-based scenario and the main difference from an action-based scenario would be here. You could control what I showed you in the search results where you cannot control much of the eye you can control. uh Let me call it the first initiation. You must not. You can, of course, display a complex grid or something like that even of results, but you can also jump totally come in with an input form or something like that, and this is what I'm working there there.

A

You can also work with authentication in the front end, so you can use the preview sso feature in combination with the on behalf flow I'll. Show you some uh resources for that. In the next slide, and this authentication and the whole so-called task module in the front end could also be replaced by sharepoint framework since the latest version 1.11 and there it would be even easier, combined with the authentication okay, as promised also for the video uh some resources, uh my blog series and uh the repository currently still in my own.

A

What once I find some time promised uh patrick victor, I will share also with the team sample if appreciated and then some uh what I mentioned just about the front-end authentication for action-based scenarios, you could use uh the sso authentication, for instance, described in the wiki of the yo teams, generator and also great blog post from victor on the second step, the get access token on the house.

A

That's from my side. Thank you awesome. Thank you very much.