Building apps with Microsoft Graph Explorer

Key Takeaways

hey everyone my name is rabia and i'm a cloud advocate for microsoft 365. this is a multi-part video series i have my uh hr and betty rose here with me to discuss about microsoft graph explorer hr who are you hi everyone my name is aichabash i'm a cloud advocate at microsoft and uh today we have also a special guest betty rose joining us from graphics for betty why don't you introduce yourself hi everyone so my name is betty rosengoge i am a pm in the microsoft graph devex team and i own graph explorer all right so i guess in one of our videos previous videos we did talk about how we're gonna fetching data from microsoft 365 and not every day we're getting data with just one response maybe just my name or email we might be getting data like tons of data like hundreds and thousands of data from microsoft 365 and in the explorer i have not seen any button um or any paging that can you know take me through all these uh this huge amount of data so how does it work in explorability can you explain a bit on that so that's a very good question so we are going to go to graph explorer and run this query and this query returns a lot of responses that paging is required so there's a lot of paging in these the responses and one of the things that you're going to notice graph explorer ask actually tells you this response contains an auditor property or data dot next link so click here to follow to follow the link so every time you click on that link it takes you to the next page um and on the last page it actually tells you all data there's an auditor dot delta link and if you click you can follow the link from this page here okay that's interesting and that's how we handle paging in graph explorer and we are able to tell you um we are able to tell you um that there is an auditor.next link or a data that delta link and give you a link that you can follow right so this is the last page that it tells you it's odata delta link so every time there's a next one it means there is still data coming in oh that's really clever correct so betty i also see here there uh there's a cod snippet piece um what if let's say i learn everything about graph using graph explorer and the next part for me is to embed exactly the same thing in my own code in my own app is that where we get the code for the query and copy paste into our own app correct so the code snippets tab gives you code snippets for every query that you run on a graph explorer so if you wanted to run to add this query into your application for example in c sharp this is the code that you'd actually use and we have a copy button over here which you can click and copy into your application we give you code snippets in four different programming languages c-sharp javascript java objective c so this query changes for every single graph call we do let's say if right now i'm getting data for me but if i change it if i get let's say my email or my manager then query will automatically change and it will be adapted to new graph call right correct so depending on the query that i am looking at the the code snippet is changing so if i'm looking at my mail you will get a new quote snippets if i look at um all the items in my drive the code snippet also changes items trending around me the quote step it also changes but that's great i see this is not the only thing uh here right next to cod snippets i see toolkit component which is one of my favorite feature of microsoft graph and maybe some of the developers already know microsoft graph toolkit is a collection of components web components and authentication providers that help us build microsoft graph in our apps quickly and easily i see we also have an integration in the graphic explorer to learn more about the toolkit i assume right betty yes correct so one of the things we've done with graph explorer is give you languages that make your development process easier and we have two libraries that you have integrated in graph explorer one of them is the toolkit component and the other one is the adaptive cards so every time you run a query and there's a toolkit component or adaptive component that is available a blue dot will appear next to that tab telling you please look at that tab there's something for you that you can you can have a look at and so in this case um i ran the wacme uh query and it actually has a toolkit component takes a bit to load um but once it loads it will show you um how this should appear um in in your toolkit same case for adaptive cards as well so if you go to the adaptive cards tab it's going to show you how this query the response would look like in adaptive card and also show you the json template that we actually used so these are two libraries or ui libraries that enable you um to implement your ui easily without having to re redefine or redesign like the wheel yeah that's pretty cute because i always wonder what that blue dot meant and now it's a bit clear to me that it means that there are something that i need to look into and you know make my life easier um so um i guess adaptive cards are there for mainly just to show you know hey you could uh put this data in this way and present it in your applications just like quick tips right basically correct cool um what about themes is there anything else you can do with the ui um of explorer i'm just curious now yes there's so many things you can do one of the things that you can do is change your theme say i want to see for example so if i do that and my whole application just changes to a dark theme say i wanted a contrast one for example and if i go here i'll just change to high contrast and it should it should change the application to high contrast so that's one of the things you can do with the ui if the side bar component is too huge for you and you'd want to hide it this button over here at the very top enables you to collapse it and expand it as you wish also um if you want if the response that you got here is too long and you don't want to see it on a broader view you can actually come here and expand over here and it will open a bigger space so that now you can look at your response wow yeah so cool this is so cool all my life i have been using this tool wrong yes that's something what you can do with a ui right right so so oh oh oh oh so this is an interesting one so can you go back to the ellipses um again uh betty report an issue so okay this is probably uh one of the features we need to highlight right so this there is an option for developers to go report an issue to make our product better so could you explain a bit on that one so where does it go like a repository or yeah so if you if you are using graph explorer and you run into an issue or you actually have a feature request there's something you're going to see on graph explorer so this button should be your friend so you click on this button it takes you to our github repo where you can go in and either file a bug report a feature request or tell us about a security vulnerability yeah and so you can create one of these and we're going to get it triage it and start working on it ah that's interesting uh that's really good especially the feature requested i'm pretty sure devs who are been using this actively they do have ideas around how to improve so this is really great correct so another thing i don't know you rabia but usually when i'm um finding some interesting things in the graphics floor it's not only coming from the sample queries but i also customize queries by using some filters uh i play with the data a lot and at the end uh since i'm playing with the sample data i like sharing my own query i think one of the best features available in the graph explorer is you can share what you build with your colleagues and just you know you can click the share button and then they can see what sample data you're getting and and they can understand what what you are talking about this is great because it's not only about copy paste the query but also they can experience the same data sample i think this is one of the best features available in the graphics for for developers all right yeah and also as part of sharing the query if you had something on your request body and your request headers it actually goes with a shared query so the person you're sharing with will get exactly the query that you are looking at plus the response here that's cool but if it's in a different tenon then it might be different so if you're in the same tenant dev tenants you know multiple developers working in the same tenant it's going to give you the exact data is that what you mean by that or yeah that's correct cool that's really awesome so the the last thing i'll do i wanted to showcase is sometimes you'd want to get your own demo tenant and in this case um so that you can do all the queries and when you get your own demo tenant you will have also admin access so some of the permissions that we discussed and said requires admin uh consent you'll actually have an admin account and also a user account if you want a demo tenant to start your development journey on graph explorer we have this link that tells you you can go and get a sandbox with sample data and once you click on it it takes you to the m365 developer program that gives you a full tenant with if e3 microsoft 365 license that is free for development purposes only and you can keep renewing it every i think it's every 90 days or every year yeah yeah and if you keep using it and developing apps in it then i think you get it and you know indefinitely renewed i guess whatever yes correct yep awesome that was a lot of features and to be honest with you there are many things that i had no idea before us recording this so that's that's simply great yeah thank you thank you there are so many more with the access token so if you wanted to see the access token you can sign in and actually see the access token that you're um working with um the modified options it is we have permissions in two places the modify permissions tab and these more actions once you're logged in you will also see the select permissions yeah okay thank you everyone for watching so these are the features you have in the microsoft graph explorer if you've got any question or feedback around this web tool please do uh let us know using the report and issue uh button in the explorer itself so enjoy thank you so much hr and betty for joining the call thank you bye