Microsoft 365 Community SharePoint, 28 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building personal events web part with SPFx and Microsoft Graph Toolkit

Description

For this 15-minute Developer-focused demo, Hugo Bernier delivers a demo on behalf of web part creator João Mendes showing viewers a web part that displays your upcoming calendar events. Built leveraging the Microsoft Graph Toolkit in SPFx and customized using Fluent UI Fabric Controls, this web part supports themes, section background colors, and may be used as SharePoint web part, a Microsoft Teams personal app or a Teams tab. Each event displays details using the Fluent UI document card control in a calendar view. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 28, 2021.

Demo Presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Sample creator: João Mendes | @joaojmendes

Supporting materials:
• Source code - React-mgtEvents | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-mgtEvents
• Samples - Samples by JavaScript Framework | https://aka.ms/spfx-webparts
• Sandbox - Microsoft Graph Toolkit Playground | https://mgt.dev/

Learn more:
• SharePoint Framework documentation - https://aka.ms/spfx
• 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

Thanks everyone for joining, my name is hugo bernier and I curate the spfx samples repository. So I review all the samples and I merge the pull requests and when I merge the pull request for a new sample, I usually reach out to the authors of the samples and ask them to present on this call.

A

Joao mendez is a senior microsoft, 365, architect and solution, developer who's created and submitted many amazing samples, but usually because of scheduling conflicts. He rarely has the opportunity to present his contributions on these calls, so today I'll be presenting one of joao's latest samples on his behalf.

A

I hope that I'll be doing joao's work justice, if you like the demo, please send your kudos to joao. If you don't like it, you can absolutely blame me all right, so the sample that joao submitted is something that allows you to show your upcoming calendar events using the microsoft graph toolkit.

A

You can usually recognize java's samples because they always look very professional. In fact, it's it's often very difficult to distinguish his web parts from the out of the box, microsoft, 365 and if you know me, that's one of my you know holy grail. Is you always want to make sure that people can't distinguish first party from third party web parts?

A

So, like his other samples, the code is often deceptively simple and because of this I always recommend you take a look at the code to learn some very useful development patterns. The web part I'm going to be showing you today supports themes, section background colors. It can also be used as a sharepoint web part as a team's personal map or a teams tab.

A

The web part actually uses the microsoft craft toolkit and if you don't know what the microsoft craft toolkit is, here's a quick overview right.

A

The microsoft craft toolkit normally, if you wanted to retrieve events from someone's calendar like this web part, does you'd have to write the code to authenticate call the microsoft graph api then iterate through all the events to render them and make sure that you render them consistently right, but the microsoft graph toolkit is a bunch of web components that you can use in your solution to make it easier to retrieve data from your graph and to render the content in a way that that's consistent with the out-of-the-box microsoft content.

A

If you want to learn more about the microsoft draft toolkit, I recommend that you visit the mgt dot dev url, which you can see in the lower left corner here. You'll find there's a there's, a playground that you can use to learn the components and test them.

A

So if you go to the microsoft craft, toolkit playground you'll see that on the left. Here you have kind of the list of components. Today's sample is going to be using the mgt agenda, which again retrieves someone's agenda from their calendar and displays it.

A

On the right here is usually see a preview of what the component is going to look like. This is obviously using sample data when you, when you go to the mgt playground, but you can actually sign in and use your own credentials to actually test this and then usually on the right of the playground. You actually have a place where you can edit the code and preview, but here's the cool thing about the microsoft graph toolkit is for me to display an agenda.

A

The only thing I have to do once I've set up the graph toolkit to work in my solution is, I can just call the component by going mgt dash agenda. That's it right. I can. I can pass additional parameters and additional settings, but that's really it. In fact, joao's sample shows how to use themes in the in the extension.

A

So this is a sample that's actually available in the graph toolkit playground where you can actually use a dark theme, but the only thing that you need to do really is to actually specify a css class, and then your css obviously would define the color the background and stuff of that. So it's pretty straightforward.

A

The only thing that we need to keep in mind here is that, because the web part uses the graph toolkit and the graph toolkit uses your microsoft graph to require information, you need to make sure that you authorize your web part when you deploy it to have access to the api. Now, unfortunately, it was not able to grab a screenshot before a authorized here.

A

But if you go to your sharepoint admin center under advanced, you usually see there is an api access right there, api access, shortcut, it'll, take you to a page that will list all the apis that are requested by all the web parts that you've deployed to your app catalog.

A

One thing I should point out is that it's actually, that page is actually pretty slow. When you first go to the page, it will show everything as being zero, banding request, zero approve requests and so on. Just take a break. Take a few seconds and the page will update and then you'll see all the information.

A

So what would happen in the normally? What would happen when you deploy the web part is you'd have to go to the pending request and approve all the requests one by one, just to authorize your web part to have access to this stuff. But that's pretty much all you need to do to use a web part like joao's or your own. Obviously, but let's, uh let's show you here.

A

So these are the kind of the the the api requests that are made by the web part now in joyous sample he's only accessing the calendar stuff, but if you want to use the microsoft graph toolkit like the full extent of the graph toolkit components, there's obviously a few requests that you would make. I would recommend you only make the api request for the things that obviously you'll be using. But let me show you the web part enough about talking about stuff.

A

I've already deployed the web part and I've already authorized it. So now, if I go to a page- and I just search for the mgt events web park- here's what it does right. It automatically goes and gets my events. I know it's hard to show the full thing here, but it retrieves my events and then displays them in a fancy calendar now, trau again always applies uh extra extra.

A

