Microsoft 365 Community Microsoft Graph Toolkit, 17 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Graph Toolkit – Using the People Picker Component in your solutions

Description

In this 17-minute developer focused demo, the fourth session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph People picker control and options for customization. Search for users and/or groups (DG, SG, M365, Teams groups) in an organization from inside your apps and forms. Find people trending around me, groups, users from a group, direct reports, newly added to team, people by e-mail address. Build a custom People picker component. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - People-Picker component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/people-picker
• MGT Playground – People Picker | https://mgt.dev/?path=/story/components-mgt-people-Picker--people-picker
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

We will be covering the people picker today, so in our journey to look at um a vast majority of our controls uh within the microsoft graph toolkit today. We're gonna really talk about the people picker, how that drives the value to select different type of entities around groups and the user entities inside microsoft graph, but before we go into demo mode, I want to do a quick recap of what is the microsoft graph toolkit or sometimes you might hear it about mgt, so the microsoft graph toolkit is a collection of reusable and framework agnostic components.

A

It also adds authentication providers for accessing and working with the microsoft graph, so think about how you can drag and drop fully functional components inside your web applications, whether they are built with angular, with view with react with plain html, whatever you want, these controls are web components that are uh delivering value across all the different frameworks that exist out there.

A

They are also very customizable and they work on any type of modern browser. So that's really the value that we're trying to deliver with the microsoft graph toolkit. Why would you use them? First? You want to cut on development time, building capabilities that are connecting to microsoft. Graph, sometimes can be even if connecting to graph is usually a task that is quite easy to do.

A

Building controls are delivering rich value is sometimes hard, so we want to save you some time and really focus on your business value by adding these ui components, just with a simple line of code inside your application, we're going to look at that a little bit later, um they're beautiful but they're flexible. So we make the microsoft graph toolkit controls. Look like microsoft, 365, leveraging the fluid ui design system that we have, but also we make them fully customizable.

A

So if you want to bring your own branding your own design guidelines, you can also do that so providing the default value, but also enhancing the experience with customizing it to your own needs. And finally, it just works everywhere as it's based on the web standards, any type of browsers any type of framework will use that. So you don't have to find a specific library for angular or a specific library for vue.js. No, you just need to use microsoft.

A

Graph token and it's going to work across the variety of different capabilities that we have in the web today. I always love to say that there's a new javascript framework being invented every 15 seconds, so now we're putting potentially at like four new frameworks since I started this uh session today. So um that's the beauty of the graph toolkit we work even with the the very very, very newest stuff.

A

Today we will be talking about the people picker. Well, the people. Picker is a simple component, but that drives so much value.

A

How many times do you run across a scenario where you want to be able to build a form, build a ui that allows people to select users or groups from your organization, maybe you're, building uh and to build on top of demo from dan today, maybe you're, building something around emails and you'd love to have like a two field and a cc field and a bcc field where you can select people from around the organization? Well, that's one of the scenarios that delivered.

A

Maybe you want to assign somebody you can use this kind of control and with all the different capabilities and settings that you can put on that control, you can really customize it to your own needs, so how to start. You drop an mgt into your page and you use the mgt people picker component. So let me dive into the code right away, and this is our app right. Our app starts with we're referencing um our mgt packages.

A

Here, I'm using like plain html, the same plain html we've been using throughout the previous week, so not even like a framework in there, just like plain html, a couple of simple stylings to make it beautiful and finally we're using our provider and our login component. The provider connects your app to your azure ad application and enforces all the different scopes and permissions that you need will also pop up for um your username and password if you're not already logged in thanks to the mgt login component. That is right here.

A

On top, you can see it here and finally, afterwards, we're just going to go through and look at all the different samples we have here. Let me just zoom in this guy a little bit, so you can see it in a little bit better for y'all. So, let's start with a simple picker experience, a simple picker experience is around one of the endpoints of graph, which is slash me. Slash people that slash me slash.

A

People endpoint on graph is super important because it's built out of all the different signals that we have in microsoft: 365, meaning that if today, I'm working very closely with vesa, even if vesa is not part of my direct organization or is not a direct report to me or whatsoever, there's still going to be a lot of signals, lots of chats of emails, lots of collaboration around files and want to make sure that the people you can find in these circumstances are the people that things are more relevant to you and that's exactly what we're doing here.

A

So when we're just using the mtt people picker, as is well when I click here, the people that we're seeing here are the people that are around me. It's not people that are around based on the structure of the organization, but really with people that are around my collaborative style, and here I can select these people.

A

I will be able to select as many of them as I want, and I will be able to refer to these people to do something later, we're going to see that in just a bit, but this can be hooked up to any type of apps any types of web form that is relevant. What do you find in there? Well, you find by default the name, the picture. All of that is all customizable thanks to the way that we're building the microsoft graph toolkit with all the templates.

A

So let me just quickly go to our documentation page, so you can see it when you go to our documentation page in graph.microsoft.com, you go to the docs or you can just do slash ak.msl, slash, docs.

A

um You can find the the component you're looking for and you can actually go to the template, and these templates will tell you hey here: are all the templates you can overwrite. So if you're not happy with how it's being displayed here, you can always say: hey. You know what um the selected person, so, when the template that renders selected people exactly this, you can override it with your own html styles and your own html controls in there.

A

So here you don't even have to think about how this plays out uh you're going to have to redo the entire control. No, you just need to re redefine this specific template here we have an example of that. We did last week with our people component, but it's really up to you to define this. All the documentation is right here so now. What else does it do? It allows me to delete some of the of the person's wrong choice, but also it allows me to leverage other mgt controls like the people card, for instance.

