Microsoft 365 Community Microsoft Graph, 25 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Find Time solution with Microsoft Graph and Power Apps

Description

In this 19-minute developer-focused demo, Luise Freese expands Waldek Mastykarz’s meetings app into a themes-aware Power Apps canvas app for Teams that leverages Microsoft Graph! In Graph Explorer, create calls to 3 endpoints - populate meeting picker, identify meeting slots, and create an event. Add calls (actions) to a Power Apps custom connector that will be called from your canvas app. Schedule a Teams meeting in canvas app within Teams.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on January 5, 2023.

Demo Presenter
• Luise Freese | @luisefreese

Supporting materials
• Article - #65 Find meeting times and schedule a meeting using Microsoft Graph – Waldek Mastykarz | https://blog.mastykarz.nl/find-meeting-times-schedule-meeting-microsoft-graph/
• Demo - Find meeting times for multiple people on Microsoft 365 with Microsoft Graph - Waldek Mastykarz | https://youtu.be/EzN0U_1QkVs
• Sandbox - Microsoft Graph Toolkit Playground | https://mgt.dev/
• Tool – Microsoft Graph Explorer | https://mgt.dev/
• Sample – Fluent UI for Teams (Northstar) theme | https://adoption.microsoft.com/sample-solution-gallery/sample/fluent-ui-for-teams-theme/
• Sample – Microsoft Graph toolkit people-picker lookalike for Power Apps | https://www.m365princess.com/blogs/microsoft-graph-people-picker-power-apps/

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

👋 Join to our weekly Microsoft 365 & Power Platform Community calls to learn more. These are PUBLIC calls for you to get access on the latest details from Microsoft and to see awesome demos from community on these technologies - Download recurrent invites from https://aka.ms/community/calls

A

Foreign term solution for our with graph and powerapps and for everyone who does not still know me: hi I'm, Louisa I'm, an M365 empirical platform consultant based in Germany um I'm, an MVP in two categories, which is M365 development at business applications, I blog at M365 princess.com, and, if you'd like to follow me on Twitter, that's at Louisa Fraser, which happens to be my name.

A

So the problem that I wanted to solve is how to find a suitable meeting time with lots of people. So, of course you have quite some options. You can send endless emails back and forth so and, as you might see indicated by this Emoji I, don't like that and then of course there are tools for you to do that like fight time in Outlook.

A

um But then you need to wait until other people replied if they do have time or not or what they prefer, and literally this can take a little bit longer as well. If you really need to schedule a large meeting and of course you can also contact switch to Outlook and use this super intuitive feature called schedule. A meeting. No one knows how to do this and most people mess up with that and it's not intuitive, um especially regarding time zones.

A

So that is an issue as well and also I, don't like the fact that usually I work a lot in teams and then I need to switch to Outlook to do that and I really wanted to have a different experience, and that, of course would be have an app for teams in teams and let Microsoft graph do that heavy lifting of scheduling the meeting and for this usable time for all of these people, for you, so um very, very big, disclaimer I stole this idea from valdek MasterCards, who published a blog post and a sample, and just like a video and everything about that already and I will um post the links um after this demo into the chat as well.

A

But um let's talk about why I did that. So it is an amazing sample because, as you can see here in that screenshot, which happens to be from his blog um like in the chat soon as well, it is really about first picking some people that you really want to have a meeting with um decide on the meeting.

A

Duration and I find 25 minutes is a perfect duration for a meeting because meeting shouldn't be longer, um but um you can of course, stick to other times as well uh that have a button that finds you those meeting times and, of course, yes, this is powered by graph API. That will return um some meeting slots that where all of these people are available, and then you just enter your location and a meeting subject and schedule that meeting right away. So that is what the app does and I was like.

A

Okay, I like that, but I wanted to have that as a powerapps canvas app and I wanted to have that in a powerapps canvas apps for thieves, um obviously um I know my way around graph, so I already knew, which end points I needed to hit, because well they described that in pretty much detail. It was like. Okay, so then, maybe first start with the UI and I mean how hard can it be um to create that, and really these were famous last words, because I promise you I really had some, let's say UI requirements.

A

I did not only want that to be kind of pretty-ish, but I wanted that to look like Microsoft graph toolkit, which happens to be that with World accused in his solution problem with that is that Microsoft graph took it, and we will talk about that in a minute as well. So it's a set of web components and providers that make you more easily interact with data that sits in graph, so literally everything and I'm 365, but that is not available to powerapps, so I needed to create something to still make that happen.

