Microsoft 365 Community Microsoft Graph, 8 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Virtual Conference - 09/2020 - Integrate Microsoft Graph in your solutions with MS Graph Toolkit

Description

Microsoft Graph is the "glue" that binds many of the Microsoft 365 and Microsoft SharePoint Online components together, but it can be daunting for a developer to start using it. But it does not need to be! In this session, you'll learn how you can use the Microsoft Graph Toolkit in your Microsoft SharePoint Online web parts to display data from Microsoft Graph with little or no code.

Speakers:
Hugo Bernier (Tahoe Ninjas) | @bernierh
David Warner II (Catapult Systems) | @DavidWarnerII

Supporting materials:
• Microsoft Graph Toolkit: Web Components powered by Microsoft Graph - https://docs.microsoft.com/en-us/graph/toolkit/overview
• Get started with the Microsoft Graph Toolkit - https://docs.microsoft.com/en-us/graph/toolkit/get-started
• Microsoft Graph Toolkit - https://github.com/microsoftgraph/microsoft-graph-toolkit

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Welcome to integrate microsoft graph in your solutions using the microsoft graph toolkit. My name is hugo bernier.

B

And my name is david warner today.

A

David and I will introduce each other david warner is principal consultant for catapult systems, he's a fantastic microsoft, 365 office, development, mvp and a proud member of the pmp team. He loves hockey and football, and he loves collaborating with the community. You can reach him at warner.digital or on twitter at david warner iii.

B

And that gives me the great pleasure of introducing hugo hugo is an enterprise architect, also a pnp team member and a microsoft 365 office development mvp. While he's not a hockey and football fan, he is passionate about cooking and definitely knows his way around the kitchen. You can reach out and see more about hugo at tahoe ninjas, dot blog. Where he's been blogging since before sharepoint was sharepoint, you can also interact with him on twitter at twitter.com forward. Slash bernier h, let's briefly review the agenda for today's session.

B

We're going to begin with what is the microsoft graph toolkit or as you'll commonly hear us refer to it, mgt we're going to discuss why to use the toolkit and then we're going to review some mgt prerequisites, we'll also create a sharepoint framework web part using the microsoft graph toolkit and then we'll talk about some next steps that we can all take together to take advantage of additional features of the mgt. While we're focusing primarily in this session on the microsoft graph toolkit. Let's provide a quick glimpse to exactly what microsoft graph is.

B

It's a single point, api that exposes and provides access to data within services such as microsoft, 365, enterprise, mobility and security services, windows, 10 services and dynamics 365.. So what's the microsoft.

A

Graph toolkit: well, it's a collection of reusable framework, agnostic, web components and helpers that you can use to access and work with the microsoft graph.

A

It's fully functional out of the box and it's got built-in providers, so you can authenticate and fetch the data from the microsoft graph, but probably the best way to explain it is to actually show you some of the components if you go to aka dot. Ms slash mgt it'll, take you to the microsoft graph toolkit github site and in there it will actually show you some basic information about the microsoft craft toolkit.

A

But what's interesting here is this list of components that you can use to log in the person person card and so on that allows you to access data from your microsoft, graph, api and displayed.

A

It also includes some providers which we'll discuss a bit later, a great way to test the microsoft craft toolkit is to go to mgt.dev, which will take you to the developer, sandbox that you can use to actually test the components. The.

B

A

Developer sandbox is made of two sections on the right. Side is a pane where you can see the html, the javascript and the css, and on the.

B

A

You'll see the components as they are rendered on a web page at the top is a login component which will prompt users to log in if they're not logged in yet, but if they are logged in it will show who they're currently logged in as and below. That is the agenda component, which will show the person's agenda there's various other controls that are available.

A

For example, the people control, which shows me a bunch of people in a group.

A

A

Picker the person profile.

A

The person card, which shows me information about a person in a card format,.

A

The tasks component, which shows me tasks for a.

A

Person and the team's channel picker, which allows me to find channels in a team.

A

Why would you use the microsoft craft toolkit? Well? The first thing is because it cuts development time. You know the work that you need to connect to the microsoft graph api and to render the data in a user interface that looks and feels like the microsoft 365.

A

