Microsoft 365 Community Community Demos, 6 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to Microsoft Graph X-Ray project

Description

In this 7-minute developer focused demo, Merill Fernando and team delivers Chrome, Edge and Windows Browser extensions for going from Microsoft Azure Active Directory Portal actions to Microsoft Graph PowerShell in seconds. Step through use case - how get a list of all dynamic groups inside my tenant. Address case the old way and then using Microsoft Graph X-Ray that shows used PowerShell, JS, Java, C#, Objective-C, and Go commands. Allows you to understand and reuse code in your project without having to deep dive into the APIs. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 6, 2022.

Demo Presenter
• Merill Fernando (Microsoft) | @merill

Supporting materials
• Website - Graph X-Ray :Beta | http://graphxray.merill.net/
• Documentation – Get group | https://docs.microsoft.com/graph/api/group-get
• Google Chrome Extension - Graph X-Ray | https://chrome.google.com/webstore/detail/graph-x-ray/gdhbldfajbedclijgcmmmobdbnjhnpdh
• Microsoft Edge Extension - Graph X-Ray | https://microsoftedge.microsoft.com/addons/detail/graph-xray/oplgganppgjhpihgciiifejplnnpodak
• Windows Apps Extension – Graph X-Ray | https://apps.microsoft.com/store/detail/graph-xray/9N03GNKDJTT6

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

Hackathon project that we built a few months back now called graph x-ray, it's a chrome edge and a Windows browser extension um and it basically lets you get a sneak peek into the graph. Api calls that are happening behind the scenes on on any app any web app, that's basically using graph API. So just a quick intro about introvert myself, I'm, a product manager in the Azure active directory team I'm from Melbourne Australia, and you can follow me on Twitter, where I post updates about this project right.

B

So I'll just give you a quick demo, then I'll uh talk about like why and how we built this and show you a few cool things right. So I'm, looking at the Azure ID portal I go into something maybe like the users or the groups played, and you can see here on the right hand, side once you have the Chrome or the edge extension installed, you'll be able to see uh the API calls that are happening behind the scenes.

B

So uh just to get the list of these groups, you can see all these partial commands that are being run. If you're, not a partial person, you want to see what's happening behind the scenes on JavaScript or c-sharp.

B

You can do that as well, so as I click through I navigate within the portal, as the portal is making graph API calls, I can see what's happening behind the scenes, and it gives me a really quick way to get into like you know, what's happening, how you can reuse the same sort of code in your own project without having to do a lot of you know deep, diving or digging into the the actual apis, so it gives a really nice view into the the flow.

B

So uh why did I do this um and the team that we uh worked on? Why did we build this? What happened was we before Graphics frame? uh What we used to do was we would just go into the Azure portal. We would try to do something right. Let's say I want someone asked me hey. How can I get a list of all the dynamic groups in in the in my tenant right, so I know how to do that using the UI. So I can do something like okay, where all the membership type is dynamic.

B

I hit, apply and I get a list of all the dynamic groups. Now how do I get the API for that? If you go look in the uh in the API for get group or List groups, um you don't really find really good examples of how to do that.

B

uh There are some basic ones, and so you need to do a little bit of digging around to understand how to use oauth the data filters or data filters, and so on. um So this and then before graph x-ray. What I would do is I would open out the network tab. Then I would do this sort of clear everything.

B

Do this refresh or the filter again I would see the call, then you know I can drill through into this and finally get to the uh sort of the API call that's happening behind the scene, and you know it's not really that easy to see, but you get to something like this right, so where you see the actual call that's being made right. So um that's that's.

B

When we came up with the idea like, why not take this and show it in a you, know nice more easily consumable way and we came up with the initial idea of creating graph x-ray right. So um this is how you you can get to that. So I'll show you the same thing uh when let's say I want to see the partial command for that I'll. Do a filter, get the membership type, that's Dynamic and you can see I get a list of uh like the Powershell command.

B

That does this now for partial one thing to remember is that uh so how does this get powered right? So you saw in the network view you saw that it was just the rest API right, but how do we get the partial commands- uh and you know all the different language commands for this?

B

um That's a neat reuse of what we what's powering the API behind. You know, for example these examples. So uh when the docs team write this, they just do the rest, API example and all of these things auto-generated. So we have a back-end sort of a device API that takes the rest and converts it to the the corresponding language. So what we do here in the extension is called into that API to get the um the Powershell and all the different languages.

B

So one thing to remember is that this is the pre-powershell side of it is slightly in preview. So you might need to be do some bit of tweaks here, for example, these plus signs they don't work in partial, so you know you might need to copy them. Make a few changes. uh Let me show you so I I put that here, but I might have to remove the sort of the plus signs here to make it work right.

B

So there you go, I I copied the partial command and I was able to just run that uh of my uh the the console session that is logged into so a really quick and easy way to find the graph Powershell commandlet or you know your favorite language version switch to that and get to the data from there.

B

um What else do they want to say yeah? So if you go to Graphics, trade.mail.net I think thanks, uh Fabian and David shared this. uh You have the links to all of the different extensions uh you can get them. There's a desktop app as well um and yeah cool easy way to get into things, uh feel free to share feedback. Follow me on Twitter and give us feedback on how we can improve them. Talk to you later thanks a lot for having me here.

A

Excellent, thank you Mario on that one. Let's close the call, but let's follow up on any questions on the chat for sure uh it's just easier, I, don't think there will say immediate questions. People are like amazed. This is really cool, so it's it's just makes it easier, and- and thank you for clarifying also. How did you do that, because that opens up another layer of? Oh, that's actually clever, because we could use the similar model for something else as well, but that that's actually really cool.

A

It makes it easier for knowing what's happening behind the sales and the business case, so yeah so understand. Excellent.

B

Like you can open the teams web app and then you know your people are building apps now within teams. So you can easily pull this up and you can see what the graph API calls that have been made. So yeah really a quick way to get into.

A

Things, that's actually really cool as well, so awesome stuff. Absolutely thank you Mario on that one! So really really cool stuff and- and please please, please do give Mariel feedback on that one, and if people and attendees in the school have other ideas related on this, maybe Muriel and the team will evolve that uh or take contributions on the tool as well, so really really cool stuff, awesome, stuff, cool, awesome,.