Microsoft 365 Community Microsoft Graph Toolkit, 10 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with Microsoft Graph Toolkit and SharePoint Framework

Description

In this 11-minute developer-focused demo, Yves Habersaat articulates how the Microsoft Graph Toolkit (MGT) together with SharePoint Framework (SPFx) and custom templates work together to display agendas, files, tasks, messages and more. To set up your environment - install mgt-spfx, mgt-spfx npm, and mgt React components packages. Instantiate the SharePointProvider. Finally, import selected MGT React components into your web part and grant permissions to SPO. See how presenter uses GET component and renders results in custom templates. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Yves Habersaat (Sword Group) | @yhabersaat

Supporting materials:
• Repo – Microsoft Graph Toolkit - v2.4.0 | https://github.com/microsoftgraph/microsoft-graph-toolkit/releases
• Demo - Using the Microsoft Graph Toolkit Get Component in your solutions – Sébastien Levert (Microsoft) | @sebastienlevert – https://youtu.be/9w2L3-7sCDI?t=2432
• 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

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

Welcome everybody so today, I'm just making a demo on getting started with microsoft, graph, toolkit and sharpen framework. So my name is eva barcat, I'm a business application consultant at sword group. So basically I'm working uh everything related to microsoft, 365, azure dynamics, 365 and poor platform, I'm based in switzerland in lausanne, I'm also a microsoft mvp in the office development category, I'm the only one in switzerland as active mvp in this category. So this is great stuff and I'm also a microsoft certified trainer.

A

If you have any questions so feel free to reach me out on my social networks or directly on my on my blog I'm trying to answer every every time. I have some question or technical uh enquiries, so just for for this demo just a quick overview of the configuration. So basically I'm using windows 10, I will use node version 1481.

A

I will use sharpen framework 114 and I will use mgt spfx package, the last the latest version- and I will start with a web part solution with a react framework, and I will use mgt react in the latest version 2.. So basically, this is a version released. This monday, so this is pretty fresh, so just to start the the first step to configure a project, you need to manage the sharpen framework library for microsoft, graph toolkit.

A

So basically, first you need to deploy the mgt spf package from the github public repository and you need to deploy this package on your tenant app catalog. So I will show you the link in the demo.

A

Then in your project, you need to install the mgt spf x, npn package, with the same version number of the mjt spfx package from your tenant, app catalog. So basically, if you have an existing project, feel free to upgrade it or install the latest version in the tenant, app catalog and inside your project. So basically you need to to use npm install at microsoft or mgtx prefix at latest for upgrading an existing project if you want to deploy the latest version.

A

So this is the first step, the second step, if you want to use the mgt rear components, you need to install the mtt react npm package and you will get all the react components from the toolkit.

A

The third step is to instantiate the sharpness provider. So basically you need to import providers and sharpen providers from the mgts prefix package. As you can see on the screen, then you need to instantiate the sharpen provider in the oninis method of the webpart file. So basically, as you can see, you just instantiate the sharpen provider and you pass the context as parameter.

A

The fourth uh step is to use simply to use the real components. In my case, it's based on react. So first you need to import the required components. So, for example, you have agenda, you have person, file, list task and so on. So basically you have to import this before using it and after feel, free to use all the components inside your web.

A

So basically for example, agenda as you can see, you can group by day and you have the same capabilities than other web solutions or web development project great and the last thing is permissions. So basically you have two way.

A

The first is just to declare the all the permissions inside the package, the solution.json file and after you need to approve or reject through the sharepoint admin center or if you want, you can use also the great cli for microsoft, 365 and you have a command mpc, five spo service principal grant ad and you can add the resource and the scope to grant directly the permission to the sharpened online app in azure.

A

So this is the steps and now that's a quick demo, so I'm switching back to visual studio code. So basically, is the first step just to show you because it's really important, so you need to deploy the microsoft graph toolkit library. So basically you go through this link and you deploy this package. So basically, this is the latest one, the 240.

A