You know spends extra time to make sure the web part looks great and and works well. So this is no exception. He's made it look like document cards that have events inside of them.

A

If you look at the properties that the web part does it allows you to specify a title, and you can also specify how many days you want to show one of the things that joao does is he makes the web part the property pane non-reactive?

A

That means that it's not going to refresh every single time. You change something. It's only going to refresh once you click apply here.

A

I don't have any more events for the next eight days so or more than eight days, so it doesn't matter. For me to change this, but the other thing that the web part does is, if I go to the section which uh hosts the web part here, and I change the section section background color you'll notice that the web part is actually aware of the section colors.

A

So that's a very cool feature here that I recommend you try to do in every web part. Because again you don't have control over what colors people will be using in their in their sharepoint site or where people will be dropping the web parts. So at the very least, you should make sure that it's going to look good in whatever section theme you're using all right. Let's go back to the code now, there's lots of lots of areas of code and we have to go fast.

A

So uh you know I again, I will I'll go quickly. This will be recorded and there's screenshots for everything all right. So let's look at the code.

A

The first thing that you do in the sample is that you have to go to your package.json and you actually have to tell it that you're going to be using mgt dash react now. The microsoft graph toolkit is available as a non-react component or non-react package and a react package. Joao uses the react package, which makes it even easier in a obviously react solution to use this, so you would obviously go npm install at microsoft.

A

Slash mgt dash react once you've done that you can actually go to your web part itself and in your web part. The first thing you need to do is you need to tell microsoft craft toolkit how to authenticate the user? That's looking at stuff.

A

Luckily, the microsoft craft toolkit has the concept of providers right, so there's always a provider that provides authentication and there's also a sharepoint provider in this case that uses the sharepoint contacts to pass the credentials to the microsoft graph toolkit. So this is the first thing you do in your web part. Is you register the provider that you want? If you were using teams, you would obviously use the teams provider to do this to make the web part work with with the themes.

A

You also have to register the web part as supporting the theme provider and to react to the theme change event.

A

Joao uses different themes that uh that he's predefined for a default, dark and high contrast. You could use a different approach to do this. I I like his approach because he ultimately gets to control a subset of colors in in his web part and then in your web part itself. You just say: okay, I want to support a theme provider. I want to capture the current theme variant and then in the on initialize of the web part.

A

We we go to the mgt providers. We say the global provider for all the mgt webparts are using the sharepoint provider and we pass the context of the current web part. Now there is a little issue with this, which I you know the microsoft graph toolkit team is aware of. Is that if you have more than one web part on the page that uses the microsoft graph toolkit because of the concept of global providers, you might have some some issues here with having multiple microsoft, craft toolkit web parts.

A

I'm pretty sure that this is something that's that's going to be solved soon, but that's something to be aware of now, because we want to make the web part be aware of themes. We use the again the theme provider and we use the theme variant to say, try to get the current theme and, if there's an event where the theme changes, please let us know by calling the theme changed event.

A

Finally, in the web part joao uses a little bit of logic here to determine whether we're currently in a microsoft teams context, and if we are, he actually applies the themes accordingly for the for the colors all right and then so. This is the uh the theme change event. So we just capture the current theme and we re-rendered the web part. It's actually very straightforward to do this, that's why I think that everyone should do this in their web parts and then this is the part where we apply the theme.

A

We don't need to spend too much time on that in the render all we really do now is we say okay, so let's go display the mgt events and we passed the theme. We passed the scope of the the service we passed a number of days.

A

All the magic then happens in the mgt events component and the mgt events component is actually using the microsoft graph toolkit agenda control. You remember in the when I was in the playground, I was showing the mgt dash agenda component.

A

If you're using the react version of the microsoft graph toolkit, you don't need to prefix everything by mgt. It happens to know right, I'm I'm here, I'm the agenda component and it knows how to render it and then in the web part. I know this is very deceptive, but in the web part all the journal does he passes the agenda control. He tells number days that he wants to display and he passes a template.

A

One of the cool things about mgt is you: can template templatify templatificate, uh whatever? The word is uh to actually control how the events are rendered and that's important, because you don't always want to just use the standard layout and that's definitely what chihuahua does here. So he passes an event, template and the event. Template is actually created in the mgt event component and all he does and I'm not going to spend too much time on this.

A

All he does is he creates a fabric, ui or fluent ui document card that he creates as a stack and then he passes the data that he receives now because he's using a template he's actually getting in the event uh the event that gets called when when the template is called to be rendered, I actually have the context of the event, so I have the start time, the end time and so on and so forth, and he just applies his own formatting for date time.

A

He also does the same thing for mgt person. So all the attendees on the call are on the counter and he does that by simply using the person component from the microsoft graph toolkit and he just passes the email address of the user. Id you'll notice here he's also got a flag to show whether the person is actively present or not, but it's actually read right, so I know I've gone through a lot of code.

A

I hope that you'll uh you'll be encouraged to go. Look at the code. You can find the code at this url here. If you don't have the time to write the url, you can just go to ak dot. Ms slash spfx webparts, and just look for it. If you want more information about the microsoft graph, toolkit go to, mgt.dev is probably the easiest way to get started and then, if you want to send your kudos to joao for the amazing work, he's been doing.

A

That's his twitter account here and if you want to complain about stuff, you can definitely reach out to me at bernieage.com. That's it for me for today. Thank you. Everyone.

B

Awesome work, as always thank you, hugo, very cool sample to see that and great use of the microsoft graph toolkit, which is a fantastic way uh to get a lot of amazing functionality into your apps quickly built around the microsoft graph. So very cool.

A