Microsoft 365 Community Microsoft Teams, 17 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build a Microsoft Teams me experience with SPFx and the Microsoft Graph Toolkit

Description

In this 7-minute Developer - focused demo, Rabia Williams delivers a 3-tab, single manifest file, SPFx Personal App implementation of the me experience. The tabs are Planning, Insights, and Settings. Planning (my agenda, tasks, and documents) and Insights (files shared, trending, modified) tabs are built with the Microsoft Graph Toolkit – nice because the builder need not worry about the data side of things. The app uses mgt-react package for components. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 17, 2020.

Demo Presenter: Rabia Williams (Microsoft) | @williamsrabia

Supporting materials:
• Sample - Me experience | https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-spfx-me-experience
• Blog - Me Experience in Microsoft Teams using Microsoft Graph Tookit and SPFx | https://rabiawilliams.com/teams/me-experience/
• Documentation - Build a Me-experience in Microsoft Teams | https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-me-experience

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

This is the me experience, personal tab that I built, which is now in the teams repo um in for pnp. So this is based off on the article that baltic released a couple of months back on creating a me experience, building a personal teams app and there was absolutely no sample to back this article, which is, which was something that I know a few folks who are asking in our chats as well. So what I did was I went ahead and developed this spfx personal app. It has three tabs planning in sites and settings.

A

Basically, the planning and insights are built using the microsoft graph toolkit you can see here. Planning has agenda, it has my tasks, I'm sorry, it has my tasks. It has my meetings and my documents. My recently used documents. So it's it's all centric, it's related to what I want to do or what I am interested when I'm at work. So that's the new experience and insights are basically around all the files.

A

All the documents that I'm interested in trending around me shared with me again using the get component in microsoft, graph, token and settings basically just to show you you can store your own settings using graph open extensions. You can probably add more configurations.

A

Contributions are always welcome in these repositories. So if you want to add more of settings, then you could go ahead and open up pr for that. So this is what I've built and what can show you is the manifest file. So we have for each of those tabs. We have three separate web parts and what I've done is I've added them into the static tabs for each of those web parts?

A

So that's, basically how you can get the tabbed effect for the personal app and, as you can see here, every single component here is built using the graph toolkit which is which made it made it really simple. So we have the agenda one. We have task and we have the get which basically gives you all the.

A

So this is one of my favorite component in graph toolkit, because if you don't have a particular component in the graph toolkit mind you it's also open source, you could go ahead and add new components, but if you don't find one, then you could go ahead and add your own template, which is files one here you can see and I'm passing the data that I received from the git component and then pushing it out so yeah. That's basically what I've done here and in this, uh so what I have done is.

A

I have simplified my work by reusing the graph toolkit. So I really don't have to worry about the data side of things just plugged and played rough components which is brilliant. The only service I've done is for the settings web part, basically because it refers to the open extensions. So to do my crud operations on settings. I have used the services for rough, uh which is basically here.

A

So you can find all this in the repository a big shout out to hoa, because this um this the sample is, uh has staining enabled, which is basically something inspired from one of his samples. As well so yeah, that's basically it go ahead and check out my blog or you could go to the repository and have a look at the source code. Thank you. So much.

B

Well, robbie, don't don't stop sharing that was super fast uh much faster than I certainly needed. So let's go back on the solution. I will ask some questions and, let's clarify, why are we doing things and all of that so, first of all on the craft services, you did a graph extension. So did I open graph extension? Why did you do that? What what is what is actually can we recap on why.

A

B

Choose to use this approach for the implementation.

A

Good question so personal tabs uh do not have a settings or a configuration panel for you like you, would see in a teams one. So if you have a teams tab you basically and you're using spfx, then you can get the web part configurations in same as you would get in your sharepoint pages. But personal tabs do not have that. There are different ways you could implement these settings, but I thought this was easier using an open extension because it's very similar to what you have the user profile properties in sharepoint, but more graph centric.

A

So you can basically call it anywhere yeah. So that's exactly why I went with the settings here.

B

It has to kind of have one one kind of a consideration. You mentioned the user profile properties in sharepoint, which is kind of a cool thing. We, if you come from a sharepoint world, you know about it. You can add an additional property against their stuff there, but you cannot automate that that's really the challenge yeah, but can you can you automate this one as part of the solution, deployment.

A

Yeah, definitely because it's a graph called so if you want, you can go ahead and use cli for microsoft, 365.

B

One other question: what I've? What I wanted to kind of also pinpoint here is that you're using your this is a personal application, that's really cool you can you can and the concept itself is absolutely brilliant. People can pull it down. They can extend that they can read back and set them, publish that to the store by the way, if you're interested everything is mit licensed it's. This is what we want you to do, but the fact that you created the manifest manually- why is that? Can we recap that decision.

A

Yeah so because we're adding more tabs here so, for example, I I'll open up here so yeah, so this one is our manifest, so we need to because we need to add all these web parts in to these static tabs. We need to go ahead and manually do it at the at the moment. This is the only way we could do it and yeah. So that's exactly why we have chosen this path.

B

So so, basically, when, if you would use the out-of-the-box sync to teams capability, we will actually generate an automatic manifest for all of the web parts, and in this case it would be three different solutions and that's.

A

Not a really optimal.

B

From any user perspective exactly we want to have a really complete solution, so we're kind of building that manual manifest, and this is actually by the way- an awesome example why we will now add an added capability of embedding the manifest uh inside of the spkt file, because that will then enable people like rabia and the developers to include the complex manifest like this kind of a complex configuration in the manifest and deploy that to that catalog can then automatically sync that to teams.

B

So you don't have to manually get the manifest package as a zip file, together with the color the images and then get it installed to the teams, which has to be done right now with the solution.

A

B

B

Sorry, the existing support is not super optimal, but we will get it more supported. Sorry.

A

Yeah, no, that's fine! I was just going to point to the documentation that waldek added here, so it's all captured here all the uh things that you need to keep in mind when you are considering these tabs so yeah. I would suggest everyone in this call to go and have a look at this very comprehensive article. Yeah.

B

Excellent. Thank you. Thank you.

A

Robbie on that one relatively quickly.

B

And sorry for jumping in there was just a few pointers which we wanted to talk about for the for the audience as well. It is a really really great solution and- and it's.

A

B

Demo to do as well so awesome.

B