Microsoft 365 Community Microsoft Graph Toolkit, 17 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using the Microsoft Graph Toolkit Get Component in your solutions

Description

In this 13-minute developer focused demo, Sébastien Levert covers the very flexible all-purpose GET query that allows developers to connect to any endpoint in Microsoft Graph and render the MTTs from Graph directly inside your app UI. E-mail and files explorer experiences are showcased. E-mail – get, read, write, delete, and the best part, you can customize the UI layout to your exact requirements. Files explorer is built using hTWOo and uses MGT. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 15, 2022.

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

Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Get component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/get
• MGT Playground – mgt-get | https://mgt.dev/?path=/story/components-mgt-get--get-email
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021 | https://youtu.be/JkgFrbtwdJU?t=476
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021 | https://youtu.be/HfBVaeGRDw8?t=2375
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022 | https://youtu.be/kZ_JwZpbJb4?t=1158
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022 | https://youtu.be/WU_CqJC5fyQ?t=2163
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022 | https://youtu.be/YG16snk1fJU?t=2424
• Microsoft Graph Toolkit – Using the Teams Channel Picker Component in your solutions – 25 January 2022 | https://youtu.be/F5JcbIlxSpo?t=2293
• Using the MGT Agenda and Tasks Components in your solutions – 1 February 2022 | https://youtu.be/Ddc0vZYAXDs?t=2619
• Using the MGT Files Components in your solutions – 8 February 2022 | https://youtu.be/AHF8poXLZ10?t=2198

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

Good morning, good afternoon, good evening, everybody today we will be completing our tour of all the microsoft graph. Toolkit components in the last couple of weeks went through all the different components that are made available via the microsoft craft toolkit and today we are completing it by looking at the one that was missing the one that can actually fill all the gaps that all the others might not deliver for your solution. So in that case we're gonna talk about the get component, just a little bit of a recap on what the microsoft graph toolkit is.

A

The graph toolkit is a collection of reusable framework, agnostic components and auth providers that allows you to access and work with microsoft, graph, so think about ready to go fully functional component that you can drag and drop into your web applications that automatically connects you to microsoft graph.

A

You can customize them and you can work with any framework, whether you're using react, angular vue.js, plain html, whatever you can use them all and you're going to be able to use them on all the modern browsers.

A

Why would you care about the graph toolkit? First? It enables you to cut on development time, it's really easy to add a ui component and get functionality right out of the box inside your app with just a couple of lines of code, they're, also beautiful, so they are built in microsoft 365. So they are really similar to the native controls that you can find in microsoft 365, but they also allow you to fully customize them to really bring the value and the brand and the look and feel you're expecting for your own components.

A

And finally, it just works everywhere. You want to work in teams. You want to work in sharepoint. You want to work in a web app. You want to work in electron wherever you want that web app to run you're going to be able to use the graph toolkit today component is the component that delivers all the value that you need.

A

In that case, it's called the get component think about the get component as being a generic component that allows you to connect to any resource any endpoint in microsoft graph and render these entities coming back from graph directly inside your ui. You can build. You can customize your ui, you can bring any type of controls in there and you can literally use the mgt get component as a way to get any data to cache it to secure it and then to render it.

A

So, let's go on to a little bit of a demo of two scenarios that I want to showcase with you today. So let's start with this, let me uh kill that guy here and now we are good to go. So let me just zoom in just one more step: it's gonna be easier.

A

So what we will be building today is two experiences, one around emails. As you have noticed, there is no current mgt email component.

A

We have had person, tasks, teams, channel, picker files and a bunch of others, but there is no email scenarios and why maybe it's because there is too much too much scenarios to cover so potentially it's easier for developers to build on top of the get component to have their own experiences rolled out.

A

So what does it mean for the developer? So, let's start with looking at our app. Our app is the same app we've been using since the beginning. We have been using the same id, the same mso provider, same authentication also, but now we're leveraging it in a little bit of different ways and why we have removed the scopes, because we're going to use different capabilities as part of the get components we will want the component to decide what are the scopes that they will require.

A

So that way, when we connect the first time we're going to have the constant screen only when we're going to run the mg to get component, you could have added all these scopes back to the mdm soft provider, but I wanted to make it a little bit cleaner in that case. So let me open the emails panel here and let's go and have a look and let's look at the code. I'm going to stick this I'm going to skip the styling.

A

We've done a couple of styling capabilities in the past with support css, we support any type of styling you'd be looking into with whatever the framework you're using. So you can basically bring your own style here here. It's just really plain css that we have in there. But let's start with this one here, the first thing we're going to find is we're going to find a component called mgt get.

A

