 On today's Visual Studio Toolbox, you're going to see how you can treat information in Office 365 services as data, which means you can query it. Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and today we are going to take a look at the Microsoft Graph and how you can use it in your.NET applications. So the first thing we'll do of course is review what the graph is, then we'll see how you can use it, how it works, and then we'll take a look at an application that uses it. The whole idea here is to introduce you to using the graph, and to get the creative juices flowing, and you can think about how best to take advantage of it in applications you're building. Best place to go learn about the graph is the docs, aka.ms forward slash VST forward slash graph docs. We'll take you to this overview of Microsoft Graph page, and the graph as it says is the gateway to data and intelligence in Microsoft 365. Now, what does that mean? Think about the information that's in office applications. So for example, you've got mail, mail messages, you've got contacts, you've got calendar invites, you've got tasks, you've got files stored in SharePoint or OneDrive, you've got all this information out there, and you know how to use it, you know how to fire up, outlook, and work with your mail in your calendar, etc., and you know how to work with files in SharePoint or OneDrive. But you might want to be able to ask questions of these things. For example, I want to know, do I have an e-mail from a certain person? Do I have a bang e-mail from my boss? Has a document been created for a customer? What are the next three tasks I need to do for this customer? There are certain questions you might want to ask from inside applications. Now imagine you're in an app, whether it's a mobile app or a web app doesn't matter, and you have a question, what are the next three tasks I need to do for this customer? You can contact Switch, go over into Outlook, go to your tasks, see what they are, come back to the app. Wouldn't it be cool if you could just get answers to those questions through a query? That's what the Microsoft Graph enables you to do. If we look further down, we can see that the Graph is basically how you can using a RESTful API query data in various places that they're stored in various applications across the spectrum. So we're going to focus today on e-mail, and calendar, and contacts, and OneDrive. Those are the examples I have in my little sample app, but it goes beyond that. Okay. Interesting. How does this work? Best place to find out is to go play with it, and that's what the Graph Explorers for, and the Graph Explorer is a way for you to play around with the RESTful API that gives you access to all of this information. You can use a sample account, or you can sign in and use your real data. Let's do that. I'm going to sign in as me. Oh, cool. I don't have to retype everything. Awesome. Okay. So it knows it's me. Yep, that's me. Then there are particular queries. So for example, let's get my profile, and that is graph.microsoft.com, v1.0 forward slash me, and it returns JSON that tells you all about me, or I could get my mail, all the items in my drive. I can get my manager, which at this point, I kind of don't have one on my personal, unless you consider my wife my manager, but I don't know that the graph knows that. There are additional things we can do, so we can see more samples. So for example, let's look at contacts and calendar. All right. So show me my mail. So forward slash me, forward slash messages returns this JSON that is all of the mail in my inbox, or I could see my important mail. So I can set a filter, importance equals high. So I could say importance equal high and sender equals my manager, and that's how I could query to say, do I have a bang mail from my manager? Because if I do, there's something I need to do. What else can we do? We can send mail, we can forward mail, we can see events for the next week. So that looks like me calendar view, and then a filter of start time equals today. We can do contacts, so show me my contacts. So me forward slash contacts returns a list of my contacts, and I'm going to try very hard in this video not to show you my real contacts because they're real people and I don't want to share their names. So play around with the graph, explore, understand the queries you can run, and now the question is, we want to be able to use those inside an application. So how are we going to do that? Well, if you're going to getting started and go down to UWP, I built the UWP app, it's really quite simple. You create the app, so we just create a basic UWP app, and then you need to register the app in the Azure Active Directory admin center because you're going to need to login, you're going to need to authenticate. All right, in order to read my mail, my contacts, I need to sign into the application. This gets easier and easier all the time to do this actual authentication. If I go to the Active Directory admin center and I sign in to Azure, I go to Azure Active Directory and I go to App Registrations. I can add a new app which I did yesterday. This is the Toolbox Graph demo app, and you get this client ID, which is very important because that's what when you sign in, you're going to pass that along to Azure Active Directory, and that gives you the ability to sign in. So that's an important piece of the puzzle. So I've got that in my app here. I also have various Nougat packages. I have Microsoft.Graph and that is a.NET client that wraps the Graph SDK so that you can build these queries by hand. So if you go back to the Graph Explorer, you of course could send this as a query string. But the cool thing about using the SDK is you get to use GraphClient.Me.etc. You get to use that syntax. So I've got Microsoft Graph. I'm using a few things from the UWP toolkit. So I've got controls, I've got Graph, which again wraps the SDK, and then I've got a data grid, and then of course I've got UWP. All right. Next thing I need are some permissions. So here's that app ID that I registered the app under, and then there are certain scopes. I want to be able to read who the user is. I want to be able to read and write mail. I want to be able to send mail, read and write contacts, read and write calendar items, access directories, access files. So I specify the permissions that the app is going to require, and then of course the first time the user logs in, it says this application wants to be able to read your mail, send mail on your behalf, manage your contacts, etc. Those are all specified here. Okay. Then what do we do? So in the main page when the app starts up, this code and of course all of this code is available to you in GitHub. So here's the application, I'll have a link for that in the show notes. So this is setting up authentication, and then when the app starts, we grab a new instance of the graph client. So if we've logged in successfully, we grab an instance of the graph client, and then we can start sending requests. So let's see how this works for starters. Here's the app, starts up, and it says please sign in to continue. This sign in button here straight out of the UWP toolkit which is awesome. I sign in, and because I've signed in repeatedly, and it knows who I am, I'm not asked to enter my user ID, my password, and then have it tell me all the permissions that it will be required. So I've already done that. So now it knows this is me, and now when I send requests to the graph API, these requests will be for me. All right. So what have I got in here? I've got the ability to work with messages and contacts and events and drive items, and I noticed that I have a to-do item to update these icons which I will do, haven't quite gotten there yet. Okay. So messages. What can we do with messages? Well, to get a sense of how this works, let's just get my mail. Now, of course, you're asking yourself, why would you write a front-end to get your mail when you already have multiple front-ends to get your mail, like the mail app and outlook and anything else? The reason is to get an understanding of how this all works. So let's just get my mail and display it in a grid. All right. There's my mail. What did we do here? So if we go to the messages page, let's get rid of some of these. I've got an instance of the Graph Service Client. This is my object that talks to the graph. All right. I've already authenticated, so this graph client is all set to go. Now what I do is all I'd say is graphClient.me.messages.request. That sends a request via the RESTful API to my Exchange Server to send me back my messages. Do I want them all? Probably not. So I'm just going to get the top 20. Do I want all of the fields? Probably not. So I'm going to use a select to say, just send me the sender, who it's from, what the subject is, and the importance, and this is asynchronous. So at this point, user messages will contain my mail, my first 20 emails. Then I put together a collection, my messages and observable collection based on a model for messages and I fill that out, and then I set the item source of the grid to that, and I say here are your first 20 email messages, and this is what I get. Now, if I click on one, then I can go and get additional information on that. So if I come in here to where are we, where is the selection? Do-do-do-do-do, selection changed, there it is. Okay. So I need the selected item, I need the ID of that because if I say me.messages and then I pass the ID of that message, that's how I get an individual message, and then I just display that information in these text boxes. Okay. Mail gets all my mail, get inbox mail, gets just the mail in my inbox, and that looks a little bit different. Do-do-do, where is inbox? Here it is. So me.mailfolders.inbox is just my inbox as opposed to all of my mail, regardless of what folders it's in. All right. And the cool thing about having inbox is, inbox has a property called total item count, and a property called unread item count, which is why I can display that I have 940 messages, 588 of them are unread. That sounds pretty right for my personal mail. Now, do I have any important mail? Yeah. Apparently, I have four bangmails. All right. So, importance, it's just a filter. inbox.messages.request, filter, importance equals high and that brings back important messages. Now, I want to know if I have a bangmail from my boss. Here's the scenario going on vacation, but I'm expecting an important mail from my manager, which I need to respond to right away. So what happens? Oh, I get out my phone or my computer and I fire up Outlook and I look to see and now I get distracted and I spend 20 minutes in mail and all I wanted to know is, do I have a bangmail from my manager? Way to solve it is create a simple application. Could be UWP, could be a website, could be a Xamarin app. And here's the query. The filter is important, equals high, and sender's email address equals somebody. And if anything comes back, you have an important mail from that person, otherwise no. So you create a simple app that does two things. You got a green circle and a red circle. You launch the app, you run that query. If the query returns nothing, green circle with a smiley face. If anything comes back from that query, red circle with a frowny face because now you're going to have to fire up Outlook and read that mail. But again, the idea is that within an application I've got a question. Do I have a particular email or a particular type of email? If yes, do something if no, do something else. That's the beauty of the graph. I can send mail, reply to mail, forward mail, delete mail, just take a quick look at those, just to see what the code looks like. So to send, I create a recipient, send the email address, what's the content, and then graphclient.me.sendmail and to reply. I'm going to get a particular mail. So messages the ID of the mail I'm replying to and do a reply. Then if I want to forward, that's forward and delete, as you might expect, messages the ID, delete async. It's actually quite simple. So in addition to querying, I can take actions. We can do similar things for contacts. So get contacts and in order not to show real information on real people, I created three individuals, three anonymous individuals, and then under contacts, it's pretty similar code. Graphclient.me.contacts, Request. Now contacts doesn't support the filtering that I wanted quite yet. So what I have to do is, as I loop through the contents and fill out my list, I'm sorry, contacts and fill out the list of contacts, I just want to know does display name start with anonymous, and that's how I get the three people, anonymous person, senior, junior, and anonymous person, the third. Then if I select one, again, I grab their ID, me.contacts, pass in the ID, will basically add a where clause and bring back the information for just that individual. I can update contacts. So here anonymous person, senior, let's update them, then refresh, get the contacts, anonymous person, senior, my best friend ever. All I did was, I got a new contact, set personal notes to my best friend ever, and then I did an update. So you create a new instance of contact, fill out only the data that you want changed, and then happily the Graph API is smart enough to only update that field when you send the update. Of course, I can create a contact, so you create a new contact item, fill out the data, and then add async, the contact to add, and of course, delete, I delete async for that specific contact. We can play around with events, get the events. It's similar, it's hopefully starting to look fairly redundant here but that's a good thing. So where did I put events? There it is. Now I'm going to play around with query options for date and time. So me.calendar.calendarview is my calendar. Of course, if you have multiple calendars, you'll pick one versus the other. Then I want to bring back the subject, the organizer, the location, the start and the end, and then just display that information in a grid. I want to get today's events. So I've got query options for start time and end time, and I can do things like also get birthdays. So who's got birthdays coming up? Oh. So I'm going to look for categories. So I created in my calendar, a category called birthday, and I just set a filter, categories, any category. So if any mail, any event, calendar event has one, remember calendar events can have multiple categories. So of those categories are any of them set to birthday, and if so, set that filter, and then I just bring back the individual birthdays. Of course, I can create an event, update an event, delete an event. What you do here is create, fill out a list of attendees, the item body, and get down to events.addasync, events.updateasync, and as you would now expect, events pass the ID of the particular event and delete it. All right. Then the last thing I want to show is drive items. So scenario here is I want to be able to go out to my one drive and programmatically see what's out there or more interestingly asked questions. Although this might be a way if you wanted to build your own photo viewer where you go out to one drive and bring down pictures you've taken, and create an app that lets you scroll through or search. You could do that. So the first thing I'm going to do is get a list of the folders I have out in one drive, and again, I've given this permission, directory access as user all files read, right is the ability to go out and see what folders I have, and what files are in there. So let's go down to backpacking loss lake, and then let's get a list of all the files in there, and then let's select one and display it. There we go. I've got a little bit of a scrolling issue, so you can't see it. The app's not optimized for this display size. All right. Let's take a look at the code. Drive items. So get folders. So me.drive.root.children, if I go to the root folder, if I go to the root folder and get the children, those are going to be folders. Then when I want the files, I'm going to go to the particular folder and get the children of that folder. So the children of the root are folders, and the children of folders are the contents or the files in there. Then I could do something like search. All right. So I'm looking for a folder or a file that says direct deposit. So here's a scenario. You've got an app that you use for working with customers, and you want to know has the contract been created? So yes, of course. Again, you could contact switch and go out to OneDrive or SharePoint, navigate down to the folder for that client, and look to see if the contract's created. Wouldn't it be nicer if when you call up that customer, when the customer's data is displayed in the application, you also do a query. Go out to SharePoint or OneDrive or wherever you're storing things, and look for a particular folder for that customer, look for a particular file, and then you can say contract has been created or contract still pending. So again, it's all about asking questions and doing something with that information as opposed to having to do the context switch. So that in a nutshell and kind of quickly is what the graph gives you the ability to do. Again, this sample application is up on GitHub. I will put a link to that and I'll continue making some changes to it because there are a couple of things I want to change. But it gives you a good idea of the types of things you can do with the graph. Hopefully, this is also giving you some ideas. The docs are excellent on it and it really gives you the ability to take advantage, treat the information that's out there as data. We have data stored in SQL database. We have data stored in Cosmos DB. You know how to query that. There's data stored in our productivity apps in Office 365, and now you can treat that as data as well. So hope you enjoyed that and we will see you next time on Visual Studio Toolbox.