Microsoft 365 Community Microsoft Graph, 13 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Microsoft Graph API to create a web part report from SharePoint

Description

📺 In this 11 minute developer-focused demo Aimery walks the audience through how to create a web part report in a list or chart from SharePoint using Microsoft Graph API. It's objective is to easily identify the use of custom web parts. It utilizes the pages and webparts endpoints, the MSGraphClient and PnP Reusable React Controls. In the demo and code walkthrough, Aimery gives an overview on functionality like filter, child view, charts, and more. He also shows us the Microsoft 365 Developer Proxy, which is a tool that can mock API responses for testing purposes.

This demo is taken from the Viva Connections & SharePoint Framework community call - 13th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Aimery Thomas (Avanade) | @aimery_thomas

📖 Learn more
• React sample shown in video: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-webpart-report

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

My name is emery Thomas I'm, a Microsoft 365 developer at avananda.

A

You can reach out to me on Twitter or LinkedIn, as you can see, um I've been contributing to this great Community for some time now- and this is my second demo on this call.

A

And today, I'm gonna talk to you about the webpart report.

A

So what does it do? This webpath displays a report of all webcasts used in a SharePoint site using either a list or a chart.

A

Why did I build this webpart and why it could be interesting for you to use it well, because you can get a get a quick view of all web parts used in a shop on site, and you can also easily identify the use of custom web parts.

A

To do that, it uses the graph Microsoft graph API with the pages and web paths endpoint. The MS graph client and some PNP react controls to display the data.

A

And now, let's switch to a quick demo of the web part.

A

Okay, so here you, you have the the web path report so with the the list of all the web parts used in this particular shop on site. So for each web part you have the web path, type, the webpath ID and the title of the page where the web part is used.

A

You also have the site ID, so here it's always the same. But if someday we add new feature to this application to get web parts from other sites, then the the site ID could be useful.

A

You can use the search bar, for example, here if I search for PNP here, I know that on this side some PNP modern search web paths are being used.

A

And now let's say that I want to switch to a chart view to have a more it's a graphical view of my web paths, so to do that I'm going to click on edit to edit page, and here wait. Wait! Sorry, instead of clicking here to edit the web part and display the property pane of the web. Part I'm going to click here on this drop down to select the chart option and then here I have my uh my chart. My chart view I'm going to click and republish here.

A

So the child view display the web part in a more let's say, aggregated way. So, for example, here I don't have the list of every single web part, but I can see easily that on my site, I have four events. Web part.

A

Now, let's go back to the slide to see some code.

A

So the first thing that I want to do when I'm loading my application. My web path is to get to get all the web paths on my site, so to do that, first I need to get all the pages that I have on my site. So with the pages endpoint of the graph, API and I, only I only need the ID and the title.

A

Once I've done that, sorry for all the pages that I got I'm gonna get the web path on this page, so I'm using the page ID for each page and the web Parts endpoint to get the web parts and once I have all the web paths I can display it using first the list view control, which is really really easy to use now I want to. If I want to hide my list view controller to display the child view.

A

What I'm gonna do is I'm gonna use top actions and to do that I'm going to implement the get top action configuration function.

A

I want to use a drop down top action with a list option.

A

Is u and a chart option for the child view and what's going to happen, if it is when I click on the chart option, it's going to update the display option property so that the the list view will be hidden and the chart view will be displayed.

A

And the chart view is using another great PNP react control the chart controller.

A

So the chart control was a bit more tricky to use because, uh as I said earlier, it displays the web paths in a more aggregated way. So I had to um to reorganize a bit my data because, as you can see here, it will it requires labels, which is an array of strings and data, which is an array of numbers.

A

So to do that here, I've used a map data model to have for each webpath title. We show my strings a dedicated number, which represents the number of web Parts I have on the shopping site. For example, here I have two oops sorry, two text web part on my site and once I have the data like that. I can easily build my array of numbers and array of strings to use in the chart, control.

A

So the last thing I wanted to talk to you about is not directly linked to the to the web part itself, but it's the Microsoft 365 developer proxy, that I've used for the development of the web path and that I'm using right now for the demo, because one of the feature of the of the proxy is to be able to mock API responses.

A

For example. Here, if I try to get pages for this specific site, which is my demo site.

A

It will return this set of pages instead of the real pages that I have on my site, and I can do the same for the web paths, meaning that for each page, I've created a set of web parts to to return.

A

So, instead of creating many pages and for each page, adding many web paths, I just have to create all the data in in a in a Json file and then launching the proxy, and it turned out that the proxy was even more useful to me because the page Microsoft graph API is being updated right now.

A

So, if I launch the web part without using the proxy and mocking responses, I might I might have some errors and the the web path might not work properly.

A

So I'm not very lucky, because I've developed the the web part a few weeks ago, but just before demo, the the updates are rolling out. So anyway,.

A

That's it for me. uh Thank you very much. I hope it was interesting. Let me know in the chat. If you have any question and back to you, you go foreign.