Articles Blog

How to build a people picker in PowerApps with Azure AD

How to build a people picker in PowerApps with Azure AD


Hey, how’s it going? This is Todd Baginski. I’m a Microsoft MVP and the Partner and CTO at Canviz. In this video what I’m going to dive into is how we created a people picker so that you can select other folks in your Azure Active Directory (AAD) from your PowerApp. I think the easiest way to get started with this one is just to take you on a little tour the app up to the point where I used to people picker and I’ll show you how we built it so I’m going to start the PowerApp here. And, when I start this PowerApp if you seen it before you know, what’s going on here. If you haven’t, you can watch my demo overview video of this particular application and my demo overview video I show the mobile form factor of this (or the phone form factor). But this is the tablet form factor. So when I come in the first thing it’s going to do is show me the different appointments my calendar that I may need to set and out of office for. So I’ll set one for upcoming ice hockey tournament and this is where I said how long it’s going to take but I’m not going to focus on these pages right now or the type or which email access I’ll have but I really want to show you is here: the people picker. So you can see it pre populated the name of the user who is marked as my manager in my Azure Active Directory. And that’s Tim, so you can see his name there. But we also have other capabilities here we can search for anybody by just starting the type their name. So, for example, if I take my name, Todd, here we have all the different Todds that are in our Azure Active Directory. I can then select one and move on to my next page or I can look for somebody else, for example, if we have a couple alex’s and the company so then I can select one there so as you can see that’s really quick. So, let me show you now how we actually dig into the code here and implement this capability of people picker from Azure Active Directory. First thing I’m going to do is close the player and check it out in edit mode to show you here. So, I’m on the create contact info screen you can locate this is well if you download the app and place and into your environment and this is really how it works. What we have here is a gallery control you can see I’ve highlighted it right here and this is actually what implements that people picker that we saw in that drop down right there. You’ll notice in my “items” property here the first thing I do is I see is text input to underscore one. Which it’s text value if it’s not blank then I’m going to proceed so that’s this text box right here. Notice it has a value of “ContactUser” assigned to it. Once we pick a user we’re going to set them equal to this variable and that’s going to show their name there. So, after we see if that’s not blank, then what we’re going to do is going to say is contact user equal to what was in there. If they are equal there’s no sense in going to do a search for that user. We know someone’s already typed their name and picked it. However, if he’s taken something different than what’s already set is the contact user variable now we’re going to go off the “Office 365 Users” connector and call the search user method. Then we’re going to pass in the search term. Which is the actual text we saw before in TextInput2_1. That’s all there is to it. The next thing that you’ll notice about this is that because this is a gallery, and, this is my “Items” collection means that every time I type in something new there – that call to office three sixty five user’s search user is going to execute and that’s why we’re going to see the items collection update as gallery update. So if I back it up here in design mode content and type in “t” and now it’s pulling up all kinds of different people who start with “t”. Add the “o” to it. Now we’re down to just Todds and “Todd b-a-g”. Now we’re down to just my accounts in the Azure Active Directory. So, again, here you can see if I pull it down again at the top. Really the piece that is executing a search is the office three sixty five users that search user whatever I typed in there. Now if we take a closer look at the gallery we can see that as a custom data source defined and that is because we programmaticly created the items collection, we’ve pick the title layout swirling displaying one column that’s the user’s name here and then within that. Office three sixty five users when we make that “search user” call gives us all these different things that we can pull from about that user. In this case we’ve chosen “display name” and that’s why that appears there. If I chose something else like “job title,” then I could go search on just users and just put all their job titles in here or something like that. That’s what I choose to do. That’s a real quick way that you can implement this functionality. One other thing that I’d like to show you about how we actually set the variable equal to the name of the one you select and people picker is over here. Now this is a rectangle and if you watch my video on the transparent rectangles you can see how we use this. We lay the transparent rectangle over top of all the controls inside here – the separator as well as the text value the displays our names. Then when user clicks on this transparent rectangle, this is where we go and set the variable’s contact user. This item display name is what we set it equal to. This item is the currently selected item in the gallery so we’re going to display its display name and set that equal to contact user variable. Now we have the contact user email so that’s again the selected item, their mail property gets you there contact user email. so that means when I go play the app and I select the user, I just clicked on that transparent rectangle and it set those properties. So now that those properties, or I should say variables, are set I can come back in here and take a look at all the different properties and the app and I can see, lo and behold, there I am, the contact user. So those values are then set and you can use them in subsequent pages as the application unfolds. So that’s a real quick way to make people picker with the Office 365 User Search capability. So now maybe wondering, “well how did I get the ability to call that connector called Office 365 Users right here?” Well it’s really easy to add. All I need to do is go to view, Pick data sources, and you’ll see had it added here but I can just pick “Add data source” and it’s going to be in your list. Office 365 Users right there. If you don’t see it in your list, go up to New connection” and look for Office 365 Users and authenticate to it and now that collector will be available for use in your PowerApps too. I hope this PowerApp and the video helps you out. See you next time.

Leave a Reply

Your email address will not be published. Required fields are marked *