That's all done for you. You don't need to customize anything. It also works everywhere. All the components are based on the web standards and they work seamlessly with any modern browser and web framework.

A

So that includes react, angular view and in today's demonstration we're going to be using the react framework, but you could absolutely just use javascript without any framework if you wanted to.

A

Finally, it's beautiful but flexible, the components are designed to look and feel like microsoft, 365 experiences but they're also highly customizable. You can use css custom properties and you can use templating to make it look.

B

Like what you need before we begin using the mgt within any sharepoint web parts or solutions, let's spend a moment and talk about some of the requirements. There is a specific microsoft graph toolkit package that we install using the at microsoft, slash mgt command, as you can see in the slide. Now, if you are also using react within your solution, you'll need to install the mgt react components using the at microsoft forward. Slash mgt hyphen react command. Now it's important to note that both of these are required. If you are using react.

B

Additionally, if you need to support browsers such as ie 11, polyfills may be needed, ultimately to be successful with the microsoft graph toolkit typescript 3.7 is required, but at this time the default yeoman generator does not support scaffolding. A new sharepoint framework project using typescript 3.7, although not all hope, is lost the pnp spfx yeoman generator does support the installation of typescript 3.7 when scaffolding a new sharepoint solution. So it's highly encouraged to use the pnp spfx yeoman generator.

B

Now, if you happen to scaffold a new sharepoint framework project using the default yeoman generator, there are steps you can take manually to upgrade the solution to typescript 3.7.

B

But if you forget to take these steps- or perhaps you do not use the pnp spfx yeoman generator, you will encounter this nasty error within your console when you gulp serve the sharepoint framework solution. Now you might be curious if there are any risks associated with using the pnp spfx yeoman generator. Instead of the default microsoft provided sharepoint yeoman generator. The answer is: there are absolutely no risks whatsoever.

B

In fact, the pnp spfx yeoman generator is using the microsoft provided sharepoint yeoman generator behind the scenes to scaffold out the sharepoint solution, but provides the benefit of also scaffolding out additional libraries and frameworks that are not included with the default generator. So you really get the best of both worlds when using the pnp spfx generator saving you time that you would need to be spending manually installing these frameworks and libraries that you love and want to use.

B

Now, let's pass it back to my good friend hugo for a demo on how to install the pnp spfx yeoman generator.

A

If you don't have the pmp yeoman generator, I don't think we can be friends anymore to install the yeoman generator. What you do is you go to command prompt and you type npm.

A

Install dash g because you want the generator to be installed globally and then add pnp, slash generator, dash, spfx.

A

A

That's it, and if you want to verify that your generator is installed, you can just type yo yo.

B

Will call yeoman.

A

And yeoman will actually list all the generators that you have installed. You should have the pnp spfx generator and you should have the microsoft sharepoint generator. You.

B

A

Other generators as well, but these are the two that we'll need for today: okay,.

B

So now we're ready.

A

To create a project I like to create all my project in a folder called spfx, so I will change to my svfx folder and I also like to create a subfolder for every project that I create we'll call this project, hello mgt. So what I'll do here is I'll type, md, hello, mgt and we'll change to hello mgt.

A

Now this is where you would type yo at microsoft. Sharepoint. However, as we discussed before, I need a very specific version of typescript for my project using microsoft, graph toolkit and the regular microsoft. Yeoman generator does not give you the ability to select a version of typescript.

A

You can still go in and change the version typescript after your project's been created, but it's so much easier to just use the pnp yeoman generator so I'll, just type yo at pnp, spf, x and launch the generator we'll select the microsoft sharepoint online, we'll use react.js, and normally you would select the libraries you want to include. But for this demo we're not going to use any library hit enter, and this is the part where it's asking you for the version of typescript and as we discussed before, you need version 3.7 or higher.

A

So let's go select 3.7 enter normally. I would use all these options here because I like to use every tool available to make my projects clean, but for the purpose of this demo we're not going to use any of these options. We also won't use any options for pipeline or testing.

A

Let's hit enter now, it's asking what you want to call the solution. Hello, mgt is the default, that's good. We already created the subfolder for this, so use the current folder and we want this to be deployed automatically. No, so we'll just hit in and will the components in the solution require permissions? Yes, so we will type y enter what kind of project we want to create. It's a web part project, we'll call the web part, hello, mgt and let's just something like demonstrates how to use the microsoft graph toolkit.

