Microsoft 365 Community SharePoint, 14 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Graph Toolkit apps with SharePoint

Description

In this 10-minute developer focused demo, Sébastien Levert shows viewers just how easy it is to add Graph to an SPFx project - create a new yo project, install the mgt-spfx package (includes mgt library component that goes into your app catalog), and if using React, install the mgt-react component. Coding time! Import the SharePointProvider from mgt-spfx (handles authentication and connection to SPFx library component). Fast track SPFx projects with MGT components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 15, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Build a SharePoint web part with the Microsoft Graph Toolkit | aka.ms/mgt/spfx
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Platform Community community at: http://aka.ms/m365/community
• Visit the Microsoft 365 Platform Community YouTube channel: https://aka.ms/m365/videos

A

Well, we are today on episode 13 of our journey towards building applications with ngt or the microsoft craft toolkit. Today we will be focusing on building mgt apps with sharepoint and the sharepoint framework. So that's going to be very familiar to a lot of you folks in this room. So quick reminder: what is the microsoft graph toolkit? Well, the toolkit is a collection of reusable framework, agnostic components and auth providers that allow you to access marks of graph and that you work with it.

A

So basically, it's ready-made component that you can drag and drop into your solutions, you're building with code, where you can just simply get access to functionality that connects your app directly to microsoft, graph, while delivering value, not just data, but all the value automatically.

A

Why would you care about the graph toolkit? Well, first, it cuts on dev time. It will not take you hours to get a graph call going. It will not take you hours to get a visual of a graph call going no you're, basically minutes away from having something working in your sharepoint framework solutions, or even in your react stuff or in angular or in any of the frameworks you might be using it's beautiful and it's flexible. It looks like microsoft 365.

A

It integrates really really nicely with microsoft, 365, but also, if you want to make it your own, if you want to bring your own capabilities, your own design guidelines your own languages in there, you can also do it and also it works everywhere. You want to work in sharepoint. You want to work in teams, you want to work on the web. You want to work in electron. Any of that will allow you to be using mgt for any of your solution.

A

Mgt loves sharepoint framework and we have built components around some of the usage pattern that we see in sharepoint. We also build specific authentication providers to take advantage of what sharepoint framework provides to simplify the microsoft graph development, and that's exactly one of what I want to show you today with our demo. So how do we start? First, we create a new project yo at microsoft. Sharepoint you create a new project there.

A

I used the latest beta that was out last week, so I'm on a 1.15 beta. It works on any version of spfx. Then afterwards you install our mtt spfx package. That mgtspfx package allows you to connect to a library component that we have built. That is part of mgt, that you need to drop into your app catalog we're going to go through that, but it connects with this.

A

So you only have one instance of ngt on any of the pages you're using that's going to help a lot when you're going to build multiple web parts with the mgt components. And finally, if you're using react, you just install our mgt react component and from there you are good to go, and now you can actually code. So let me go into some of that code to show you how this works.

A

So first thing I want to show is the following: I'm just going to do that just for now, I'm in my app catalog, sadly vesa did not send me the magic link to get the new version of the app catalog. That's okay.

A

uh We saw that last week was awesome, but the app catalog is here. The reason. Why is we have our mgt spfx client-side solution? This solution is what drives the library component, and this is required to really have the best experience possible with mgt and sharepoint framework together. So when you're building mgt solutions always remember to go on to our um github ak dot. Ms mgt just download the latest mgt spfx package drop in here and deploy.

A

Then afterwards you can start coding. Let me do that. You can start coding fairly simple, there's, really very few capabilities that you need to add to your sharepoint framework to make it mgt enabled one of the things you're going to have to import our provider in our sharepoint provider from our ngtspfx package.

A

That mgds pfx package is what connects us to the mgtspfx library component and from there you will be able to initialize the authentication for sharepoint. So, for example, when we go a little bit further in on on init, that happens here, we're going to simply just say for my global provider. What provides the authentication for my uh entity component, I want it to be a sharepoint provider and I'm going to pass in the context of this web part.

A

What it's going to do it's going to allow any entity components to leverage some of the context in there. Basically, it's going to automatically authenticate to microsoft graph using the graph client that comes built in to spfx, so you're going to be all authenticated and going to have all the governance you need regarding all the permissions that are automatically granted to your sharepoint framework components.

A

Then afterwards, how do you code? How do you actually make it happen to add components, so you will come here and you're gonna just simply drop in the same way. We've done it in the past you're just dropping in an mgt component here here, I'm adding in an mgt react component, so my person with the queries that I need and when I go to my workbench, I'm just gonna- make it a little bit wider.

A

Well now you see that uh even if I reload you're gonna see that it's gonna automatically load my person here, it's gonna load using the person component that we have in mgt no login, no pop-up, no, nothing just straight capability and features for your users. So that's really really really easy to use.

A

Now, let's keep in mind that this is all connected to microsoft. Graph and spfx has a way to specify whether the permission so, if you want to add more capabilities than just me, because me is granted by default, if you want to add some capabilities, well, you're going to have to go to your sharepoint using the package solution. It's in the package solution file here, where you're going to define all the different web apis that you're looking at so I'm looking at microsoft, graph with calendar.read user.3.all, files.all sites, mail and people.read.

A

What it's going to allow me is to add more capabilities. All of the permissions that we're using are all documented on our documentation page where, for this component, you need these permissions once you approve them, you're going to be able to build, maybe more complex capabilities, for example.

A

If I do this here, what I'm doing I'm adding a pivot control. So that's a fluent ui component that gives me a tabbed experience where I'm going to have an agenda, a file list and a custom one with a get component in react. That's going to connect to my emails. So when I hit save on this one, it's going to reload it's going to rebuild my solution that currently runs on my machine and in one or two seconds I will be able to reload this and you're going to see how the experience will be seamless.

A

You won't have to think about any of the login components or whatsoever. Now you have your agenda, your files and all your emails right there. So by just adding these very, very quick things in here, you really have the full capability to build spfx solutions leveraging.

A

All of this, something also really cool that spfx provides, is the ability to promote or to sync an spfx solution to be used inside microsoft teams. This is an awesome capability that really delivers high value for our users, but teams, as we know, has a lot of theming capabilities and that's really great because well mgt does also. So. If I go to the exact same solution I have here, let me just make that a little bit bitter bigger if I reload my page you're gonna, see that all of my components are automatically in dark mode.

A

This is due to the fact that automatically I can hook up to the theme changes in spfx and automatically appending my mgt dark or mgt lite classes to my entire web part or just to a section of my web part, to make sure that my mgt components are all laid out in a nice dark way like you can see right now. So please have a look. Install mgt on your latest spf x, components.

A

Add your library component to your app catalog and you are good to go with spfx and mgt back to you. Visa.

B

Excellent, thank you. Sebastian really really cool and great to see also demos on 1.15 already at this point, and it's good to hear that you didn't run any issues with that so and cool looking templates by the way super super nice to see the new templates being used in sharepoint and teams as well. So thank you for showing those as well.