you deploy this inside your tenant, app catalog. In my case, I've just deployed this fresh version, so this is the latest one and when it's done it's okay and you can directly import two things. The first thing is the mgt spf x library, so you need to use npm install and you install the mjs prefix package. Second, you install the mgt react in the same version. You see.

A

The version is the same and after that you are ready to use the components so basically, the first step after installing those two packages is to go in the wet part side and, for example, in my case, I'm just importing the providers and sharepoint providers from the mgt spfx, just after um instantiate the sharpen provider inside the units method. So basically you see I'm passing the context of the webpart directly in the sharpen provider and after that, I'm ready to use these components inside my components.

A

So basically I've made just a simple web part project to show you a little more things about this toolkit. So basically you see I'm just importing. As you can see. Sorry, it's a little bit long, but I'm importing a lot of components so, for example, agenda person, sorry person, finalist task and so on and after I can use it directly inside this little project. So I made just a quick, a quick project. I will just show you the render. So the render is like this. It's pretty simple.

A

You see, you have a lot of components, so basically I've made some files, some tasks to do, and I have also two two sections: where I'm using the get components and one of my favorite, because with the get component, you can query any endpoint on microsoft graph with a get request. So basically you can get emails. You can get your join team, for example, it's pretty simple, but it's just to show you the behavior, but in my case I can request all the teams I belong to.

A

So basically, if I show you the code, it's pretty simple, so basically you use as a other web development project. You have the the react components and, for example, I have the person component. I'm getting my profile, you see you can customize the data type, I'm putting my photo. You have the card interaction in my case, uh I'm putting a hover behavior to display some advanced detail of my my profile when I go over the card.

A

Basically, you see you have the agenda, it's pretty simple, just to show you uh the basic stuff, but you can group by there. You can show a max number of items. You have the the file file list, so basically you can enable the upload process, and so on. You have the task. You have the to-do and my favorite, because in my recent experience I'm using a lot these get components.

A

So basically, in my case, I'm just getting my messages, you see you provide the graph get query, then I'm using the v1 and you have the scopes. So basically, this is the card here. So basically, meld.read is the scope to use to get the email and, after I'm providing just a property, matched pages to restrict the number of items and after the great thing with the get you can create a template.

A

So basically, in my case, I've declared a mail template and you can retrieve all the data context and the data context contains all the properties from microsoft graph and I can use all these properties inside my template. So you see I can display the subject. I can display the person component with the person query. As you see the address the email address of the of the sender.

A

This is really really cool to interact and integrate some other components like, for example, person, query or like a person component or like this, and after I'm just checking the body preview, and with that you have like this, you see you have all your mails with the sender, the title and the body preview. So you see you can create your own template with all the property you want and you render, as you want inside your report.

A

So this is really really powerful and after the second one is for my teams, you see I'm just getting the teams. I belong to v12, so get the the scope inside this template is teams.basic.org.

A

So basically, this is the scope, the permission to retrieve all these properties and information from microsoft, graph and after I'm just restricting with match pages onto and like the mail. You have, for example, the team template, and in my case you see the team template. I can retrieve the data context and with the data context, I'm just displaying some properties like, for example, in my case, I'm putting just a teams icon and I'm putting the display name of the team and the description, and in this case the renderer is like this.

A

So you see you can retrieve all your teams and render all the properties with the custom templates. This is really powerful because you can, as I said before, query all the endpoint with the get query and you retrieve all the properties and you render, as you want, with the custom template.

A

So basically, this is really powerful and I saw that sebastian luvert will will make a presentation based on uh maybe advanced concepts. So basically, this was my. This was my demo. This wee. This demo was just to show you the basic stuff on how to get started with a microsoft graph, toolkit and chapel framework and for advanced stuff. Maybe I will make another demo with a more advanced concept, but the goal of today it was just to show you how to get started, the exact steps and maybe some some cool stuff like the get component.

A

So it's finished on my side and if no question back to you patrick, thank you right demo, great work on that and I don't know it looked pretty advanced to me so excellent stuff. There excited for folks to check that out in the sample gallery.