A

So now it downloads all the modules that it needs all the dependencies that it needs to create the spfx project. It takes a little bit of time and it really depends on how much ram you have on your computer and your internet speed. Once that's done, we're ready to add the microsoft graph toolkit modules to do this, we'll use npm install so, let's type npm install at microsoft, slash mgt for microsoft, graph toolkit once that's done, we'll add the npm install for the microsoft graph.

A

Toolkit dash react so mgt dash react which makes it easy for you to use microsoft graph toolkit in a react project. Okay, so now we'll just open the project using our favorite code editor, I like to use visual studio code, so I'll type code, dot which will open the current folder and visual studio code.

B

To successfully access microsoft, graph data within spfx or even a completely custom office, app authentication is required. The mgt providers help automate that authentication request process. Now, if you're a developer, who has ever had to code custom authentication access in the past, the extreme value of the providers handling. This task for us is clearly evident.

B

So let's take a moment and review the documentation for the mgt providers, beginning from a blank browser window, we can access the documentation for the mgt, with the following url aka dot, ms forward slash, mgt, hyphen docs, then, within the left, navigation, there's a four providers.

B

If we expand providers, we can begin by clicking on using the providers. Now, at the present time, there are five built-in providers included with the mgt. Each of the providers is well documented, along with samples and instructions on using the providers, for example, the msl provider. Documentation includes instructions and samples on initializing within a web application. Alternatively, if you were building a team solution using spfx, you would find instructions on the microsoft teams provider documentation.

B

This documentation even includes instructions on how to initialize the provider using either a script tag directly within html, as we can see in this sample, or we can use npm modules, as is identified here within this collection of samples in this session. We're building an spfx web part so we'll demonstrate how to use the sharepoint provider you can get to it by selecting the sharepoint provider in the left navigation, because a user who is logged into sharepoint is technically already authenticated.

B

The effort involved in initializing the sharepoint provider is super, easy and amazingly convenient.

A

Now, once again, I'm going to hand.

B

The stage back to hugo for a live and in living color demo of initializing the sharepoint provider in an spfx web part before.

A

We can use the microsoft craft toolkit components, we need to initialize the provider and to do so we'll just go to the webart, hello, mgt, webpart and we'll just add an import.

A

So let's just I like to always put comments so we're using this for the mgd and we'll import, we'll import the providers and the sharepoint provider from from the microsoft slash mgt, and then we just need to initialize the provider, and we do that in the asynchronous on init method.

A

All we need to do is we say the providers.

A

Dot global provider is equal to new sharepoint provider and we pass the current webpart contacts.

A

So doing that will automatically initialize the provider with the current contacts when the web part starts to start using the mgt components, we just need to go to the component folder and or hello mgt.tsx, which is what renders your web part we'll start by, removing all the html that's rendered inside the web part. We just want a blank web part to start we'll, also remove the reference to the escape function and we'll add an import.

A

Let's start by adding a person component.

A

That will show the currently logged on person, so import person from mgt dash react semicolon and then let's go in our web part where we render the html and, let's just add a person.

A

So that's using the mgt person component again and we're now supposed to provide a person. Query I'll just pass me. So what I'm saying is retrieve my information and display my information when the web part runs okay, so now we'll go update the package solution from the web part and we'll tell the web part what kind of permissions it'll be using so that we can allow those permissions later. So the first thing to do is to say that it's not domain isolated, so we'll change that to false and then.

B

I will paste.

A

A whole bunch of permissions that I had previously previously created. What you need to do here is to say web api permission request and then a series of resource and scope. All the resource should always be microsoft. Graph, because that's what we're using, but you want to specify whatever permissions your web part will need, because I'm using a whole bunch of controls in this demo. I'm importing all these permissions don't forget to put a comma at the end, and that's really all we need.

B

After reviewing the amount of permissions that are being requested within this control, you may be wondering how you determine which permissions to request to help you identify which permissions you need to request approval on the best place to start is the documentation you can easily get to the documentation by using aka dot. Ms forward slash mgt hyphen docs, once you're on the documentation pages, you can get to the different mgt components here on the left under components.

