Microsoft 365 Community Microsoft Teams, 24 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Use SPFx for Task Modules in Microsoft Teams and access Microsoft Graph

Description

In this 13-minute Developer - focused demo, Markus Möller lays out a key use case: Documents in a list are past due for review. Need to communicate review requirement to a Microsoft Teams user through task module. Communications is between SPFx and Bot Components and task is rendered in an Adaptive Card with 2 actions: View and Reviewed. Communications between Library and Task Module via Graph calls. This capability is available only in SPFx v1.11. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 24, 2020.

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

Supporting materials:
• Post - Use SPFx for Task Modules in Teams Messaging Extensions and access Microsoft Graph | https://mmsharepoint.wordpress.com/2020/09/03/use-spfx-for-task-modules-in-teams-messaging-extensions-and-access-microsoft-graph/
• Repo - msgext-spfx-graph-docreview | https://github.com/mmsharepoint/teams-docreview/tree/master/msgext-spfx-graph-docreview
• Repo - Document Review SPFx Messaging Extension | https://github.com/pnp/teams-dev-samples/tree/master/samples/msgext-spfx-graph-docreview

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

My name is marcus muller, I'm a microsoft, 365 developer from germany. I work there for avenatt, you can reach me on twitter or via my blog, and the last line is only in case. You have some background noise again, which I cannot put on mute.

A

So today, um as already uh announced in the intro, I want to talk about a new capability of sharepoint framework. um This was available or is available since only 1.11 to use spfx for task modules in teams, especially in messaging extensions, and I will also how to how simple it is from there to access the microsoft graph, as we know, from spfx in general.

A

So let's switch to my short demo scenario. Some of you might notice. I presented quite the same scenario seven weeks ago in the general dev call and those time it was a normal teams uh teams app, and that was a search based messaging extension, and today I showed this in action-based spx variant. So in short, we have some documents somewhere which need a review from time to time. I pointed out three ones here which never been reviewed and are due since a couple of days, and this is now what we want to communicate inside teams.

A

So we can uh start our messaging extension, for instance, on the compose bar here, and what we see now is the first task module um developed or rendered by spfx, and there are our three documents which we already awaited. One is quite overdue.

A

This is why I formatted the point a bit different, but we will pick this one select it with a double click and there we are back in our communication with an adaptive card which shows the details about the document together with two actions: the first action, the view action quite boring, just opening in a well the second one is much more interesting for us.

A

This will put this document automatically on reviewed, but not uh the simple way, because when we click it, we will get another task module which will now get us some input from us. Here. We have a quite simple scenario. We only ask for a date for the next debated review in the near future.

A

We can pick one and kick it off with the revenue action and now the task module inside spf x was writing this back via graph to the library- and we can already see this year over a few seconds ago- was my last review date. That's strange.

A

But it should there, it is yeah um there. It is uh new dates and uh that's so called fine. So let's get back to the slides, because I want to show you how this works so first, the question is: how does this get invoked?

A

We have two solutions. We have a very small bot solution and we have a webparts solution in that spf x in spf x. We have our manifest, which points out the messaging extension as a so-called compose extension, and here the most important thing is the task info notation and the url this url, you can see at the bottom as well. I pulled this out a bit to make this a bit more visible. This has some parameters and here's uh first dimension the team side domain.

A

This is an automatic parameter resolved by teams itself, so we do not really have to care for this, but the second one is what we have to care for. This is the component id, and this component id is exactly the same than our web part id, which we know from our webpart manifest.

A

In our case, you have seen two task modules, so my solution contains two web parts and you will later see the second url with a different component id, but here for the moment, this is the first one, and this uh tells teams, when someone invokes this messaging extension to render that specific, sharepoint component.

A

Once this starts, um we can press detect if we are really in the right context. This can be done in the on init method with uh yeah this line, especially which shows that the app context application name. If this is team's task module application, then we are inside the task module, because um this task module has no specific supported host property, as you might know, from web part or team steps or single page applications.

A

This property supported host does not really matter in this case. So um here we detect hey. We are really inside the team's messaging extension. Taking this as a boolean parameter and handing this over to our root react component, where we can later execute our code or not. If we are in the wrong context, next thing is once we have rendered our task module in this case with a I use, the fluent ui list.

A

You can see this here in the details list.

A

