Microsoft 365 Community Microsoft Graph, 1 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Find meeting times for multiple people on Microsoft 365 with Microsoft Graph

Description

In this 13-minute developer focused demo, Waldek Mastykarz shows his long awaited Hackathon result that requires adding very little code to your application. The simple capability allows schedulers to select attendees, meeting duration, and returns times all participants are available. Select a time, meeting subject and location. Press the Schedule meeting button, done. Same experience as in Outlook, but in your own app! Step through the code from Microsoft Graph Toolkit and Graph JavaScript SDK that enables this capability. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 1, 2022.

Demo Presenter
• Waldek Mastykarz (Microsoft) | @waldekm

Supporting materials
• Documentation - Microsoft Graph Toolkit overview | https://learn.microsoft.com/graph/toolkit/overview
• Repo - Microsoft Graph Toolkit | https://github.com/microsoftgraph/microsoft-graph-toolkit
• Documentation - Get started with Microsoft Graph Toolkit | https://learn.microsoft.com/graph/toolkit/get-started/overview
• Documentation - Microsoft Graph SDK overview | https://learn.microsoft.com/graph/sdks/sdks-overview
• Repo - Microsoft Graph JavaScript Client Library | https://github.com/microsoftgraph/msgraph-sdk-javascript

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

A

I'd like to walk you through a scenario that we hear a lot about in case when people build apps for work right, so apps for our work are apps that you build forward. These are the apps that help you manage projects orders anything you might need in the context of your work, and one case that we have is well imagine that you manage a project and on the project there is a project team, and maybe you need to plan a meeting with them to get a status update.

A

Do a review sign up for something whatever well typically, the way you would go about it is that in one app that management that manages the project, you would have the project info the info about the team people, and then you would do what you would go to another app. You would go to Outlook start the process of creating a meeting, adding attendees, fighting and meeting time and whatnot right. Why couldn't you have this?

A

The ability to do that already within your app, because in there you already have info about who is on the team, and these are your colleagues. So why not be able to create a meeting with them immediately from the app? So what you see on the screen is a simplified experience of something that you could integrate in your work, app that allows you to do exactly that.

A

That gives you the ability to tap into data and insights that you have already stored on Microsoft 365 from within the workout and basically tie these two into one so that users can stay in the context of their work right. So in this case, because I don't have the uh a workout, let me pick a few people on my team right. So we will pick three folks and then let's say that we want to find a spot for four of us.

A

So so three of them and me, which is here included uh in this app, we want to find a meeting spot for 25 minutes in the coming days, and at this time we are calling into the Microsoft graph we're asking graph like hey. Is there a time for us to meet, and apparently we have three options like we have one today, and there are two tomorrow. So, let's pick one of them and let's say we want to do a project review and we want to meet in room a schedule, a meeting, and it's done so.

A

It's really simplistic and it's kind of the same experience as you would have in Outlook, but it's not in Outlook, and the power of that is again. You can keep people in the context of their work. They don't need to have two apps open, getting attendees from one app getting them into Outlook. Finding the meeting they're confirming things. No, you can do all of that from within the same app for work that you already use for other things.

A

So, like this looks great. The next part is: how does it work?

A

Let's have a look at some code right, so here I have basically a single page, app that I built without any JavaScript framework like no react, no angular, it's just vanilla, JavaScript right and I have two files that are really the core of the app first one is this thing here which defines the ID of my Azure ID app that is backed or that backs this app and I put it separately, because imagine that you work with other devs on your team and you don't want to be in each other's way, because maybe you're experimenting with things.

A

Maybe somebody works on a different part of the app and they want to be able to try things out right, and maybe you work with your own tenants. So everybody wants to be able to bring their own AED app. Now. Imagine that I would put this good into my app every single time. I commit this file to git right. It would be a change and then I would overwrite everybody else's so by keeping this separate, I am not in other people's way right.

A

So this is a good tip for you to keep in mind when you work with other devs on your team. Now. Another part is right, so this is built. We already talked about that this is built using Microsoft graph right. It uses Microsoft graph to tap into data and insights from Microsoft 365., but there's also one more thing that we use. We use the Microsoft graph toolkit for this part here to be able to invite attendees, because otherwise I would need to build this UI to.

A

Let me call out to graph download people download their pictures build some kind of input box. Why I can bring this in with the single line of HTML here this one line gives me the ability to find people in my org and pick them select them and whatnot right. So this is really easy way for you to build apps that are connected to graph. This one line is all you need to have this experience here and, of course, because we're building an app that is tied to Microsoft 365.

A

We need to do off right, and we probably know next to time zones and regex. There is auth, it's tough It's, hard, it's complicated. There are different flows, 20 million things you have to know about. It's tough and the other cool thing is: if you use Microsoft graph toolkit, what is it that you need to implement us in your app? Well? First, first thing: you need to bring in Microsoft graph toolkit right like you, you need to download it to your app to you need to add a login button right.