That component will be identifying a specific resource, which is this one, and this one is one of the end points available on microsoft, graph, any input any endpoint that gives you a result back.

A

You will be able to use it within the mgt get component, but afterwards here you know that your component will require mail.tree, because that's what the messages endpoint requires, in that case mail.read, but you're going to see later, that we added capabilities to delete an email and to delete the email we're going to need mail.read write, so we were asking both of them.

A

We also have the capability here to say: hey. I want to have a maximum of one page, so it's going to get only the first page of results and will show it. So it's great for a scenario where you want to see your latest emails, maybe less ideal for a scenario where you want to see all your emails.

A

But in this case you could build on top of this to request the next page, for instance, and finally, in this case we're going to add a polling rate. We can automatically ask the component to re-render itself if the data changed every five seconds or 5 000 milliseconds in that case. So how do we do that? So, what's going to happen here, mgt get will emit the call to microsoft graph to this resource, using the authentication that we already have in place.

A

So it's going to be all secured, it's going to be connecting to the delegated user. That is using this application. So in that case myself and then we're going to use the template, the template here will bring all the data back from graph and we will be able to use some data properties to be able to iterate through our array of mails that are coming back and we're going to use the data for here.

A

So basically, here think about doing a for each email that is in value value is always the property that graph will return when there is an array of something.

A

So when you're getting a collection of messages, there's going to be a property called value in which you're going to have an array of emails, and that's what we're doing here so basically we're saying for every single email that exists in this array here. Please render this entire div, so you're going to have as many divs as you have emails in the value right there.

A

Here it's going to render a header the beauty of the mgt get component, but also the nature of web components is. You can also reuse other mgt components as part of a get response.

A

So in that case here we're just passing in the mgt person, and then it's gonna create a query to this email that sender that email address that address. So it's gonna use the email address of the person that sent the email and try to render an mgt person. That's gonna display the avatar and all these kind of things later on we're going to have in our comment bar we're going to have an area where you will want to click here. You can see it on the left on the right.

A

There's a small trash icon right there that allows you to delete this email. Well, how? How do you do that? You can register events and see when you're gonna click on this? I want you to call the delete click method I'm gonna see later on. What does it mean? So you really can build a lot of functionality here, you're, really within the context of mgt get you can build tons of behaviors within that component.

A

So it's it stays a single component same thing here when we are clicking on the email, that's going to open up a new window with the email, so it's going to be helpful to have that email click- and here you see we have the ability to register functions to run some logic here here. It's going to allow me to format a date based on the email received date time. So let me show you a little bit of that javascript code that just sits right here within that component.

A

First, we're gonna be able to get a reference to my mgt email id that I created. That is my mgt get component. I'm gonna add to the template context a get formatted date so automatically. I will be able to call into this specific one here on the email click I'm going to be able to take these properties that are being sent by mgt automatically to this event, and I will be able to get the contacts that email that web link and I will be able to open a new window and on delete.

A

I will be able to get an instance of my provider, the provider being the authenticated graph client that we have somewhere in mgt, and I will be able to use it to perform some activities on graph. In that case, I will be able to post the move of the item. Actually, when you delete something in outlook, you're actually moving it to the deleted item folder.

A

So that's what we're going to do here and afterwards we're going to refresh the ui, so it refreshes with the latest data and therefore will remove the data that we just added. So let me show you what it looks like here, but when I click on this, it opens up a new window with the actual email in there, so pretty useful. But when I click on delete, it's going to automatically delete it, delete it we'll be loading it, and now we are gone.

A

So with just a couple of lines of code, we are able to deliver a fully customized experience for end users. You can build whatever the ui you want. You can incorporate any ui framework, think about tailwind bootstrap fluent anything to make it look like your app or even your own ui framework, and you will be really able to build on top of the foundation of ngt but bring your own value in there.

A

Just before we finish. I just want to show you another example that we built a very different one that was built built by a good friend of mine wall, deck that built a files explorer built on another framework. In that case, it's called h2o, which delivers a very similar value, but it's all built using mgt, so you can really build the experience you're. Looking for in the way that you're looking for when ngt is not, it does not cover all the scenarios that you would want to have well mg to get.

A

Is your gateway to your crea to your own creativity? So um that's what I wanted to showcase for today quickly. Let me go back here just for one. Second, all the resources for mgt are available here the samples were already updated. So if you want to get the code for today's session, you can go to a.k.a.m mgt sandbox, and on top of that thanks everybody next week, we're going to talk about integrating with other platforms like react, spf, x teams and all of that so lissa back to you excellent.

A

Thank you sip on that one really really cool stuff and it's the get component or control is so cool. It's so flexible and makes magical things happen.