um There's one method called item invoked which is executed once the user double clicks, an item in that spreadsheet special case- I'm checking here already mentioned: hey- are we on the team's messaging extension and if so, we call from the teams sdk a submit task function and hand over our document item to this, and now we are switching the solution and coming to the backend to our bot solution, which is quite small. We only have one class with two functions.

A

We will see so the most of the logic and spf x, dot what we are doing here in the first function. You cannot really see the name, but this is the messaging extension submit action which is uh executed because we just executed submit tasks.

A

We will take some data from the item, for instance, here the url, where I shortened, by the way, the body here to uh make this more visible and point out the important things um we can create an adaptive card from this and insert, for instance, a submit action, but not a normal, submit action. We can classify this in a team's case, specifically as an ms team's task, fetch activity and furthermore, we also once again hand over our item, and this is how the adaptive card comes back to our front end.

A

You have seen this looks like this, and now we in our case or even uh as to point out this is a communication thing, so this can be also another user. Who can click on the review button?

A

We will then get back to the second function in our back-end bot solution, and this is, as we already pointed out, um the task module fetch activity.

A

First thing is: I already announced this. We have a second component id here which we included in our url. I pointed this out again for better readability and the second interesting thing in this time where I use this. Quite the same url structure again is that I'm, additionally adding a custom property which I can also do here in this case, because here I can control the url, so I can hand over my item id back to the task module to the next one. We will see and say hey.

A

We are now concerned about item id one, two, three, four whatever, and this of course is taken from the handed in item what we derived here now. Second task module um opened in teams again. Once again, we are back in shop inside sharepoint framework code.

A

We render in this case only a simple um form: small date picker and the default button. The default button is the only point to mention here on exec. uh It executes the reviewed action.

A

This action once again detects hey. We are in a team's messaging extension or not calculates some dates and finally initializes our draft task and sets the document to reviewed and, at the very end it calls another submit task function, this time without a parameter, and this is um or this achieved that only the task module gets finally closed. There's no round trip to the server again, so the bot class will not be reached again with this action.

A

Let's finally have a look into the graph service and point out some other thing. What we can see here is, uh I pointed out that you use the document uh the get documents for review function. The writing background reviewed function is quite the same. What we first do is we retrieve a configuration from a parallel sp service controller.

A

I do not really want to go into details here, because this is quite a simple operation. What I'm doing is, as I'm in the sharepoint framework context, I'm simply retrieving my parameters from filled out tenant properties. This isn't quite an easy operation inside sharepoint framework inside the native teams application.

A

I would think about different options, because that would be much more complex to uh to retrieve it from sharepoint tenant properties, and what I use in fact are two parameters here, my site id and my list id, which I need to retrieve my data from the right library.

A

Finally, um just as a wrap up right, also a small diagram, how this works from uh from beginning from the invoke from the invoke uh operation over to the first task, video, then into the back end. What component back to the adaptive card and then the final task and the final task module.

A

And this thing, or this demo or this this code sample, is part of a series that I wrote in my blog, um you might have seen.

A

As I mentioned seven weeks ago, I was presenting in the general dev call a search based messaging extension, where the authentication took place in the back end where the bot channel, um then I wrote an additional option where I used the action based variant for this same scenario and there the authentication took place in the front end via teams sso and now today, you've seen the spf x alternative by authentication yeah.

A

I think you haven't really seen something about authentication, but that is because uh the graph handling inside spfx is quite that easy, and I did not really point it out here, because I think you have seen it a dozen of times in those kind of demos already what I'm missing a bit, and maybe my next step might be to write a small wrap-up, where I have a small side-by-side summary comparison and the recommendation to do this or that option in this or that scenario.

A

Last, not least, some resources, my blog post, which also points out to the rest of my series. The sample is already available in the team's devsamples pmp repository for those checking this out. Forgive me. I need another pr. I check this so because my code does look a bit ugly in terms of redemption, and so so uh I will update this soon. In my own repository you can reach by my blog.

A

It already looks a bit more cleaned up and finally, there's also a small micro documentation on this, how to expose a web part as a microsoft teams, messaging extension on this with a quite popular sample behind, and therefore I took some of the shown things here, but not all of them and that's from my side. So thank you and if you have questions feel free to use the chat.

B

Awesome, thank you, marcus, really interesting, demo again uh from the community. So thank you. Thank you. Thank you uh for taking the time to do that.