B

When you expand the components section, you have a variety of components that you can select from. Let's start with the person component once you're on the person component, documentation page, if you scroll all the way to the bottom, you can see the different permissions that are available for that specific component. Now you may or may not need all of the permissions available on this specific component.

B

For example, if you need to access your own personal information, you would request the permission for user.read. If you needed to access information on other people, you would request permission on people.read.

A

Alright, so back on visual studio, what we want to do now is build and bundle the web parts, so we can upload it to sharepoint to do.

B

A

I like to use the built-in terminal, and I do control shift tilde, which will open the terminal in the window. Why do I use this? Why don't I just switch to my command prompt that I use to get started is because I like to see when I get.

B

A

I like to be able to click on the error message and it'll open the file that has an error you can use. Whichever approach you prefer first thing we'll do is we'll do gulp build to see that our solution builds successfully now, if everything we've done so far is correct, we shouldn't have any errors here.

A

Let's just see beautiful now, we'll actually tell it to bundle now. Normally you you'll, probably type gulp bundle.

B

A

To prepare your web part to ship, but we're not trying to build a web part that is ship ready. Yet we're just trying to create a web part that we want to bundles and package so that we can upload it and later we'll make it a ship ready solution.

A

Great last step, gulp package.

A

Solution does the sppkg file that we'll need to upload to sharepoint so.

B

A

A new sppkg file what I like to do once the sppkg file.

B

A

I just like to right: click on it say reveal file explorer, so I can find it and then switch to a sharepoint, app catalog on your tenant and just drag and drop. It.

A

It'll ask you to approve all these permissions and it's telling you please go to the api management page to approve pending permissions. It's.

B

Important to also take notice that when we do not use the dash dash ship parameter when the web part is deployed, it's going to be looking for the solution to be running in our local host using gulp serve. That's why we see the local host port 4321 listed as the domain for where this web part will get its content from.

A

That's a very good point. Thank you david once it's deployed, let's just make sure that it's there and it shows up right here and it's checked in so we're ready to go okay. So now I will have to ask my favorite sharepoint administrator to go. Approve the api permissions david.

B

Hugo, it would be my pleasure to approve the api requests made within the web part we'll start by going to our sharepoint admin center. You can find this at your tenant name, dash admin, dot, sharepoint.com. You can find the api request under advanced and api access now.

A

B

It first loads, it may look like there are no requests pending, but sometimes they're, just a little slow to load, as we saw here. It showed zero and as the page loaded, we saw the requests populate onto the page. Now we have to go through each of these requests and approve them. We see that it's making the request here for us and who has made the request, in which case it was hugo bernier.

B

It also shows the read or permissions that we're asking to approve so we'll hit approve, and now we see that that user.read has moved into the approved state, we'll want to go through each of these, and so we'll speed up the video for that. While we make those.

B

B

All right now that we've approved the requests we'll hand it back to hugo for the next part of the demo. Wonderful.

A

The api permissions are approved, we have a webpart, that's ready to test, so let's run gulp serve and I'll put no browser, because I don't want to launch the local workbench. I wanted to test it on the hosted workbench.

A

And as soon as you see reload in the output, that's when you know you can switch to your hosted workbench.

B

You can find the hosted.

A

Workbench at your sharepoint url, slash, underscore layouts, slash, 15, slash workbench.aspx, so.

B

A

See here it's loading my profile information, it's not very exciting yet, but let's go switch here instead of saying me: let's actually put david, so I'm saying look for a person whose username is called david in our test tenant. It just so happens that there's only one david and if I refresh the page here I should see, are only david.

A

I have to admit I'm still a little bit underwhelmed. Let's see what else we can do if we look at the documentation, if you scroll to the properties section you'll see that we can pass either attributes or properties. The attributes are really reserved for if using the microsoft graph toolkit in html, not in react.

B

If you're using.

A

React you'll probably want to look at the property and you'll see that there's quite a few things here. I can set, for example, the person query which we've already used, but you can actually specify things like the.

B

A

