Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / Community Demos / 23 May 2019
Microsoft 365 Community / Community Demos / 23 May 2019
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: Community demo - Office 365 reports using Microsoft Graph and Chart.js

Description

This community call demo is taken from the SharePoint Framework community call recording on 23rd of May 2019. In this video, Ejaz Hussain (Content and Code) demonstrates how to build a SharePoint Framework solution which is presenting usage information available through Microsoft Graph.

Presenter - Ejaz Hussain (Content and Code) - @EjazHussain_

Source code for the sample is available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-graph-reports

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-23rd-of-may-2019/

You can find more details around the PnPjs library mentioned in the video from http://aka.ms/pnpjs.

More details on the SharePoint dev community calls from http://aka.ms/sppnp.

A

Hi.

B

Everyone, my name is joseanne, and today I will be presenting a SPF expert part which dynamically generate office, 365 reports using graph, API and Hertz, and after that, the data we get. We have some integration with HR j s. So to start with, before I jump into my at the next slide. Let me jump show you the most of a part look like and then we can talk about. What's actually the company, what are the components in the web part? Ok, so that's.

A

The.

B

Part which has office 365 reports of different areas, sharepoint, onedrive and outlook. So if you talk about the sharepoint, the first one is: let's pass. We have a SharePoint site user 2 reports, so so this is bar chart. So basically, by default is loading with 7 days. If you click on 30 days or 90 days, its retrieve dynamically basically retrieve the data, and we render that chart and if you so I mean it worth noting one more thing here.

B

Basically, I've also used material UI here for this tab menu here and also a few other components which are using there for from the reactor material UI. So if I go and this person publish click on activity- and you see for 30 days or 90 days and then vice versa, so you have some reports coming from the shape. One point of view so I have like more than in this tab. I have a more than one charts displaying. So this one is showing total number of total total and active sites.

B

In my tenet so yeah you can have different dynamic options there and if we go to one dry, it's again same different reports related to onedrive and if we go to I think this is really cool, so you can basically click on this ones and you can hide those one and just see which one which information you are interested in. So that's really cool here and say if you could but look again.

B

This is like one of the other reports which are available, which is email activity by use the detail and you can see how many emails send receive and read so yeah. So that's. That is my part and if we now talk about what's actually in that web part and what other components. Let me go back to my slide and.

B

Okay, so we have so what, in that part components there about four four different types of scenarios, which I think is worth mentioning number one perhaps UI you saw coming from here. Will you are react? And if we talk about max of graph api integration now, so I'm gonna show you the cord afterwards as well. Well, so max of graph integration, I have use dependency injection pattern.

B

I'm gonna show you in a minute. Yeah part has written really really nice post about dependency. Injection pattern are probably much sure if let me just just a code to show at the same time. So so that's basically the graph dependency and you can factor so if you are looking to have, if you have multiple web part consuming craft API I think this is the best approach you know. Different web parts can consume centrally available graph service, so yeah the course are. This repo is available, so you can check.

B

All you have to do is basically create a service scope, and then you have those endpoints which have used them for the SharePoint users reports. So you have that endpoint is being used, as you can see, which endpoint has been used now and is worth mentioning here. I've used that better version of the reports, because the better version basically provides you a ability to tell what what type of data and which format of data you want to retrieve the data side and I, don't think so. It's available in the other, which is the broad one.

B

So I wanted to get in JSON format, so you basically specify which type of format of the data you want, so that that's really really powerful and cool. So you can check basically how these have been done here and so that's that and then a graph API permission graph, API permission to retrieve office.

B

If you use it reports, so we need reports, dot, V, dot, all permissions and yes of nice tutorials out there I've gone to the slide with reference you can check and then the chart, implementation basil and view the force which I use the chart GS library. So let me go back to the code and show you all this in action.

B

So that's the graph service. We will talk about and if I go into one of the component, which is say, get SharePoint site used reports. So what I'm getting here is I'm getting the I'm I'm I'm, getting this instance of my service here in this component II and then, and then after that, I'm calling my default service to get the data based on my period with the voltage seven seven days. So when some cause the data I've got this man.

B

This is where basically, the charges I'm preparing all my labels and the object for the data and other chart other chart options, and one is done. I've got this: let's pose a bar component now this is the one thing I want to mention here, because I've used in other libraries, initially I was looking to use a reusable reusable charge, control from PNP and what I couldn't find one of the option, because when dynamically I've received a dynamic caddy dynamically, this load data and I'm going to click on 30 days and 90 days.

B

I wanted to redraw my chart so I couldn't find that we draw option in that PNP. Reusable controller might need to look more or probably find that so I've done, that I end up use. Another library react charges which basically is a wrapper for a charge charges and which has really really nice one of the option, which is a redraw. So every time, I click and the different reports, like is 90 days or 30 days is Boettiger, are basically automatically redraw with my latest data. So that's really key thing.

B

Basically, if you have a dynamic different option and you wanna reproduce the data as well, that's needs to look into it and clarify and I've got all components here. Sharepoint reports, outlook reports and onedrive reports, yeah and if I show you my manifest file and I'm sorry config to see if we can see the permissions.

B

So so this is the permissions. You need reports, dot, V dot. All- and here is the link working with office. 365 use reports in Microsoft. So here are all the endpoints you can see for the reports available under the Microsoft graph API. That's all from me guys great.

A

Stuff. Thank you very much. Jazz really great demo awesome to see that some really cool capabilities there and that is right, published in the repo for samples, I, think yeah, perfect.