Microsoft 365 Community Microsoft Graph Toolkit, 30 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Microsoft Graph Toolkit apps with React

Description

In this 14-minute developer focused demo, Sébastien Levert reminds viewers that MGT is Framework agnostic. Case in point, if you're building apps with React, you can use Microsoft Graph Toolkit React components (mgt-react). Three items to get started - create a react app, select an MSAL provider for authentication and use MGT react components in your code. MGT react components look and behave like native react. In this demo, presenter looks at Login, Agenda, FileList and Get (for customizing) components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 1, 2022.

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

Supporting materials:
• Documentation - Microsoft Graph Toolkit React components | https://docs.microsoft.com/graph/toolkit/get-started/mgt-react
• Documentation - Use the Microsoft Graph Toolkit with React | https://docs.microsoft.com/graph/toolkit/get-started/use-toolkit-with-react
• 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 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

Well, folks, we are now at week 11 of doing a grand tour of the microsoft graph toolkit for the next couple of sessions. We will be looking at how you can integrate a toolkit in some of the frameworks that you might already be using today. We're going to start with.

A

How can we build apps using mgt, but with react? Since the beginning, we've been using plain html to showcase the versatility of the graph toolkit, but sometimes your framework of choice might be something else in just plain html, and you know how, in some of these frameworks, it might be difficult to actually leverage native html elements and custom elements that web components are providing. So today our focus will really be about react and what does it mean for you to utilize the graph toolkit within a react app.

A

So as a reminder, what is the microsoft graph toolkit? The toolkit is a collection of reusable framework, agnostic components and off providers that let you access and work with the microsoft graph. So it is a set of fully functional components that are already made that are drop components you can use in your apps. That requires basically very very, very few lines of code where you can build customizable experiences and that work with any frameworks and today will be a great example of this, because we're going to use it with react.

A

It also works on any modern browsers today. Why would you care about the the graph toolkit? Well first, it helps you cut on development time. You can easily add ui components to um access graph to your app with just a few lines of code. We could even probably make it a single line of code, a very long single line, but it could be possible to do it in just one line. It's beautiful, but it's flexible.

A

It is built to look like an m365 experience, but it's still fully customizable. So if you want to bring your own brand inside these components, it's absolutely possible. It's up to you to make it happen, and finally, it just works everywhere. You want to work in teams. You want to work in sharepoint. You want to work in your own single page application, or even you want to host it within electron.

A

Well, it's up to you. You do whatever you want. It works everywhere on every single browser, mgd loves react, and not only it's it's something that we see, but it's something that we're hearing a lot from the community.

A

18 months ago we launched our react wrappers for mgt, and we have seen huge uptake on mgt and react together. What does it mean? It means that it's so easy to get. It started that I'm not gonna even go through how to set up a react, project or whatsoever. I'm just gonna show you the three common lines you should be using, and that is it afterwards we're going to jump into code. So first, when you're thinking about creating an app well.

A

One of the ways I really like to create apps is to use the create react, app a set of functionality, so you just create an app that you would create an app in any for any of your react. Apps or you can even just leverage an existing app that has already been created. um In our case, we love to use typescript, but you can also use plain javascript here. Absolutely you install at microsoft, slash ngt react which will bring all the capabilities from mgt as react, components that afterwards you install your favorite provider.

A

So if you want to use msl provider, you might want to use a teams provider we're going to see that in the future example. Well, these will allow you to be ready to get started. That's the only thing you need to add to your project to get access to um into these. So let me go straight into code and let's show the demo.

A

So the first thing that I want to mention is that the root of your project, which is usually an index.js or an index of ts in my case, is where you want to do the setup for everything regarding authentication.

A

You want to make sure that the auth is is all prepared for all the components that will actually use uh microsoft. Craft will get. So how do we do that? In previous demos? You were adding a component to a page that was called the mgt msol 2 provider, where we're setting up some of the scope some of the ids here, we're going to do it through code because we don't want just to drag a component that would not really work in a react world. It's not really how react works. So how do we do it?

A

Well, we are creating a new msl2 provider that is coming from our mgtm cell to provider package and we're assigning it a couple of properties, the first one being the client id the client id that could either here be hard-coded or be part of your environment variables that you would be using with react and then a series of scopes.

A

These scopes are the different scopes that you want to use in your application.

A

Here, I'm predefining these scopes, but if you want, you can also leverage a very, very minimal set of scopes here and have the dynamic consent or incremental consent to pop up when you're, using capabilities when you're going uh deeper into your application. So let's say you want to use files in a specific area of your app. You could ask for that scope at that moment and not beforehand.