The person's details, the presence for this sample- we don't want to hard code, any person, details or images, but you could absolutely do that if you wanted to or retrieve the information from another system and show this information here, there are three properties that we can set, show presence, show name and show email which allows you to set true or false.

A

You'll notice that the show name and show email are actually defecated and it tells you to use the view properties but, depending on the version of the mgt react component, those properties might not be available to you. So let's go to the code and set up, show, presence, show, name and show email. So here in the code, I'll type show email equals.

A

True, show name equals true and show presence equals true, and when we refresh the page now we'll see that the name and the email, as well as the presence is showing, but we can do something better. Let's pick a different component: let's pick the agenda component, which is supposed to show the events for a user or group calendar. So it shows you an example of what it looks like, but if we scroll down you'll see that to use it in html, you would just type mgt-agenda if you're using the react components.

A

However, you just use the component name without the mgt dash prefix. The properties that we can specify here are things like date days, maximum number of events to show and so on. Let's go try that first thing we'll do is we'll get rid of this component, we'll change here and we'll import the agenda component and here we'll just add the agenda with just no additional parameters and now you'll see that it's showing my agenda for the next few days, but wait there's more. The mgd components also support custom templates.

A

So if you click on the templates section of the documentation, you'll see that there's a few templates that are available and each component has a different set of templates. Here you see a table that explains the type of data that you'll be receiving the data context that you'll be receiving and how the template is used. So, for example, if I wanted to customize the event template and the no data template to show when there's no events available, I would use this behavior. Let's.

B

A

In order to use templating, we need to import mgt template props in the render.

B

A

I will say: const my event is equal to and then I'll pass it some properties that are going to be of type mgt template props. First thing that the my event template is going to receive is the event, and we know.

B

A

Because if we look back at the documentation, it says that the event template receives an event object and that's contained inside the prop data context. Finally, we'll return the html that we want to produce so we'll say return and, let's just say, we'll return, a div that contains the subject of the event so we'll say event dot subject, we'll also create another template for the no events, so constant. No events is equal to we'll do the same thing: props, mgt, template props.

B

A

If we go look at the documentation again, when we want the no data template, it says no data context is passed, so we're going to skip the part where we get the data context and we'll just return something like return.

B

A

No events were found.

B

Okay, so now we've.

A

Created two template: again: you could have created react classes to do this. uh One thing I'll change here is because we're not using this props I'll, just use underscore in front of the property name so that we know that it's unused and now we'll go inside the agenda component, we'll turn it into a block element and we'll just as a child object. We'll say I want my event and we'll tell it that the template that we wanted to use is the event template and the no event template will be the no data.

A

Wherever I get these template names again. We look at the documentation and it says the event. Data type event is a template for rendering each event and the.

B

A

Template is a template used when no events are available.

B

Okay, so unless I did something wrong.

A

Here, if I go refresh, I get my individual events with just the event subject inside of a div, but if I go change the date, I won't have any events happening. If I go refresh, I will get no events for family, so we're actually we're creating custom elements that can be rendered, as templates for the microsoft graph toolkit components, that's pretty cool, because now I can do anything. I want and you'll notice that I'm not limiting myself to mgt components. I can be using fluent components.

A

I could be using pnp, reusable components if I wanted to, because these are now just react bonus. If I was doing this in real life, I would probably move these as their own react classes, so the code would be separated. But if you think about what we did here today, we actually connected to the microsoft graph using the microsoft graph toolkit inside of an spfx solution. We retrieved data from the microsoft graph and then we rendered it using a custom template using very little code, and this.

B

Concludes our demo in this session we've covered a lot of ground in the short time we've had together. So far, we've learned about the pnp spfx yeoman generator mgt providers and components and custom templates, but even with all of that, there's still so much more to cover for the microsoft graph toolkit some next step areas. We recommend you look into are exploring more of the available components, css, custom properties, templating components and custom graph calls.

B

Now, if you would like to see hugo- and I cover any of these sessions in additional videos, please don't hesitate to reach out and let us know on behalf of the entire pnp team. We hope you have found the virtual conference valuable and would love to hear any feedback you may have, please feel free to use the feedback url displayed in the slide or snap a picture of the qr code to provide your feedback and last but not least, we'd like to thank you for attending our session.

A