Microsoft Graph developer community call-January 2020

Key Takeaways

[Music] Happy New Year everybody welcome to 2020 I I distinctly remember when I was younger that kind of having to remember to change the day at the end of the beginning of a new year was a big deal and you'd always forget and write the previous year but I think as technology has evolved that almost becomes a non-starter unless you're writing checks which is actually quite common in America or in my case every month when I write the updated community called dates in the sly texts that come out but other than that I don't since you've run in the year anymore but I'm happy new year anyways and thank you for joining the call it is early in January and I know this cause usually a little bit lower attended but we decided to pick what I would probably say is one of our biggest things we've shown on that graph I'm for developers I know in December if you have watched the call that Darrell Miller did is my partner in crime here in unit or in his team he showed off all the PowerShell stuff and japheth who is one of our engineers in neighboring Kenya actually showed off some of the graphics for things and what we've been doing there and so this month we're kind of going back to our pure developer roots and this is a demo that we built actually or our ignite session that we outsourced to canvas which is a company that todd Baginski who's on the call with us will be presenting on as well so I hope you enjoy this call it's very graph heavy but it's also very Microsoft teams heavy as well which is great to kind of start to see the overlap between the different engineering orbs within Microsoft 365 kind of come together to be able to tell a real user experience story powered by all the platform that we have available to us so for those that don't know we do run these calls monthly it's the first Tuesday of every month so next month's call will be the same time 8:00 a.m. PST on February the 4th 2020 we don't have speakers lined up yet so I've got a few ideas but if you have are doing things with a graph and you'd like to showcase them we would love to have you on to present we've had a bunch of really good EVPs on and and non MVPs as well and we'd love to hear from you and so please reach out just je fais at Microsoft comm and we can get you scheduled in so today on the core as I've mentioned we're gonna kind of really just talk about the meanings capture app and Nicola is actually gonna talk who's the PM that drives a Microsoft toolkit which is a big part of this this solution and then so essentially I'll start off with a bit of an intro Todd's going to go into the deeps of how it was actually built and Nicola will go on about the Microsoft craft toolkit so if you want to follow us on Twitter I'm not sure my little birdie is halfway down but yeah if you want to keep in contact with us we're very active on Twitter and share our kind of graph findings on the web as we as we read other people's blog posts and everything's like that okay so I'm gonna actually just demo the application this morning and then Todd and Nicole go into a lot more detail about how this was done so I'm gonna alt tab over into an in private browser in Microsoft edge into one of our demo environments here and today I'm actually Katie Jordan 2020 means I get to pick a new alias to present as last year was Meghan this year is I'm going back to Katie and you'll see if you're familiar with Microsoft teams that I've kind of hidden a bunch of teams that are in this developer environment just to highlight that today we're talking about the cantos o board team and we have these quarterly meanings that we put together and all of our board members have the ability to come in here and chat and discuss things within within the environment and we can obviously go and add new members to the board through the standard things happen in teams but what we actually built is a tab we've called this app application a the meanings capture application and what it allows me to do is within the context of this particular Microsoft team and in particular this particular channel of a team we can go and create meetings that are in the future with agendas with people attending as well as pre-read documents and even tasks that we can create to associate with people around those pre reads and then when the meanings actually live we can capture the notes of the meetings a date attachment create new tasks and actions as we have discussions in the meetings and then afterwards actually kind of publish that meeting and sign off if you want to be that official like a lot of board meetings or committee or governance council meetings do so just to give you an idea about what we're doing here when we create the meeting I'm actually gonna do one just as in context of what we're doing today which is the community core for February discussion and you can see that it's already added me as an attendee but it's also added at least here who is part of the cantos a board and has also been part of meetings in the past that I've worked on with that particular person now I can go in here and add a lot of other people in and it's using a people picker here to make those suggestions so I can go and add Todd who's in the core here and now teaming is an attendee and you can see that it's doing nice little simple things like adding their photos that are stored within the profile by now in addition to that we can say that although my next community hall meetings in February the 4th I can actually go in and say wow I do want to kind of start this discussion early so I'm gonna look for a time for 30 minutes on the 13th or the January for these three people and when you run five meeting times well that's actually doing is running the get scheduled in the background on the graph and I can go in here and pick when everyone's available and you can see they're at 9:30 and then not everyone is available to attend so I'm gonna pick that 10 to 10:30 timeframe and so we're gonna review content from the Jen the Jen call we're gonna discuss potential speakers here and then we're gonna talk about content from engineering that we want to add and obviously I can go in and add new attendees and maybe there's some pre reading before this meeting maybe I have already got a list of potential Microsoft community core members that I've been drafting in a Word document and I can click Save now what that's obviously gonna do is go create that meeting it's gonna send meeting invites to everyone and it'll kind of do a nice summary of all of those events so if I come over into Katie's calendar here you'll see that there's existing ones that have been summarized where it's put those in and if I go over onto the calendar it will come through here that I've got one on the this one it was one I just created and you can see that if I double-click on it it shows me all the members it shows that neither one responded yet I have automatic responding because I've created this meaning and so it kind of integrates nicely with that calendar and then when it comes to wanting to launch that and and preview that meeting I just click there it's gonna tell me as I'm running this as the note-taker within that meeting that Katie which is me as approved it Alyssa and Tod have not accepted the meaning so maybe they might not turn up shows me the agenda we initially had as well as those links to those pre read documents we wanted and then during the call maybe we've got some notes and I'm just gonna throw in some nice lorem ipsum here for the sake of not seeing me type too much and I can basically save those meetings at any point and keep re saving those as I go as a note-taker but I can also go through and add tasks now I can go and create tasks to say I need to catch up with new speakers for March and May I'm gonna assign that to Alyssa because Atlas is the one that normally does this and then I'm gonna make that as a deadline for xx and add that task and under the covers what that's doing is it's actually creating that planner task inside of a plan within the channel for this quarterly meaning so if I go into my Microsoft to do as Alyssa I go into planner as Alissa essentially I'm going to see all those tasks showing up within within my experience now after the meetings done maybe I want to like wrap that up maybe you've got some final notes I need to do shut off the meeting or like at the end of the day I go back and I add some more notes because I've had my day full stacks of meetings and then I can publish that meeting and so what I can do here is when I click publish that's going to go away and wrap all that up and capture it and then summarize those notes into an email form and send those to all of the attendees this means that if someone needs to shoot this to offer people if they weren't in the meeting but want to hear see the notes they can but also the real benefit of this is the amount of times like I'm on a bunch of different kind of governance teams here and V teams if I want to find previous meetings I just go to the channel where that V team actually discusses things and I go to the meeting capture I can see the history of all those meetings and go review the meeting minute notes from it and so this is super useful I mean it is consistent so if your whole organization use this approach if you get invited to a new v-team you know where to go to look to see all those previous meetings and all the notes so if I jump back over to Outlook here and went into Katie's mail here you'll see that that community call for February is sent the email we've got a nice standardized format here shows the attendees of the meeting it shows what the agenda was it shows the notes that we're taking during the meeting but it also shows all the different tasks that were given and and what's still outstanding so because those people didn't do the pre reading of that document we attached those tasks are still open but you could go in there and mark those as closed and when you just publish the the meeting it wouldn't send those through and we've done nice things like adding the fact that when you click on this what we're actually doing is taking advantage of OneNote which obviously we've created the notebook for that channel within the files section of teams and for every meeting that gets basically published we go and create the OneNote notebook page for those and so if you wanted to have one note on your phone or one note on your desktop you could go and basically open this OneNote page in your application have that one and go with you and again consistency all of the meaning minutes will all be there underneath these different notebooks mapped to the team and the channel which would essentially be a section within the OneNote and then every single meaning here when it would then be the OneNote pages they get created so we're leveraging a lot of different aspects of the Microsoft 365 platform here to work with a common scenario that people do within companies to run with meanings within the context of members of a team so um hopefully it gives you a good idea about what with Bill Todd you want to just quickly explain where they can find this because we have open sourced this now and then I'd love you to go through some of the scenarios about what the biggest bits about this that we've done with Microsoft graph and teams in regards to kind of things like orth or more API calls we've done to get this to work yeah yeah sounds good I just put the link to the github repo where I just pushed the code just within the last hour so that's all that's all there right now and so everyone can get to that in the chat there and I'm sure you'll put it in the meeting notes here too so yeah as Jeremy mentioned we had the opportunity to work on this with Jeremy's team and a lot of other teams and it was a sprint to get it done up to ignite and and where I like to start with the story of this app is we basically had 10 business days of coding with three people on my team and myself doing architecture and code one designer at before we started writing the code and one person actually just me two to kind of do business analyst on this project so everything you see here got built in the course of when we conceptualized that - it was done Jeremy for weeks right yeah that's right yep actually ten days of just dev and what that also includes that Jeremy didn't even talk about is there's a SharePoint framework web part the whole installation process has been automated with an arm template for all the azure components as well as scripting the deploy as many things as we can automatically and so I'd like to start with that because if you think back to just five years ago and if you tried to develop an app like this with Microsoft Office 365 before a graph existed we would have to like call all those different api's individually and write our own authen to there's no way we could have got it on this quick and then another thing that really sped the development of this was the Microsoft graph toolkit that Nikola made and Nicholas is well and I see both on the call and hats off to you guys again for all the help you gave us to get that done and the changes you made to help it it matched some of the requirements for this app so the graph toolkit also really helped us get the front end of this built really quickly and jeremy's opened it up right here and you can see here this is the readme it tells you what this is all about it tells you what prereqs you need to install and I think I'll take over the sharing at this point Jeremy yeah absolutely so it's interesting if you look at the code that makes this up right and majority is HTML this is a c-sharp solution minimal JavaScript needed and very tiny bit of typescript for the SharePoint part so one of the things that we wanted to do was make this as easy as possible for people to install on their end so we've tried to automate as much of the installation as possible at a high level these eight steps are what you will do to install the sample and everything in here is talked about in very good detail and it just says hey fill out this arm template with these values make these configurations etc after you're done with that it also has the demo script and so the demo script is basically what you just saw Jeremy did so if you're trying to figure out how to exercise all the features of this and even more than than what Jeremy showed you can just flow through this demo scripts part here and it really tells you what to do we also have in the appendix a nice little cleanup which shows how to delete data and that is also a really good demonstration of how you can configure the team's tab and write the code to allow you to use a single asp.net website to make multiple different versions of pages that you would surface and teams we also describe how you would add this app to a different team and a channel I can imagine that many people if they wanted to put this in their org would probably want to add it to as many places as possible finally at the bottom we give some details about the graph tool kit which Nick is going to go deeper on we talked about the sequel server database which Jeremy didn't mention yet we have a sequel server database and you can see here it stores information about agenda items attendees meetings files associated with tasks and channels so there are some things we're doing to keep track of that metadata to keep all that information in one spot finally at the bottom we talk about how the default attendees are actually added the meetings Jeremy just touched on that but this is the actual logic behind it and it's all graph so it's a really cool thing to look at and just learn how you can use the graph API so let's get take a look at and deep dive here on some of the code now and where I'd like to start is just taking a look at the app and as we take a look at the app here I want to point out all the different pieces of the puzzle that Nick is going to dive deeper in on a bit that we used Microsoft graph toolkit for so this list that you see right here when you come to the app this is actually using Microsoft graph toolkit control that will allow you to display all of the events that are upcoming on your calendar with some type of filter criteria so that's how we built this control right here that shows us now the part here for this card and the ability to email someone or see their email address Jeremy didn't even touch on that that's also built in to that toolkit control so it's great how many things you get along for the ride for free when you're using the Microsoft graph toolkit other thing is that we got for free was when Jeremy made the new meeting we had the people picker in there that's a graph toolkit control here the planner tasks this whole right pane is a toolkit control which will allow you to point it at a bucket in planner and see the tasks for it so there's toolkit controls scattered throughout this entire sample to get into the code and really start diving into that a little deeper what I'd like to do is kind of take a use case here and show you how the code maps to that use case from front to back so the use case that I'd like to demonstrate for you here is the one back when Jeremy created the meeting and he found the available times for people so I'm going to go back to the create meeting page here and again what Jeremy did silk do you have these people who are attendees of this meeting and then you pick the date on which you want to have your meeting and you pick the duration let's make it on the 13th that you want that meeting to occur for and so then when you click find available times as you saw it's really fast and it says at this time these people cannot attend and notice these are the people again in our attendee list and these are the places that people can attend and so how did we do this we did this with the graph API and this is what I'd like to show you end to end how did we find the available time for them and then after we found the available time for them after we found the available time for them how did we display it when we went to the page in the meeting to say did they accept this meeting or not which you'll see in just a second when this page pops these graphics right here how do we make this determination as well let's take a look at the code here and start walking through so one thing to point out about this particular sample is these details this is what we built this on in the technologies so this is a website deployed to Azure app services and that is who is actually hosting the web app you're seeing displayed in that tab and teams and in the backend we have a sequel Azure database and we're using a dotnet core 3.0 asp.net MVC razor front-end web site with the dotnet graph SDK in the backend we're using the graph toolkit controls and this really nifty thing that Nick is going to talk about called the proxy provider for the graph toolkit controls and finally a SharePoint framework webparts so those are all the main pieces of our puzzle we all have that we also have a web job too so the code you're looking at right now is the asp.net website this is the actual meeting capture app that you saw in the team's tab and if I take that use case I just talked about on how did we implement that find available times it all starts here in the new meeting CSS HTML file and so you'll find that under views meeting capture new meeting down here I bet people have already cloned this repo and looking at the code so here is our new meeting and inside of the new meeting I in inside of here I had that button that's going to find the time there it is it's ID is BTN fine time so here's our front end user clicks that then we have this JavaScript hooked up to it and the JavaScript that is correlating with the page in the web app is up here under WWJ s so here's the new meeting jus file and here's my click event you can see for that button so we do some things here to basically parse different things out of the page what did the user select as the criteria for when they would like the meeting to be then down here is actually when we go to the graph to get that data we're using this this javascript file here called team's helper and you will also find that one under the Jas file they're essentially what team's helper is doing as teams helper is going to take the URL you say than that Ajax request and it's going to make this request and invoke it but when it invokes this request back into our web app because this is our meeting capture controller you'll see right here on the right when it invokes this find available times in the meeting capture controller it's actually going to do that and it's going to add in the authorization token that it gets with teams and it's also going to inject the context of the current team and channel we're running in and that's very important because we need that information because as Jeremy mentioned this is designed to work on an individual channel and team basis so that's why we need that context of what team and channel were in so we can make decisions on what data we put in that database where we get it out and how we interact with things like the planner and the files and the tasks so after we teams helper invokes this where is that well that is actually in that meeting capture controller so here's to find available times method we just invoked and as you can see when we're done to return some JSON of the schedule ID and the availability view here but really we don't do that in this method we do that in this service class we created it called search available time so for all the different things that we interact with we have this services folder we have some calls we make against the base graft service we have calls we make in this case against the calendar service so if I open up the calendar service and I head over to that search available times and there we are right in here it looked like I had it here we go so here's search available time so this is really at the point where we're actually using graph up till now we made sure that we had all the contexts that we had with teams and now we're going off to graph to actually say hey go to the calendar call get schedule just like Jeremy mentioned pass in the schedules which is a collection of all the schedules for all the meeting attendees the time frame I'm searching between on my start and end here and then that interval that interval was do I want it to be a 30 minute or a 60 minute meeting and then that gives us back the availability for all those people we're then able to come in and react to that information that we get back and run this code down here where eventually if you see this button that we're creating this button and all this code here that's generating this HTML is actually the one that if we go back to our meetings and create a meeting when I click the fine available time button right here each one of these things and the pop up that you'll see is that actual button that that code was mapping to looks like I may have exposed above Jeremy I clicked it before the bait page was fully loaded let's try that again there we go so each one of these here is the button that you saw back in the code right here so that's kind of a front to back on how can you trace these calls if you're looking at the sample and trying to discover how did they do this one thing what you can start in the user interface and the view look at the JavaScript see how that maps to the controller and then trace it through the controller to the service class to find which graph API or other API we use to get a job done Jeremy I think another nice pattern the show is also to take this one step further right and show once we got into the page mentioned before how do I determine if the person accepted the meeting or not so I think I'll jump into that one next if that sounds good to you yeah that was definitely one that we don't want a feedback from ignite you're like how are you doing that and it's actually something that's been in the graph for a long time yeah it has it really has so let's see you make sure that gets uploaded here back to this guy and again for context everybody the spot that I'm about to show you that we're creating here it's the little spot that's gonna say did a person show up for the meeting or not so I'm just gonna there it is this is where I'm gonna show how did I find out Kati accepted but ELISA myself did not so if we come back to our code here the follow up meeting page right here is the one we call it follow-up meeting this is the one that you're filling out the details of what's happening during the meeting and essentially this is the part of the code right here where the attendees are listed and you can see we're seeing if the attendees status response is equal to graph response type accepted then we're going to use this SVG to render that icon if not then we're going to use the SVG down here and what we actually got this SVG from was if it may look very similar to you you've probably seen this before this is how it looks inside a team's native so what we did is just took the SVG that made their icons and then reused it for these icons right here and so when this particular model loads we are using the graph under the hood to go determine what those attendees responses were and that comes out of our attendees model and so again graph used to make that determination and then very easy just an if statement on it and write some SVG and you're ready to go there's another thing that Jeremy showed which was the emails that she received and I had a lot of people ask me about how we made emails in a similar fashion for a different sample we worked on with Jeremy one time and I bet they're gonna ask again now so I think I'll get ahead of the curve on that one and show everyone how we made those email templates so here is the example of that nicely formatted email that follow-up email that goes out when you click publish so how did we make that well the way we made that is you'll find this templates section down here at the very bottom of the solution and meeting created is actually the one the template that's used to send that email I just showed you and so here you can see this is just another view that we've defined we have our custom styles on the top and here's the HTML that actually implements it in the follow-up meeting class when we click the publish button what eventually happens is in the meeting capture controller this method right here called published buyers and what we're doing in this method is we are assembling the email template view model which the meeting created relies upon and we're putting all this information into it that we're getting out of graphs so here you can see this is a graph call we're getting events based on the team ID and the event ID eventually this goes to graph through the calendar service you can see there's also extensions that we have used with graph here to store some of our items here this is the sequel database where we're interacting with the sequel database to go get data out of it and the reason I wanted to also bring up the template is this is a good a one-stop shop piece of the code if you will to demonstrate how we interacted with many different services including the sequel database behind the scenes here after all this information is assembled we come down here and we use this view render service which is built into asp.net razor engine and if we call rendered a string async on it and we pass in the path to the template we want to render along with the information for its model we get back this string and this string eventually actually represents the HTML that we want to use with all of the dynamic data put into it that we're about to send through Outlook so after we get that information back again we go to another service class in this case it's the user service class and we call send mail so if I bounce over to that one here you can see I'm taking in the subject an array of mails as well of emails to send it to as well as the content that we used that razor view to create that HTML for us and we assemble what our message looks like based on that specified don't put it in my sent items because I don't really need a wreck that and then again here's the graph client call send mail passing the message and false right there so I don't save it so as you can see the pattern for all these is very consistent it always goes through the service class that we have and then through the graph SDK to make these calls so that's the the back end pieces of it one other thing that Jeremy did not show was the web job and so let me show you what the output of the web job looks like and what that web job is responsible for the web job runs all the time and the web jobs job is to look through all of the tasks that have been created for everybody in the whole planner associated with this meeting capture app and it's job is to say I want to look at all these tasks and if any of these tasks are not complete and the meeting they're associated with is less than 24 hours away I'm going to send that person a reminder to go complete their pre reading tasks and this email right here is an example of doing just that you can see it actually uses an adaptive card inside of it which is pretty slick and it says you have an upcoming meeting that requires you to review the documents for here's a list of the documents you need to review and when you click view it's going to take you directly to that PowerPoint file which actually deleted cleaned it up because I deleted this meeting this was associated with but that's right where it takes you and so this is an example of how you can use graph with adaptive cards and web jobs and sending reminders and integration with tasks calendars and things like that as well ignite we had a very early prototype of something that the outlook team working on around those actual messages that light up with in Outlook and where there was only the View button in what Todd just showed there as part of the adaptive code rendering of that actual message one of the things that the outlook team working on in both over the mobile and the desktop versions of Outlook is that you can actually have a button there that not just cause a hyperlink but can also call an API and if that API is behind an authentication endpoint when you click on the button so in this case it might say I want to complete the task that I've done this pre-read without having to go into the plan and to go complete them the task or to view the task and then click check is that it recognized that the API is behind a north wall and it will show you an OAuth prompt here and then automatically going to mark that planet task is complete the outlook team are currently rolling that feature out across all the clients and once that is in all the clients will actually put that into reap me and have that as a configurable toggle because you do have to white label the environment for that actual message to work in that scenario but it's a great way of showing that again if your users on the road and they want to view the document and just mark it as complete without going into planner to market being to do that directly into Outlook so those actual messages with the ability to call thin ticketed API as it's in the action buttons is something that's coming coming soon in Outlook thanks for adding in all those details geremy that was quite one of heckuva one to figure out wasn't it that was cool the next oh and you may have also noticed I have some unread emails here that three of them that have occurred since the call started so this is these are the remail that are I'm logged in as my account here in this tenant and so this is the actual meeting invite what it looks like when you get it you can see it includes the agenda the attachments here's when I was assigned a task here you can see that I actually got assigned a task in planner and when Jeremy created that meeting because he uploaded a document and then here is again that follow-up email that from what Jeremy sent now the code back here for the web job I'm not sure it's really so much interesting that it's worth time to spend time getting into how did we go look at the tasks and determine you know did it need to send out an email or not but you can probably do that one on your own there's one more piece to the puzzle that we haven't shown yet and that's the SharePoint framework piece and so we also created this SharePoint framework web part and the idea here was well it's nice that I'm getting a web bot telling me if I have pre read tasks to do and it's cool that I can log into teams that I can find out what tasks I have upcoming for me by looking at individual meetings but what about if I just want to look at all the meetings that that this app tracks that I'm a part of and I want to look at all the tasks and those meetings that are either assigned to me or somebody else can I do that in one spot was the use case for building this and so that's what this webpart does and I have an in edit mode to start to show you here that this webpart when it's not running inside of teams you put it in edit mode and you tell it the ID of the team that you're running against as well as the channel where you've deployed it and once you put those things in there the webpart knows where to go retrieve the information via the graph API now you probably noticed that this user interface looks very very similar except for the launch button over here and the reason it does is because it's using again the same Microsoft graph toolkit control that that lists the meetings here and so when I click on the meeting the one that Jeremy made for example now on the right side again we're using a graph toolkit control and this one is basically the list of tasks for a given bucket and so because each meeting creates its tasks in a separate bucket this is reading from that bucket and so we can also filter here on all the tasks were created or just the tasks that were created for me we didn't have time to write any actions into this page to complete these tasks or change them but that could easily be done by looking at the other code we made in the app there to make that take place and the really neat part about this app is that this SharePoint framework app can also run directly inside of Microsoft team tab itself so if I go take a look at this code here for the web part this is the the SharePoint framework web part code I'm looking at now and in this webpart code the first thing I'd like to point out is the we're using react we're using SharePoint core library we are also using here the import for the Microsoft graph controls inside of the actual component that is inside of the web part here here's where we have our interfaces for the person the agenda and the tasks component that we use now and there's not enough time to go through this whole thing but at a high level here you can see the agenda component that was the one on the left side of the web part being used and it has a click event registered for it that when you click one of them it's going to fire load tasks and so when load tasks fires here you can see how we're using the tasks graph toolkit component which is what you saw rendered on the right side of the screen and so if we go back again here this is the tasks component and this is the our task component over here events component on the left it's one last interesting thing well actually more than one but when I have time to talk about today and the code here and this is in the actual initialization of our web part let me find it real quick here it is so when the component mounts come if you're familiar with react component did mount will fire and inside of component did mount here you can see where we go to and make a new graph service and that's when we're going out to get the events by the group and Channel and that's here's our graph service costs where we actually execute that call and so this this pattern has been around for a while inside of SharePoint framework but if you haven't seen it before that that's how these things are happening here one last thing I'd like to loop back to and give you all a tour on that it's not a code level detail but it is a technical detail that should help you understand the solution better when Jeremy created the new meeting you saw that these attachments were stored somewhere and we saw that planner tasks were getting created well really where are they getting created in this particular team channel I've put links to where they are so I can show you quickly first of all as we all know when you create a team you can create a place inside of SharePoint to store the files so this is that place that comes with that inside of the channel on teams and so here's the one Jeremy just made 36 minutes ago community call for February when he created the new meeting we made a folder to track that meeting and we uploaded any of the meeting attachments to this location we used the planner as well on a per channel basis and here you can see ones that go back all the way to November 1st when we are getting ready for ignite the way that we're doing this is where here's Jeremy's meeting he created we're creating a bucket inside of this plan for each meeting that you create and then we're using the tasks inside a planner so these three pre read tasks here were created automatically when Jeremy made the meeting notice there's one for each meeting attendee myself Alisa and the account Jeremy used Katie Jordan here to make the meeting so the logic is every time a new meeting is made for each pre-reading document that's uploaded give each meeting attendee a test to go read it here's the test that Jeremy made separately notice they're all put in the same bucket and that makes it easy for us in the various spots you saw in the app so we can all get them and organize them in one place finally Jeremy showed you the notebook opened up in the raw OneNote program but here you can see it within the context of the team's tab so here I have the quarterly meetings and here's the one that Jeremy just made at the beginning of the call and so as you can see everything that we've organized is all within the context of a channel within a given team and that's how we kind of used it to bucket things and make it you could scale it across multiple channels for multiple teams yeah I think that's a good it's good to kind of draw that line of where we're storing all the data and we did specifically make this as a asp net don't net core application the back end and we we used sequel for a bunch of reasons which we'll go into in in other meetings and and so forth is that we do look kind of how you did it drive through but it just shows you especially teams you know there are different ways you can go build these applications and we felt that because of our most broad audience is the dotnet audience that this made sense the builder's sample this way but this could have been totally build as a react web application with a you know a no backend it doesn't have to be not now but we from feedback I've made this sample with that dotnet experience and so I think this is a good segue based on kind of what we've shown so far to introduce Nicola who is the PM in our packs division that's kind of in charge of the Microsoft graph tool kit and the karla we've talked about the talking a bit here and we've highlighted some of the places where the toolkit is a little bit up the experience but you want to go a little bit deeper into how this is used and the benefits this gives you from a developer perspective oh yeah absolutely and thanks for doing a great job Todd I'm actually introducing the toolkit I think it it's great and it's great to see how much as he used inside of this application and hold of working with it for visibility for everybody on the call is when Todd and his team started building this they actually sent a lot of requests our way of things that we need to do and the toolkit to make sure that they can accomplish their job of building this experience because when they designed it they weren't looking at what looking new they were looking at what is a cool scenario they can deal with the graph and then they brought in the toolkit to kind of make that happen so that allowed us to improve that it'll be quite a bit and add features that we didn't know we're required or were usable or need it at a time so let me share my screen real quick and they're not gonna go through a quick overview so for those that are not familiar with the toolkit just a quick ramp up the toolkit is just a set of web components that work with any framework so just as Jeremy said they work we could have used react here could have used view whatever you would have used as your front-end framework these components work just fine and did a particle part of these things or is that they work automatically with the graph so a lot of times you don't even have to know what the graph calls you to make for them to work so for example in this case if I use the agenda that Todd showed already you will see on the side the agenda just starts popping up and showing all your all your events which is you know I'd have to write a single line of JavaScript code to actually get this to work or for example one of the most useful components is the personal component that's used everywhere in the application if I use personal query me for example this will kind of just move the agenda this will just show the me person and then one of the cool patterns that we see that developers really want is a personal card so we can actually show a person hired on hover here so every time I hover over this person card it will show up now this is used everywhere inside of the application so for example here here's the the person component I can actually right click and inspect this if I wanted to and you can see here here is there it is that's the MGT person you can see it right there and now this one doesn't have a person card on it but I can actually edit the HTML right here let's try to do that real quick I can say Christian card equals now when I hover over it I have a person card so it's that easy to actually add that person card there into the application and I didn't have to have access to their source code I could have just do it myself so kind of shows the power of these components and what what they can do inside of this application just quick run through some of the things that we added to enable some of that Paul wanted to do for example you saw the example of clicking and on an event so we didn't have any click events actually on the agenda or in the task component at all and we for some reason we didn't think that was necessary and that is a feature request that thought actually really needed to make the application work so we added those click events inside of that baggage and the task component so now you can actually add an event listener to each component to listen to you when a user clicks on the event or on a task and they handle that in a certain way another feature we added was ability to assign users to your your tasks so actually let me show you how that works I can show it here so for example if I use no GG tasks here I'm just going to show my my automatic is gonna show all my planner tasks good second there this I can for example click on people I can up now I can show a person speaker automatically out of the box and assign different people to do these tasks and this works out of the box now in these components so these are features that got into version 1.1 of the microcell graph toolkit that anybody can now leverage and use and this the toolkit became better because of the work that Todd and his team did - can i ta taan this on this scenario and you know use the toolkit to make it even better just to quick touch-up also on another component that was added in 1.1 which i think it's important for this audience and the reason why this component was added is because this is a feedback we got on a previous community call and that was to add a component that can do random calls to the Microsoft graph and yet at the MGT get component for example that can take any resource from the graph and grab the data and display it inside of your UI we are actually haven't you any JavaScript goes so for example if I go to I want you to get that HTML this component will I guess I don't have the permission so yeah there is I I don't have that's actually good example I tried to get my messages but I don't have any permissions approved and it looks like I need to allow pop-ups let's go ahead and do this and be back block I should have tested this before anyway it would get my messages or whatever resource from the graph outlets just and then you would use a template to kind of render that that details from the grab directly into UI so that way you can just for example in this case list all the different emails on the user's inbox so it does a data for for all the emails in value which is the raw data you get from the graph you can use the subject email address and you can display different things from that email so you can use any endpoint inside of the graph so if you want to use the graph toolkit and we don't have an opponent for it there's a clear way to do that or if you want to extend a template this is a great way to call any random API from the from the graph and then finally one of the biggest things that we added to the graph tool kid that was required to enable this scenario to work was the proxy provider now when we first shipped the box or graph toolkit we only supported the client-side authentication and clients I'm making requests calls the graph to the client side so using things like M cell J s or using any other client side library to make those requests and it wasn't possible to make requests through your back-end to your server so for example in this case where this application uses an asp.net app to make all the near quests to the graph and then pass them over to their front end that was impossible so to make that possible we added a new proxy provider that allows you to you proxy any request to the graph through your back-end so the way this is used inside of the this application is simply created as a new provider here you can see there including the toolkit here to the script they're creating a new proxy provider that points to this API API slash NBC graph that they've created on their back-end and also takes in a this is a that is a header for it so it can support the SSO that they need so that way the user to have to sign in so that way they can use the SSO through teams all right so now because they're using this empty proxy cutter any component they use inside of the application will know to use their back-end to make all the requests at a Microsoft graph and on their back-end they have a controller NBC graph controller that handles all of these requests you can see here here's the API slash NBC graph and we they've implemented a a post method a get method and delete method anything that there would graph needs to make any requests and then all it does it takes in the requests that a component needs makes that request on the behalf of the component to democracy graph and then simply returns the response back to the component so now any component that's used into the front-end can still leverage all of the work they've done on the backend and we use the same authentication user to sign them they can use this or so and still have all the easiness of what the talkee can do that is a quick overview of the graph I want to leave make sure there's enough time for questions and stuff like that but again this wouldn't be possible if it wasn't for the work that Todd and his team we're doing to to make this this application and we'd love to hear all the all the cool things that everyone wants to deal with with the graph and the graph toolkit and if there's anything we can do to make that possible so if anybody has any suggestions or requests please work with us and we can we would love to kind of add those inside of the toolkit to make it even better that way yeah that's awesome thank you and it is a great story in terms of the work that was done across kind of Microsoft okay at the graph team the team's team that helped us with the author side of the things which we'll cover in more detail and other calls coming up and so thank you so much Nicola for jumping on that so quickly the canvas for contributing back to the graph toolkit and having to build out the scenario episome a good good good exercise to go through with regards to working as a team here which was great so while we're waiting for questions I just want to just highlight that all of our Microsoft graph calls are available on our office dev YouTube channel and the next call beef every the fourth 8:00 a.m. and you can add the edits your calendar using the Microsoft graph call a Kaka link at the bottom here to add the new series which has the new join link in it which is basically the same euro with - join after it and just as a quick reminder we also do do Oh a weekly Microsoft 365 developer podcast that I host with Paul shape on it is an MVP basically Chicago I just recorded a call with Kevin Bellinger on the new beta profile api's which will be up next Monday and we did some great calls in December 1 we've Sebastin levert who's up in montreal on moving a skills to the cloud that was really focused around kind of being an amicus to 365 developer and kind of the evolution that has taken to move off of kind of on-premises products it was a great session we have Paul said and then actually Chris O'Brien who's one of my favorite MVPs that I've learned the last 15 years from his blog and different sessions of attended at conferences and he talked about kind of his evolution how he's moved into the power-ups and power automation power automate world and kind of this meeting of makers to developers or no Todd does appear to work with power ups as well so if you haven't listened to those shows I highly recommend scrubbing that in one of our podcast player that you shoes I don't see any questions in the chat over the one from JK which is is there a graph partner program we do not have a tap of program at the minute we have a Developer Program which allows you to kind of as an individual subscribe in and basically show your interests across the mics so I've developed a platform it gives you a three Microsoft 365 tenants we do for our blog which the link was already in there but if you've got a graft at Microsoft comm go to resources when we have things like dev kitchens in Redmond for partners that are under NDA that are signed up through the OCP division so the one commercial partner division each region within Microsoft globally has local OCP partners in contact to register as a a global partner and will communicate with those IDs to promote dev kitchens that we do across various Microsoft 365 platforms that's one way you can kind of engage as a as a partner within Microsoft with the M 365 developers and the best way to do that is by monitoring on the blog let me announce those dev kitchens are coming up I'm not sure when the next ones are just just yet one front down you here we use graph API to integrate SharePoint with our in-house applications fortunately graph API does not seem support document sets there is definitely gaps between what the SharePoint see some and REST API is do and what Microsoft graph API is do the team inside the ship an engineering group that own the API is across their entire surface are working to close those gaps I know they're actively working on the taxonomy managed metadata API is that currently on on graph that are available and see someone rest this is obviously a lot to do with the work that's going on with project cortex I'm not sure we're at move document sets I know they recently got new user experience features and so I would assume that engineering group are working on the API is the best way to raise your concerns about gaps like that is actually to go to our user voice so Microsoft graph user voice calm and you can provide feedback there and there's categories like for instance for SharePoint which is a work on the graph to request those document sets and our program managers there will actually state whether those features are in review or they're in the backlog or they're being worked on so please go to Microsoft graph user voice calm to provide that feedback okay some components there's some great work meticulous Docs with examples community support thank you we would work very hard to engage with people here we love the fact that we had so many people to call today so big thank you there Jake I'm happy to take that off the line Jake at Microsoft comm and I can make sure you're all plugged in there from a partner perspective and then you're welcome in terms of saying thanks for the answer there on that I'm so with that this will be recorded please check out everything that's going on inside of the other community calls that are also promoted on the developer box watch the 365 and we will see you next month on February 4th thank you again to Nicola and Todd for presenting today and I'm really excited to see what you do with this sample it is on github so we expect to see you have feature ideas we would love they ours against the sample as you add new features and functionality into this this is a solution template that we are going to be evolving so expect to build time frame that will be doing more with this sample and so will evolve this as the platform evolve so a big thank you to everyone involved and we will see you next month on February 4th at 8:00 a.m. PDT [Music]