A

So if I go on top of joanna here, I will be able to pull up the full person card of this person. So you see how all of these controls are very tightly connected together and really delivers uh really interesting value. So that's the simple way or the simpler way to use the mgt people picker. But let's say here that you want to specifically define a group of people, not the people around you, but the people that are in a specific group. You can also do this.

A

So when we're looking at this example here you can change first here the placeholder see it here. You can have a selection mode. So let's say I just want to select one single one and finally, I could say group group dash id equals and here you can paste in the id of a group or you can pass it via javascript, based on the result of a selection from I don't know, a group picker control and then automatically it's going to do that it's going to limit so right now, let's just use it without limiting it.

A

Now you see uh you were able to find your best colleague. So now, I'm popping up again the trending people around me. I'm gonna select alex and I won't be able to add anybody else. The controls becomes disabled for adding new people in there. I can clear and start again and choose whatever you think.

A

Let me go on to um the uh next one: a simple people picker for groups, so as part of the mgt people picker, you always have the ability to say what you're looking for by default here. It would say any okay and why that means you can look for anything. But in my case you know what I want to specifically look for groups, because I want to notify a group of people based on the different groups created in azure active directory.

A

What I can do here, I can go here and now you see the experience is not the same. The experience now allows me to find the most recent groups around me, and now I can say uh maybe I'm going to go in leadership. I want to notify leadership. I can do that. So you see now from a people. Picker, it's also a group picker that you can have here.

A

I can go this one and this one, and now I can do whatever I want with this when it's when you're using you can use distribution group, you can use microsoft, 365 groups, you can use security groups any of those. You can also limit um some of them right here. I think it would be group type.

A

For example, I think it's called unified. I go unscripted here, which is never a good idea, and there you go: here's all the unifi which are all microsoft, 365 groups or potentially even teams. So now I can go in here and select um all of them directly from the people bigger something also that is super relevant, especially when you're working with people within groups. You have the ability on a people picker to say I want to connect to this specific group id, but also I want to have transitive search.

A

So it means that not only I'm going to find the people within the specific group, but I'm also going to find the people that are in groups are within my group. So if your group has different structures, a group could have multiple groups. Well, in this case, you can use transitive search and you can find people from any of these nested groups right in here that you can use that's a great way to use um energy when you're building, I would say, advanced scenarios.

A

Now you want to get a little bit of interactivity. For example, you want to have a people picker with the selection change. So first here we're going to build just a regular people picker and underneath I'm going to have an mgt people component, where I'm going to showcase the selection from my people picker, I'm going to do it, I'm going to hook this id to a javascript function. So let me go to the javascript function right here.

A

So here you see I'm basically adding an event listener that is called the selection change to this id. So basically mgt will fire or will trigger the selection changed event when there's something new that like when the selection inside the combo box or inside the the picker changed, and what I'm going to do, I'm going to assign my other id the selection showcase, which is my list of people, I'm going to assign it to the details that are coming from my event here automatically.

A

We add all the details from the mgt picker, so all the data that is currently selected, we add it there and then afterwards we're just going to display it. So, for example, if I go here and I select sebastian now- you can see that just at the bottom here we have another thing. That was done. If I add lydia it's going to add lydia here, so you see how you can be very interactive and how you can interact with the different activities happening inside the picker.

A

So if I do this, it's also going to remove it, and if I do this now we're back to the beginning, so it's really how we're liking to uh think about the people thicker, because now it really allows you to build your custom logic in there. Some other things you can do with the people picker is right. Here is to predefine, which will be the user ids that will be selected. Think about if you're, storing your user ids in a database, or maybe you already have that array of people that you have access to here.

A

You can simply just pass in an array of user ids and we're gonna do a default selection on these. So you mean that I can continue adding some of them. I can add these guys, but they will always be there, but then I can also remove them. It's really up to me.

A

You can do the exact same thing for groups, so if you want to do a default selection on groups, you can do it using the default selected group ids, something you might want to do also is get data from another api or even from graph.

A

In this case, for example, what I want to do is, I want to here add all my direct reports as the pre-selected ones, but I don't have a way to specify which endpoint this is all about, and I don't know because it's dynamic, so I don't necessarily have all these user ids. So what I would have been doing is we added an id here, so we can hook ourselves onto this specific people picker and in javascript.

A

What we're going to do is we will be doing a call to graph we're going to validate that we are logged in and then afterwards we will be calling the slash, p, slash direct reports, which is an api that is available. That yields all my um all of my uh direct reports where I will be able to assign to the pre-selected people the result.value and from there.

A

I will be able to assign this so this can come from either from graph, but it can also come from any of your api and then the here we're going to be able to play with it. Something also interesting. We have put this in read only just because we disabled it maybe you're using in the display form. You don't want to enable people to modify it. Then you have the ability to do it here.

A

Finally, something that we enabled also is a people picker or almost like an email address speaker where you can add any email. For example. Here I can do seb outlook.

A

Dot com, then I can just hit enter this dear vesa.com. Is that your email vesa, um where you can microsoft.com uh there you go? I would not be surprised that would be true actually um and you would have the way to add any email address. So if you're building, I don't know an email, client or you want to do any of that, this really really allows you to do these kind of uh scenarios.

A

So if you want to look into the people bigger, I recommend that you are going to any of our resources, our repo, our docs, the samples that I'm building right now you can have all of the previous sessions, including today's one, our playground, if you want to go play with mgt and if you want to learn aka ms mgt mgt, learn back to you guys excellent. Thank you. Sebastian.