A

So in my index at ts, that's the only thing I have to do it's going to set up everything we need from an authentication standpoint, it's going to know. What's what's over there, uh our app is already pre-configured. Our azure ad app is already pre-configured, with basically just the url back to this local host that I'm using here, localhost 2000 and that's it so now your app is ready to be used.

A

It's preconfigured with mgt, and now what we're going to do is we're going to import some of these components from mgt to leverage them in our application. Our app here, we'll start with this. Here we will be providing a login component, and this login component is a react component. It's fully entirely rich. It has all the capabilities that you need from a react standpoint.

A

So if you want to add some of these properties, you're going to be able to leverage or autocomplete right there, you can see everything that is here all of the different properties that are available.

A

You can even go to aka rms, slash, mgt, slash dots where you can find the the all the components that we have, for example the login component, and you want to see all the different properties well you're, going to see them here. Well in in our case, we don't have a lot of properties here on the on the login component, where there's, basically only the user details.

A

But here you see, the attribute will be for plain html and the property would be the one to be used with react.

A

So very simple way of documenting everything is in a single place, super easy to get that going and now, when I do the login automatically, I can actually let me just remove all of this, so we don't have to see it happening.

A

And now, when I refresh, I just see my component right here and I see the component showing up right in here- nothing to change it.

A

Just logs you in in my case I was already logged in I was- I already consented to my app, but besides that it's the same component that was used when we were using the html components now we're using the full on um react components, and the second thing I want to show is how we have built this, these these components in a way that they feel native to react, something that we did is we provided border play code to get some of the hooks that you might want.

A

For example, here we provided a use is signed in hook where you can create the hook and understand when there are some changes in the login capability. So when I'm signed in now, I'm going to receive is signed in to true what will that deliver? To my app, I will be able to get a reference this is signed in and I will be able to use react to protect areas of my app. I want the user to be signed in before you can showcase this component and that's exactly what we're doing here.

A

So when I I save this now- and I save this actually, if I do something bad, oh it's good and now automatically because I'm signed in I can have all of these components show up what are these components? First, there's the agenda component.

A

All the components we have in mtt are available as react components, so don't think that there's one or the other all of them are available, and today I want to showcase three of them, so the agenda um where I could also see, for example, group by day I can just say this- is true, and I want to do it right there, saving this and now I have it grouped by day.

A

So, depending on your use cases, you can configure the components the exact same way you do it in html, but now you're doing it natively with react. The second component that I wanted to share is the file list. The file list is here. I have a really really good file list right here, where I can show more items where I can see all of them, so this file list with all the properties that you can find is also available. This is a composition of multiple components.

A

We have including the file the file list and all of that, so it really feels natural when you're using them within react.

A

Something that we also showed a couple of weeks ago was the use of custom components, namely the get component that was allowing you to basically get access to any endpoints and graph when you're thinking that oh, I might not have all the capabilities, I need with the feature set of the graph toolkit, but I want to still use graph to get data, for example from my emails, but mgt doesn't have an email component. How do I do that?

A

Well, this is where we now have a way to have a get component, with the exact same capabilities that we have on the mgt get custom element, which is our web component. So here you just need to specify some of the resources you need. In that case, the resource, the max pages, all of them in in a very react way, and we also support custom templating of every single react components in mgt components.

A

So you've seen already in the past in some of our session that you we could change the way it looks, or even we could change the actual html for sections of the components. Well, in our case, that's exactly what we're doing here. So what we're doing is we are leveraging native react components. So, for example, here I have my email component that will overwrite the template.

A

That is called value if you go to the documentation, you're going to see that we're going to have a value, compo or value template that is used for every single item of an array. So in my case what I did I created a very simple emails component, all built in react.

A

Where I can embed all my logic here, I can have all my different divs. I can even use other mgt component here, I'm using the person component again, I can do all the really normal things that I would do with react and when I go to the emails tab now, you're going to see that we have a great experience here, because we have all of these great components showing up all using the underlying foundation of the graph toolkit, which will do all the caching all the logic, all the paging, all the batching.

A

For you, the only thing you have to care about is to build the html of your component. So don't stop at looking at the current feature set of mgt. You can always build your own components when you feel that this is absolutely required. So how do we do that here? We just need to provide a property here that would be an ng template, props and automatically. You will be able to identify what's happening once the data is being passed to you and you're going to be able to display that straight on the screen.

A

So a couple of resources before we end- and I give it uh it back to you vesa thanks for today, our next couple of sessions we'll continue building. On top of this we're gonna talk about teams, angular sharepoint framework.