A

So basically, this is the control here that allows users to sign into your app. This is literally the single line, and then three you have to tell uh M MGT, as it's called for short right. How do you want to authenticate to your app and let me find the right person uh the right piece of the code- it's here right so in here, I'm saying that I want MGT to use msl2 right, so Amazon being the auth library that we offer for at Microsoft.

A

For for us right, and we wanted to use the idea that I had I want the app to ask the user to give me access to users, people so that I can search for other folks. I need also access to calendar, so that I can confine the times uh on which we can meet, and then I also want to be able to create an event, because at the end of the day, we want to be able to create the meeting right.

A

So these are the things that I asked up front, and this is literally all I have to do nothing more. So this part here and then all the way up, a login and I'm good to go. I don't need to worry about which flow to use where to store the token how to refresh it. Mgt takes care of all of that. For me, allowing me basically to focus on building my app, so the cool thing is Right.

A

We've seen I can log into my app the most important part I can pick attendees people from my work already. The next part is how do I get the meeting times at which we could meet well. My first idea when I built this app was well, so do I need to get like his calendar and her and her and then his and then find meeting spots, take into account time zones and iterate through all that. Well, that's an option for sure, but there's a way easier way.

A

It turns out that in in Microsoft graph we have this API named find meeting times, and it is here so just by calling this one API and passing in people with whom I want to meet and saying for how long I want to meet right. So do I want to meet for 25 minutes 55 minutes hour, passing that as an option as well as few other things. I will get back the meeting times right.

A

So graph is doing the heavy work for me, taking into account uh time zones uh already existing meetings and so forth, and so on and I get back all this info directly right. The way it works. Let's have a quick look at the network Tab and let's do another request so that we can see it. What is it that we get and get back? Let's zoom in into that, so this is the data that I get from graph I get like okay, who is available? Well, everybody is free.

A

I pick three folks, including me: we are all free. The confidence is a hundred meaning everybody will be able to join. You can also say to graph hey let this meeting go through if at least three out of four folks will be able to join, and then you will get some additional things about the start, the end time, time zones and all that, so all of that info is already available as well as some additional info. That explains why Microsoft graph picked this particular spot.

A

Well, because it's one of the nearest time when everybody is available so cool right. We get all these insights for free right and then once we have this, what is another step that we have left well? Well, we pick a time we add, subject and location and create a meeting and the way that works. We go another API from the Microsoft graph events right. So two events we post again subject the meeting start and end which we get from the previous call.

A

We picked our attendees that we get from MGT right the Picker and then we basically submit that to Microsoft graph and with that create event. Now the cool thing is right. If you know a little bit about MGT MGT gives me the ability to add this picker to my app, but it doesn't have anything for me. That would allow me to find the meeting times or create a meeting.

A

So how do I go about it right because, like I have one way to authenticate with MGT to my app, but how come that I can then call graph well, the cool thing is: is that MGT internally uses the graph JavaScript SDK and the cool thing is that it not only uses it internally, but it also exposes it so that I can use it in my code too. So let me show you on the fine meeting times here.

A

Let me see so here: I have a graph, client and I think I get it I set it somewhere here right. So here what I do in this app is I keep track when user signs into my app right, so I keep track when uh the state will change. What I want to do is I want to see hey if the user authenticates I want to take.

A

uh Take a reference to the graph client, which is the graph JavaScript, SDK and I, want to store it in a variable that I can then use across my app for calling graph, and the cool thing is. This is basically the fully fledged graph JavaScript SDK with all abilities, the middleware, the handling of Errors throttling, and all that all of that it has already in it, and it's already pre-authenticated so I can I, don't need to worry about auth at all.

A

I can just call graph directly and that's exactly what I do here right so here when people sign into this app I take a reference to graph and basically from that point on I can call any API on the Microsoft graph, assuming that I have access to it right. So here so here, I got access, I requested a few Scopes, and that gives me access to some apis on Microsoft graph, which I think they can use to find the meeting times and create a meeting.

A

So this is a really simple, yet a powerful thing that you can really easily build with the Microsoft graph toolkit and Microsoft JavaScript SDK, something that you would reasonably want to integrate in your work app. So with that, let me catch up with you with. Is there anything that you ask on a chat, and maybe, as I can be my lovely assistant and see if there is anything that I should reply to or respond? If there's anything that folks ask that I should respond to live.

B

There was a few follow-up questions, nothing too specific how the desktop handle external users or domains would that actually work.

A

B

A good question.

A

It doesn't at all because it doesn't have access to their calendars right so right now, this will be for internal meetings. Only.

B

Yep and, of course, find time is the one application which would work with externals, but um this one. This particular thing is a great example on internal meetings uh setting up uh inside of the company, but other than that there was a good amount of discussion.