Microsoft 365 Community Community Demos, 19 Jan 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Extend Azure AD to add pronouns to a people card component in Power Apps using Microsoft Graph

Description

In this 14-minute developer-focused demo, Luise Freese – starts off by registering an application in Azure AD to create extension. In Graph Explorer - associate new property with user object, patch user with new property and get user to check if property is in place. Create custom connector for Power Platform (bring Graph API into Power Platform) and call custom connector in a Power Apps canvas app (people card you create) to display and patch pronouns.

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

Demo Presenter
• Luise Freese | @luisefreese

Community Call Conversation
• aka.ms/Jan19-Demo1

Supporting materials
• Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Tool – Microsoft Graph Explorer | aka.ms/ge
• Article - How to add Azure AD directory extensions | https://www.m365princess.com/blogs/azure-ad-directory-extensions/

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

A

Because I felt like pronouns would be a thing and it would be super cool if I could have an app and show pronouns in there very very short about me so hi my name is Louisa um I'm, an M365 and Power Platform consultant based in Germany I'm, an MVP I blog at m365princess.com, and you will surely find me on Twitter at Louisa Fraser.

A

The best way to, of course build something like that, like a component for a people card would be Microsoft graph toolkit, and it's pretty amazing how easily you could do that in code problem with that is that those components of Microsoft graph toolkit they are not available in powerapps. So I talked about this before and I will talk about this again, so I would love if graph toolkit would be available in Power Platform natively.

A

Until to that point, I would just like keep on creating my own components that look like MGT components, but in fact they aren't.

A

So I was a little bit disappointed that even in that mjt component for this paper card, there are no fields for pronouns, and that comes back that in Azure ID there is no field for pronouns and I was like, but there needs to be a way so that I kind of just like early locally, just like update some value, but that this is that just like inactive directory and that I can then query this with graph.

A

So um what I wanted to do, or what I did is I created a directory extension for Azure active directory in graph Explorer, which is just like the easiest way how to do this by associating a new property to the user object. So we can do this with the user, with a group with devices and so on and so forth. But I decided to do that with the user, because I wanted to add pronouns for users.

A

So that's just like made sense to me to do this when we do that we create this property, but after that we need to patch a user object with this new property that we created and after that, we of course want to check if that new property and the new value for that new property now is in place.

A

So we're going to check this as well and after we see that this is going to happen in graph Explorer, we need to bring the power of the graph API into Power Platform, and that in can only happen through a customer connector, which we first need to create in order to bring those calls into a PowerApp, and then we will use that custom connector in a PowerApp to display these new pronouns and to patch those new pronouns that we want to have on a paper card. So this is what I have in mind.

A

I would love to demo this just like um and see what we have so the look that I was aiming for was something like this. So you can see. This is a people card. We have this here in dark modes, um should be working in default, node as well, and you can see we have just like a couple of tabs and we have um some skills and just like information that is usually surfaced in office. Stealth yeah.

A

So this still exists, um and this makes it just like easy for people to retrieve the information about other people that they are likely to work with. This is what we're aiming for.

A

um How is this going to work so first, of course we need to create that extension um for Azure active directory, but we need to have an app registration first in order to do so so um I will quickly just like pull up visual studio code, because there's my terminal and I will register an application, um my favorite way and how to do this is CLI for Microsoft 365. So we go M365 aad app at we provide it with a name.

A

We tell it, it will need to have a secret to give it some period missions and we will grant admin consent just like hit enter. Yes, I should update I know this and uh it provides us with all the values that we are interested in and the most important value now is the object ID. It is not the app ID of this app that we just registered, because we will need this to create that extension property. So what we will be doing in graph Explorer, so it's v1.0 and then go for applications.

A

Slash then I will paste in my new object. Id and I will go for extension properties and do this. So what we're going to do right here?

A

I want to have user, pronouns and I want to associate that with the user object.

A

This is a get, so this, of course needs to be a post, we'll post this and I will get the 201, which means that has been created, and it also returns here, the name of that new property, which is always extension that an underscore that this year is the app ID, not the object ID, but the app ID of the app registration and then the name that I gave it here.

A

