Microsoft 365 Community Community Demos, 6 Jun 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - SharePoint Framework Teams tab accessing Microsoft Graph for business scenarios

Description

This community call demo is taken from the SharePoint Framework community call recording on 6th of June 2019. In this video, Bob German (Microsoft) demonstrates how to build a SharePoint Framework based Microsoft Teams tab which uses Microsoft Graph to provide customer specific solution addressing business scenarios.

Presenter - Bob German (Microsoft) - @Bob1German

Source code for the sample is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-teams-tab-field-visit-mashup. You can also read more details around the solution from following blog post: https://bob1german.com/2019/05/31/360-degree-collaboration-in-microsoft-teams/

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-6th-of-june-2019/

Get to familiar on developing Microsoft Teams tabs using SharePoint Framework by using the available tutorial and documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

So this demo actually has been around for a bit. It actually started at the developer. Kitchen last summer has evolved somewhat since then, although it could use a bit of cosmetic work, I think, but that's alright and- and the idea here is there's there's some patterns that I've noticed in custom solutions for collaboration over the years and one of them I call the 360 degree collaboration pattern. The idea is to give users who are collaborating a 360 degree view or or mashup of the business that they're doing of some particular business entity.

A

So, for instance, a property management company might have a complete view of a property. Consulting company might have a complete view of a of a consulting project, etc, etc. So so that's the basis of the demo. In this case we've got some insurance adjusters and if you've never dealt with these folks, you're really I mean they're, mostly nice folks, but there's you're still lucky, because usually something bad happened that you have to go, call and say: hey.

A

My I had a problem in my building or my car, or something and the adjuster comes out and decides how to pay your claim. They also inspect new buildings and new construction. So here they're they're working together in Microsoft teams and they're, using the team's channel the teams meeting facility for coordinating their work. So, for instance, Katie's gonna go.

A

Who is my current user she's gonna go check out some fire damage this morning and and then I guess: she's got a conflict here, because she's got to be in two places at once, which is kind of tricky. So I can see what my team is doing by just looking at the calendar and these it.

A

These have the advantage that they go into the channel, so everybody in the team can see them, but they also go into your personal calendar if you're, if you're listed over here, but this is a really hard way to see what's going on in the team. So hence this field visits tab, which is which is the demo.

A

So this is written in SharePoint framework, of course, or else I would not be on this call and you'll notice that what it did was it it and found everything on the calendar broke it down by user-selected Katie, because she's, the currently logged in user and now here's that hungry coyote imports and I can see everything that's going on. So this is the 360-degree view. The idea, being anything you need to know about in order to prepare for this visit is all in one place, so this is mainly using the graph API.

A

This is kind of POC quality code, meaning I I think it's structured for that you could add on to it and production-wise it without starting over again. If you wanted to. But basically you know the data is. This is mock data here these activities. These documents are in SharePoint, they're tagged with the customer ID of the customer. The photos are also in SharePoint. Similarly tagged, I've got the weather current weather conditions at the customer location. The customer database is our old friend the Northwind database exposed in it.

A

So data server I can't even see where the thing is so everything's here and that's kind of the concept. So what is this demo show? Well first, it shows how to take a SharePoint framework web part and make it work in teams. So this does work in both environments.

A

Another thing it shows us how to call the graph API and how to actually interact with the team and the office 365 group and the SharePoint site that are inside of that team. So, what's interesting about this, I often get questions from developers who I'm helping out hey how come I can't ii-I've got this team's API and it won't. Let me talk to the team. How do I get to the rest of the team, and so the answer is well there's.

A

Actually, you have to use the team's a API to get the group ID and some other information, and then you use the graph API to go after the data. So you see that here we're actually coming in and this calendar is being accessed by the Microsoft graph.

A

Then the other thing that you can do here is Katie obviously has a scheduling, conflict so help I have a schedule.

A

Conflict can someone take this and, and she can't I- don't have spellcheck in there yet but anyway, here it is here's. The message now has turned up in the channel. If I switch over to my user you'll see that I can see this coming from Katy and if I click on the item, it's gonna deep link me back into the tab and it's actually gonna select the same meeting that she mentioned so now. I don't have to think how many emails the saves going back and forth with Katy. Where is the meeting?

A

Who am I supposed to talk to and hey it's all here right with one click. So that's the concept. There's a blog series on this, which the first article explains the concept of 360-degree collaboration. Then the second one talks about how to use the api's and if I had a little more time, I, don't I'm trying to kind of catch up here, so I'm not going to go into it.

A

But this goes into some detail on how to use the team's API to get enough information to call the graph API and then finally, deep linking is covered in this third article, which basa I have updated the article based on something that you and waldek said the other day. This deep link format is indeed a documented and supported link format. What is missing is the SharePoint framework part.

A

So here's the here's, the link format and yes, it's a complex format that, let's see there's a way to do it with the SDK and have a pop up, but there's also this format here, which I documented my blog article and yeah, it's all official and they can't they're not going to change it without letting us know, because you know this is all part of the official documentation. However, what you'll notice is that there are. This documentation only covers configurable, tabs and Static tabs.

A

It does not cover SharePoint framework cabs yet so that would be something.

A

I actually submitted a a comment here yesterday asking for someone to fill that in it turns out that there are two things that you can pass to yourself in order to deep links so deep, linking it's going to get you to the right team to the right channel to the right tab, and then your cab gets a couple of things that it can use to know in this case, to get to the right meeting within that tab and that those are the entity and the sub entity.

A

Well, it turns out that SharePoint framework uses the entity ID which it kind of has to, because when you add your cab to teams the configuration experience, that's when the entity ideas is decided, so that's already there and you can't really change it, but the sub entity ID does not seem to be used by SharePoint framework. So I guess the the confirmation that this is fully supportive.

A

All would probably be limited to just saying: hey can we can we be sure that SharePoint framework is not going to start using the sub entity ID at some point in the future and thus prevent solutions? Like mine from from using it safely, but right now, this actually does work, and if we take a quick peek at the code, you can see that here in the I have to show some code right, or else it wouldn't be.

A

A proper demo on this call here, I'm actually grabbing out of the team's context, with all this proper null checking thanks to the extra linting and SPF X 1.8 here, I'm grabbing the entity ID, which was defined I just have to I, just have to have that right.

A

I just have to use that in my deep link and then the sub entity ID, which I'm going to use myself to to pre load the correct meeting at runtime and I'm, passing all those things into my route into my route component in SPF, X, so I think I'm gonna stop here, I'm just happy for any input. I would love to collaborate with a visual designer to make this look better. I am very humbled by my lack of design skills.

A

So this is what each other for me, but anyway, yeah thanks for the opportunity to share this out and and everything all the details are in the blog and it's up on that same repo, where the react one was with the the s/pdif speed, FFX samples, web part or web part samples, great yeah, we'll get that shared out super great demo.