A

Next requirements, I really wanted to adopt that look and feel of team. So usually powerapps. Look like a little bit out of place and not really up to date, when you put them into teams and I really wanted to app that blends into that look and feel, and then, of course, I wanted to have that themes where so I like to use dark mode. Maybe you like to use default mode.

B

A

The other way around and, of course, um considering high contrast as well so um I think it is um time to demo you some stuff so that we understand what we are talking about. So I will first start with Microsoft graph toolkit playground, so Microsoft graph, our 2K playground. It's a beautiful website that lets you explore and play around uh with the toolkit component and I just wanted to show you what was about the look and feel that I was aiming at. So you can see the text input box, and this prompts here.

A

This pop-up and I can now select those people here and, of course, I can also just search for these people to more easily find them and then select those, and that was the look and feel that I was aiming for now. Let's have a look how this plays out in the app so that you get a perception on what I did. So um this is my app.

A

um It is in Microsoft teams we're here in my productivity Hub, which happens to be an app for my meetings, my tasks, my files, people I work with just like this single pane of glass that we all want um to have, and here in that section about my meetings. I do not only have the upcoming and post meetings, but I also have a link for hey make a new meeting.

A

So when I select that I can start typing a name like a and then I want to have Adele collecting her or selecting gravy or selecting Miriam, but I can also um type right away to more easily find my co-workers. I can collapse that then again, I will find a meeting duration that is suitable for me.

A

Let's say 45 minutes and I want to find a meeting time and, as you can see, I get some suggestions back here and I will I will disciple this one here provides um uh provide a title, so this is just another meeting and schedule that meeting right away right from um this app and you can see my meeting just another meeting with Adele already Miriam has been scheduled, so I even got an indication that that happened as well, if I'm, not a user of the default uh theme in teams and if I restart that app, because of course that can't happen um if this is already started because of the way I designed that um this works pretty nicely in dark mode as well, and you can see that it just here, though, um that I could meet my design requirements now.

A

How does that work under the hood? So what do we need to do so that we can find those people that we work with and also find the meeting slots where these people are available and then schedule that meeting so that everyone gets an invite for a team's meeting into their calendar? To better understand this? It's a very good idea to start with graph Explorer graph.

A

Explorer is one of my most favorite tools, because it lets me just like try out uh what happens or what do I get in return when I hit a certain endpoint in the graph API and of course we all usually I start with um get me, and when we do this, um we get information on who we are so we, as are logged in user, and what I needed to do is I wanted to hit.

A

Slash me slash people, because these are the people I primarily work with, um and what happens if you hit that end point, is you get an array of people that you work with? So this is your LX and Adele, and so many more people and we get extensive information on these people, so we needed to hear it. Slash me slash people to get those people so that we could put them into this people picker right. That's the first thing.

A

Second thing: we want to um get those meeting slots which happens to be a post request to slash me slash, find meeting times.

A

um We will need to provide the attendees. So, in this case, it is only one, but of course you can add more uh by providing here another object for that um person. Then, of course we need to have the time constraints, um so you need to provide when so in which time frame do you want to have that meeting I put a year in here, but it's usually so, depending on the calendar, of course, but it's usually just like in the next day, so it always picks.

A

um What is the closest availability of all people and then the meeting duration is uh good as well, so this year is 30 minutes, but if I wanted to have um 45 minutes, I would just um exchange that if we do this, if we run this, this will return an array with um time slots so that we know when all of these people um are available according to their calendars and um of course, I can then work with that in my app and you, you saw this that um after I clicked um this um this this this button for find my meeting times that it was thinking just like a second and after that um displaying the uh the the um available meetings left.

A

Third thing that we need to do now that we know okay, these five slots are available. uh We need to um create an event and I would uh then go for a slash me slash events, because that's my calendar and it's uh pretty um nice to do it that way. So of course you can um you can do that on teams as well, but that one is easier um and you will provide a subject. You will provide the start and the end, and of course that is the result of the previous call.

A

So we need to do this dynamically and then you will provide the attendees um of that meeting and then there's two things that are really important, so that this is also a teams meeting, because usually, if you do slash me, slash events that do not have these two properties, it's only a meeting and then you can meet in person, but you do not have that teams link, but we we want to do that to be inclusive to everyone.

A

