Getting Started with the Microsoft Graph Toolkit

Key Takeaways

hello everybody and welcome today we're gonna be talking about the Microsoft graph toolkit and with us today is Nicola who's gonna tell us all about it so Nicola what is the Microsoft graph toolkit the max of graph toolkit is an open source framework agnostic web components library that allows you to use the Microsoft graph on all your web application it's all the components are completely powered by the Microsoft graph and so what kind of components are we talking about here so we're talking about things like a lion component which allows you to display the current logged in user allows you to log in log out a tax component that shows your planner tasks or your Microsoft to do tasks we have a calendar slash agenda component we're also working on other components and keep adding more and more components and so we say compose but like what platform of these components built on a great question so because they are built on top of web standards the web component standards they work with all the framework web frameworks out there so if you using react or angular or view or no framework at all if you just go in vanilla this just works it works in all the major browsers out there right now that's really cool yes now you said powered by the Microsoft graph what exactly do you mean by that great question so because we are working with the Microsoft graph we are able to write all the code needed to talk to all the different endpoints so the task component already knows how to talk to Microsoft planner or Microsoft to do and display all your tasks or the calendar control he knows how to start a calendar so you don't really have to write any code to grab data from the graph here on earth it just happens automatically that sounds magical can you show is it actually oh I would love to yes so here it is I'm in Visual Studio code right now so there's two ways to use this in your web applications either through just a script tag or you can use it through our NPM package the easiest way to do it is just to use it through a script tag and I've already added this here I don't have anything else in my project can see here it's just index.html and I'm hosting this on just a regular web server and then I'm just gonna add for example an MGT login component and then if we open up this in the browser and go in private window on localhost and let me zoom in so you can see here it's just a button that I'm clicking it doesn't really do anything not so magical yet no no I mean it's kind of magical online but it doesn't know how to you know how to sign you in so we tell how to do that so we have this notion of providers so if you already have code that you're using to sign in like an M cell library for example you can just tell us how to what that is and we can use that or we can just let us create one for you the quickest way is to use another component called M cell provider and then just tell us the client ID that you've already registered in the adder portal so I'm just gonna use the one that I already have here and here it is and now this will create an end user agent application behind the scenes and all the components will be using this provider to talk to the graph and now if I go back here I can click sign-in it will auto key knows that I need you redirect and I can sign in to my tenant and I'll should be able to get all the data I need there it is that's a little bit more magical what is very magical it gets all the data from the graph my name might my picture and everything I guess you even more cooler when you start adding some other components on here so for example we're working on a tasks component right now and if I just add that one it will load all the tasks that are in planner right now by default so you can list all my planners that I have on descendant and I can complete tasks here or obviously I've already prepared for a demo so it's already simply tit I haven't practiced it yet so I probably just delete this later but yeah that's it just with few lines of code you get a full working full code now I showed you the emcell provider we have providers also for SharePoint and teams so if you're using these in a team's tab or a SharePoint web part you still can use it can do that so for example I have this new project I created I just did a new react based web part so it's using react it's supposed to work on SharePoint out-of-the-box I've already added the component here so for example into this react component I've added this agenda component that we're working on just displays a list of my events on the calendar yes exactly yeah and then I've to tell it how do we actually talk to the graph I have to use a SharePoint provider so I just use a initialize a new Sherpa provider with the context of this webpart and then behind the scenes with the all the magic to connect all the components use what this web part with this context so now if I open up this into my workbench it should automatically load I'm already hosting it through gulp and if I just open this up here MGT demo it will load up my web part and in a second you'll see the agenda pop popping up and filling up and set that's very cool indeed so if folks want to learn more about this where do they go to find out more so right now we're in preview and we're open source so we'll be working with this completely in the open with the community to get started right now to download and to start using it just go to aka.ms/offweb age well thank you very much for joining us today Nicola and I hope you enjoy all the things that you can do with this Microsoft graph toolkit