So we will grab this here because we need it later on and now I would need to have a user ID, because I now want to patch a user with a new pronoun. So easiest way, how to do this is just like to see who am I so I will get slash me. I will run this doesn't matter if there's a request body in here, because with the get request it will ignore this here um and I will see okay, so this year is my own user ID. So what are we doing? Right now?

A

Is I'm going ahead and say: okay, so I want to patch and I do want to patch users, and there is a specific user which I want to do this. So this is my own ID um that should be um doable for that and now I will delete this and say: okay.

A

That should do the job um and I copied the name of my new property and now I want to just need to provide a value for that. In my case, it should be see her and now I will run this query and I will say 204, which is no content, which means that succeeded in order to know if that worked, um you would assume that I could just like say: okay, so get this user and of course we can.

A

We can try this, but this will not return my pronouns because they are only returned uh when I specifically select this so I will say: I want to have that property and most probably display name as well, because it's just nicer to do that and once I do that I see this is my name, and these are my pronouns.

A

This is what's happening behind the scenes. So, let's see how we do this in a custom connector, so I already created a custom connector. It points to the graph API I log in with um with credentials from an app registration and I defined. Four actions. In this case, I will show you two of those one: is the get user and get user points to slash users, slash user ID, which I will then uh provides dynamically? And, of course it's um it?

A

Has this select query as well, so that I can show you this here as well? No, it doesn't show here, but um in the test um it does so so that I can um I can put in um all the properties that I want to have returned at in the patch pronouns.

A

um It is the same endpoint but I'm patching now I will provide a user ID and I do have a defined body, and this body is just like the extension and the value for that, so that I can make the same request that I did previously in graph Explorer, but with a custom. Connector I created a nice application in this nice powerapps application. I have my people card over here, so you can see it can expand, it can collapse again.

A

I can um I can select um different um people here, I'm here um as well, you can see my pronouns. Are she and her um I can even tap here through through the different tabs? So this here is a component that I uh created and it gets the presence status for um all the people I work with from the presence API on graph. So this is a pretty cool thing, so let's select Alex so Alex right now has no pronouns. Let's give him he him pronouns. So there is a submit button.

A

I will just hit that submit button and refresh this, and you can see now um Alex. Has he him pronouns. So how does that work um in that submit button? It is um super, easy, I would just say the graph connector. So this is the name of my custom. Connector I will call the action patch, pronouns and I will pass in a user ID so that user ID comes from my component. So this is an output property.

A

It's the selected person, ID and I swear it's just the user ID and then I pass in a value for the name of that extension and I know it looks ugly, but trust me. So this is just the um the very same thing that we saw previously in graph Explorer and um then I will provide the value, and that is just whatever is in that text.

A

Input box and after that I will reset the text input so that this is clear again um and that's the entire magic of how to extend every ID with graph API in powerapps.

A

um Right short, maybe about the component itself. That is um quite interesting one. So it has a gazillion of nested containers, of course, to make that happen, and you see it still needs a little bit of arm polish.

A

So there is some box still involved, so I will provide the sample a little bit later on, but I already blogged about the solution and I think David can paste in the link as well here, um but what we, what essentially, what we do is to um to display those pronouns is the very same thing that we've ever saw in the graph Explorer. It is again the graphconnector.getuser, so the action that I showed you then, as this is inside of the component, not outside of the component.

A

We do not need to leverage um an output property of the component itself, but we can just go for the gallery so that here is the gallery and whoever uh whatever is there selected, then the ID are property and then we're going to select so and I selected display names and skills and extensions and the extension for the user pronoun and then I only want to return um the pronouns which have this super ugly um uh property name, but still it works, and therefore this is um she enter and with that uh quickly, back to My Demo to my slides there we go.

A

So what do we need to? So? What you need to remember is it is just the slash user's end point. So this is a super powerful endpoint for literally everything that you would want to do um with a user and for the components, so one gallery The Nest containers for every tap and then every container in that app. So this can be a little bit intricate, but I promise I will publish that as a sample and then the presence, API and user slash ID to get the skills. The about me to get responsibilities.

A

Just like all the info that is usually surfaced in um in Office, Depot and um blog post is here. Sample is coming soon and with that back to you, David.

B

Excellent Luisa, fantastic I love how you're using technology to be more inclusive. This is a great great example. So all those links are in the chat. Everybody and we've got some opportunities for you to collaborate with Lisa coming up soon.