So it needs to be in is online meeting is true, and online meeting provider needs to be teams for business. Okay, to bring that power that are now showed in the graph Explorer till the PowerApp I need to create a custom connector, so a custom connector is a proxy or a wrapper around that API. So in this case, Microsoft graph and then I can connect this connector to my power app and call this API, because it is not possible to call an API just like that.

A

I need to First create that connector and I will highlight um you can see. I have 16 actions in this connector here and I will highlight the three actions that we need to cover so that we know what's going on in this demo. So first it is the get my people. So what I do is.

A

It is the very same thing as we did in graph Explorer in the slash me slash people, and that will return my co-workers that I primarily work with, um and, of course that depends a little bit on how many messages and teams are filed, so it it calculates that, with um with some logic, so it is really how much you interact uh with another person.

A

uh Next thing that we need to do is we need to um do the get meeting times and I tell you.

A

This is a post request and we will hit slash me, slash, find meeting type and, of course the body is the very same as in graph Explorer, so that we can then um get this array of um suggested meeting times in return, and the last thing that we need to do is the post a meeting so I said it's post meeting and um we do slash me slash events and, of course, provide the very same body as in graph Explorer, which is why that is such a great tool, because it is literally just like really the same um so that I then can create the event to show you how we do this.

A

So this is the component, so this year is my screen, and now this fight meeting time is a grayed out, because there is no people in here, so I um I will not show this, but for the find meetings what it does is it connects to my connector.

A

It calls that action here it gets meeting times and provides the attendees the time constraints um if it shall return the uh reasons why it's suggested something and, of course, um the minimum attended percentage which needs to be 100 because I want all of them.

A

So this is the call that I am making and then, of course, I in return then get this array, and this array then will feed here my gallery, and the gallery consists um out of the um meeting time suggestions for the people picker itself, so you can see that is from a UI perspective. It is a little bit more elaborated than what you usually see in the powerapps I created a component for that um Worth.

A

To note about this component is this: is a text input box and now we have two galleries, so one Gallery is the gallery. People, which is my co-workers and that connect to the slash me slash. People um end point with that. Custom, connector and I took care of that. This really shows up nicely with pictures and the display name and that I have everything in here and the other Gallery is the gallery attendees.

A

So whenever I select one of those here, it disappears from that collection of people, and it appears here in my collection of attendees and if I as a user, made a mistake and I do not want to have Adele in here, then I can just like remove her, and she will appear here again in my gallery of attendees um those um items here. It is pretty easy so that shape here is a button in view Motors.

A

um Then we have the image which comes from the um of 365 user connector and then I inserted that again to that user ID. That I got from my um get my people action from the custom graph connector and then just the display name and next icon that takes care of removing that item again from my gallery.

A

um I included this expand and collapse and, as you can see, um the more I add here so that would not anymore fit in here, though I um I'm working on making this fully responsive, but it already looks quite nicely if I change the resolution or the screen size or screen orientation of that um next thing.

A

Next thing would be going here so after I select it after I selected um something here. So there needs to be a slot selected and it does not work right now. My designate all right.

A

Okay, it did work now it does not work anymore. Wait, wait, wait, wait here! It is. um We provide this uh meeting subject over here and then we will schedule the meeting and what happens on schedule for meeting. um It is again my connector and I say it's. The post meeting um action I will provide the subject and start at the end, and you can do a location so this here just wherever uh they attend.

A

These sit in a collection which I call call attendees, um and this is already in the correct format for that and yet again to make this a teams. Meeting we go for is online meeting is true and online meeting provider is teams for business. So it's really the very same thing as we tried out in graph Explorer and then just put that into a custom connector and make that call, then in a PowerApp.

A

So if you now wonder um well either this is nice, but um I would like to have that, because I could really use that, because the um the built-in people picker is a little bit uh ugly. Then I have some resources for you, so the um sample for the fluid. You are not the theme so that everything looks like teams already, and you have this theme: awareness for a dark default and high contrast mode, I published that as a sample and this um people pick a look-alike component, I published that also um as a sample.

A

So you can find that at adoption.microsoft.com and I also published a blog post. That explains how you can build such a solution um by yourself and with that back to your debit.

B

That was uh wait for it amazing Luisa. Are you really powered up right? Perfect, awesome, really, really great stuff all right. Well, thank you and those links are in the chat, everybody for learning more about that, uh and so, if you want to, you can definitely get more involved and reach out and collaborate with Luisa.