How to Build a Pretty Power Apps People Picker with Office365 Users

Подписаться 47 тыс.

Просмотров 71 тыс.

50% 1

#PowerApps #PeoplePicker
Are you tired of using the same old worn out combo boxes and dropdowns for your people picker needs in Power Apps? While using a dropdown or combo box is a functional way to get a people picker control in Power Apps, it is very rigid in what we can actually do to style it.
In this video, I will walk you through the steps to create your own custom people picker control in Power Apps that mimics the look and feel of a Microsoft Teams people picker. This approach uses the Office 365 Users connector to search users from your tenant. It is completely customizable with a ton of freedom and options for styling the control. I'll walk you through the basics of how to set it up and talk you through some of the styling choices I made to make it look pretty.
LINKS
🔗 Sample app with People Picker Code: github.com/aprildunnam/PowerA...
🔗 Connect to O365 Users from Power Apps: docs.microsoft.com/en-us/powe...
OTHER VIDEOS YOU MAY LIKE:
💠 Power Apps Makeover: Basic to Beautiful Ignite Session: • Microsoft PowerApps Ma...
💠 Creating a Branding Screen and Custom Template in Power Apps: • Power Apps Branding Sc...
💠 Power Apps Components Intro: • Intro to Power Apps Co...
Table of Contents:
00:00 - Intro
01:06 - Demo of the custom people picker
04:32 - Connecting to Office 365 Users
04:58 - Building out the controls
07:07 - Displaying Users in a Gallery
07:20 - Marker
09:23 - Getting the users profile image
11:50 - Getting selected user
12:52 - Clearing selected person
13:56 - Launching the people picker
14:40 - Sending selected person to the control
16:54 - Resetting the control
18:59 - Styling the control
23:21 - Wrap up

Наука

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 91

@cristinaR2 Год назад

This video is definitely underappreciated! Thanks for sharing this with us!!!💛

@Slash1066 2 года назад

I learned some good tips from this actually, like using the With function for example. Thanks again, Matt H.

@AprilDunnam 2 года назад

Glad you could pick up a few tips. With is one of my favorite functions 😍

@briancanfield2968 2 года назад

This is incredibly helpful; instructions are very clear and easy to follow along with, but also concise enough to keep my horrendously short attention span engaged from start to finish. I'd also be interested in seeing how to implement similar functionality but with the ability to select multiple people from the gallery and then being able to pass that data (as a comma separated list) back to a previous screen containing a form control.

@renukakanagaraj8436 2 года назад

Hi Brian. Do you find the answer for the functionality you suggested?

@SaidElnaffar 2 года назад

Brian, int;riguing question. I think the solution is to use a Collection where 1) you Clear it in the OnVisible, 2) Keep adding the selected contact to it. In this case you do not even need to pass it on to the previous screen because the Collection lives globally (unlike local variables).

@thechristianinitiative1445 2 года назад

Great Video April!

@AprilDunnam 2 года назад

Thank you!!

@Gorganahfikark Год назад

Absolutely excellent video have been looking for someting tlike this for a while but this did it. Love the last bit on styling. Would it be possible to share some insight on how to do a people picker bound to a data card? I tried adjusting a datacard to accepting multiple values similar to that of a combo box but the datacard properties are not the same as combo box properties

@TiagrajI 2 года назад

Great video. Thank you April 😊

@AprilDunnam 2 года назад

Thank you for watching!

@jray1429 Год назад

This is excellent, very useful. Easy to understand. Thank you

@AprilDunnam Год назад

That's great! I'm glad it was easy to understand and helpful!

@Mike-uz3kn Год назад

Fantastic video! I'd like to be able to use the User Select screen in multiple areas in my app. Is there a better way than duplicating the screen and changing the variables to reflect each use case?

@carinaslim2378 2 года назад

Hi, this is really helpful! Can you show us how to get the Direct Reports for any person, not just the logged in user? That would be really awesome! thanks!

@KamrulHasan-th3ir 2 года назад

Wonderful 😊, just curious if the people picker column is bind with a SharePoint group in the list. Thanks

@ravimsr 2 года назад

Nice video. I learnt something new. Thanks for sharing this video.

@AprilDunnam 2 года назад

Glad it was helpful!

@di287181 6 месяцев назад

Great video, very helpful. Thank you!

@AprilDunnam 6 месяцев назад

Thank you for your support! I'm happy to hear that you found the video helpful.

@gopalkannaiyan Год назад

This is great! when do search DirectReports not getting user detials

@leetyler3102 2 года назад

interesting way to handle people pickers. will give it a try next time i need to use a people picker

@AprilDunnam 2 года назад

Let me know what you think if you try it!

@carolinehorstgomes2289 6 месяцев назад

April, your work is incredible, congratulations!! I had a question, how would I apply this same logic to the combobox? for example, all users in the organization appear and I use the search field to search for a specific one?

@fvdv1990 2 года назад

Can you please explain how to assign multiple people with this people picker? Would a collection instead of a context variable work?

@kellishepherd2128 Год назад

Hi April. I am stuck on what you used to set the Add Assigned To on the form to change to the name once selected? Is it a button? And if so, how does that feed back into the form?

@jaimerrojasrojas5924 Год назад

How to display specific users? Anyway, you are brillant April !!!

@bluecaban3855 2 года назад

!SUPER HELPFUL!

@AprilDunnam 2 года назад

Glad it helped!

@LauraLuisaRosenberg Год назад

Hell, thank you for the great video. I have a question is it possible to have a people picker and if the person doesnt exist to have the option to write the user name down?

@mahalakshmi1404 Год назад

Thanks for the video. Can you share for how can we search for the office 365 groups. User and groups search in a single people picker. Thanks in advance

@ResponsibleXI 2 года назад

Are the suggestions initially on the gallery comes by default when you set top:6?

@namananand2725 2 года назад

Hi Aril, how to select multiple users if we use people picker in a combo box. And when the multiple users are selected, it should reflect in the sharepoint list after submitting Thanks in advance

@sandysysq 2 года назад

Hello April, I have a question for you. How do I get usernames from multiple enabled people picker ? I need to send the usernames to Power automate on button click. Any suggestions ? Do you have a video on getting users names from people picker which has more than 1 user.

@shawnsiegrist3632 Год назад

Hello April, This video was incredibly helpful, I get this error when I try to add the photo to the picker "Office365Users.UserPhotoMetadata failed: The method 'UserPhotoMetadata' has an invalid value for parameter 'userId'". Any idea what I'm doing wrong? Thank you!

@blaaknuten 6 месяцев назад

I got the same error.

@numsegarn 5 месяцев назад

@@blaaknuten You can do this With( { personImage: IfError(Office365Users.UserPhotoV2(ThisItem.Mail), ""), hasphoto: IfError(Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto,"") }, If( hasphoto, personImage, user ) )

@AdamHaas 2 года назад

I downloaded to try and figure out where "user" is coming from, and there are no results in the app. How is the profile picture referring to something called "user" if there is nothing in the app called "user"?

@dwinston91 2 года назад

i figured it out. You upload Media (ie the default mage you want displayed and make sure that it is called user. Or you could call it anything you like and reference that in the If statement, like If (hasphoto, personImage, )

@bassemjaidi2428 11 месяцев назад

Thanks for video, what about search guest contact?

@heidilackner-vanhartrop7622 9 месяцев назад

Hi April, thanks for your great video. Is the people picker with Office 365 users delegable to Sharepoint? I’d like to use it for about 1000-2000 users. Thanks!

@McIlravyInc Год назад

How do you change the border thickness when text input box is selected?

@cvkealey 2 года назад

This is great! Much better than the "combo box" control for this function. One question: how flexible is that "user search"? Could I, for example, return only users who have a job title? We have a few student-facing apps where they need to select/enter their instructor (all of whom have a job title), but we've had more than a few students enter students (who don't have job titles).

@AprilDunnam 2 года назад

Yep that's a way to do it. Another approach could be to use collections and fetch all of your user data into a collection (or multiple depending on delegation) where say you pre-filter it where JobTitle isn't blank then add that to the gallery

@VALERIYA1PROCKO 2 года назад

I really like the level of details, but I wish you have mentioned the build-in combo box (there is a way to use a person layout out of the box). There are so many additional steps that you need to do for a good user experience, like making sure that the combo box drop-down list closes when you click somewhere else on the screen). I'm new to Power Apps, and somehow I forgot about the default combo box, and it took me a few hours to replicate what you've done in the video and for my use case a basic staff would work just fine).

@markuswinkler5312 2 года назад

Hi April, very useful video, thank you! - I want to use your people picker screen with two ore more datacards on the main screen, but struggling in the best way to do that - did you have a suggestion, or best practice to having some datacards on one screen, referencing to a single people picker screen? (var´s between screens or something like that?...) many thx

@stefanyreyes8592 Год назад

Very helpfull!!

@AprilDunnam Год назад

I'm so glad it was helpful!

@excel-k-sir Год назад

Hello April, I have a share point list which consists of 15 people with the column type as Person or Group I wan the People picker to show only the list of those 15 people and select one of them. Need your help in that.

@khrystinameier2981 11 месяцев назад

Hello, I am struggling with the photo image formula. Is personImage a media image that you uploaded to your powerapp? When I type it in, it doesn't show up in my dropdown as an option. Thank you.

@Digitain 2 года назад

Great videos April. Will this work with PowerApps for Teams on Dataverse backend?

@AprilDunnam 2 года назад

Yes these same concepts will apply to dataverse for teams based apps :)

@nocodecreative 2 года назад

@@AprilDunnamwill the same concepts apply to a model-driven app with the new canvass pages?

@andreschlender9687 2 года назад

Loved the approach and downloaded your sample app. Would be great if you can explain how to then write the "assigned to" user back to the SharePoint list and display that user when you view an existing issue. I'm trying to incorporate your approach with an App that would use a patch function to write back to list. I saw you are using the form submit. Some help or direction either way would be great.

@derekgray3019 2 года назад

I'm hoping April will see and respond to your comment as I have the same issue with trying to pass the "assigned to" user back to the SP list in the choices column (People picker type).

@davidhart4032 2 года назад

You can do it using a Patch, but that's sooo painful! I just added a title to the form, unlocked it and added varSelectedPerson.DisplayName (turned off visible). Completed a submit button and a success page. Took me all day to figure out such a simple solution, but it worked.

@zimands5 2 года назад

@@davidhart4032 can you give a little more explanation on this? I can't figure out how to get my selected person back to the form, and/or back to the SharePoint list.

@davidhart4032 2 года назад

@@zimands5 I wish I could, I don't even remember which app I created this for and I didn't save the template for future apps. From what I wrote it looks like I created a submit button, added varSelectedPerson.DisplayName to the title column from the SP form, unlocked that title column in the app(so that is will enter the varSelectPerson), and then de-selcted visible from "title" in the app. That way you can't see the actual name appear in the submit page but it will populate the title column in SP. I'm pretty sure that was the solution. I really hope I was able to help you. Good luck!

@davidhart4032 2 года назад

Just found my OneNote... I added the varSelectedPerson to a timer. Button Timer: UpdateContext({popUpvis: true}); Reset(searchbar); Navigate( home, ScreenTransition.CoverRight, {varSelectedPersonValue: varSelectedPerson} ); SubmitForm(Form1); ResetForm(Form1) Timer: Duration: 5000 OnTimerEnd: ResetForm(Form1); NewForm(Form1); Navigate('homes-creen', Fade); Set(startTimer, false) Navigate(Home,ScreenTransition.CoverRight,{varSelectedPersonValue:varSelectedPerson})

@kearley8792 2 года назад

Hi, April. I followed the link in the description but did not see the source code in your Git. What is an exact link to the code?

@gagansingh3481 Год назад

Awesome Mam

@AprilDunnam Год назад

Thanks a lot

@anandasanyal 2 года назад

Great video, Looking for some help on same - I'm working on SP- Person or Group field (multi select), Trying to retrieve count using Group By, and getting Error- Expects a text, number, dates.. Not Person and Group.. Is there any work around.. Thank you.

@sandysysq 2 года назад

Hello Ananda, I'm also working on the similar kind of scenario. I need to pass usernames from people picker which has more than 1 username to power automate on button click. Power Automate, I handled. Getting all the usernames from the people picker is the one im looking for.

@philosopherkizito911 Год назад

Great video. On your "With" command not sure how you created the variable "user" 11:14. Error message Office365Users.UserPhotoMetadataFailed: The method 'UserPhotoMetadata' has an Invalid value for parameter 'userid' location Image5

@TheRemyRomano 2 года назад

Brilliant

@AprilDunnam 2 года назад

Thanks Remy!

@DoktorNG 2 года назад

Getting an error when importing to canvas app, missing component

@gregoryreddin1222 2 года назад

Hi April, thank you for the video. I’m getting stuck on the Image property for the Gallery control. Inside the ‘With’ statement I’m having an error with the ‘user’ in the last part of the ‘If’ condition. I have this error: Name is invalid. ‘user’ isn’t recognized. I may have missed it in the video but how do I add the user icon/image so I can eliminate this error. Thanks!

@gregoryreddin1222 2 года назад

Disregard. I downloaded your msapp and reviewed it. I see now that I didn’t add a user image to the Media section for the app.

@AprilDunnam 2 года назад

Glad you got it working :)

@nocodecreative 2 года назад

Great, but how do I pass the user back to the form? In the video you show it passing to another screen with a button as opposed to the original form?

@davidhart4032 2 года назад

Add a column (I used title) that you want to use in the form. Navigate to that form. Hide the card.

@markrsmith5 2 года назад

I want to add the picture icon she talks about in the Well statement when there is no actual picture in the AD. Can someone help?

@davidhart4032 2 года назад

Google the image, save it to the canvas.

@prashanth2341 2 года назад

hii... madem your videos of explanation reallyy awesome ...

@AprilDunnam 2 года назад

Thank you so much 🙂

@prashanth2341 2 года назад

@@AprilDunnam i want to communicate with you madem about office 365 subject . matters ..can you please tell me how can i communicate with you..

@Legendias 2 года назад

This is giving me a runtime error when entering a name that doesn't exist?!

@mk-ep7yk 2 года назад

👏👏👏👏👏🥳

@AprilDunnam 2 года назад

Thanks for watching!

@mk-ep7yk 2 года назад

@@AprilDunnam you are welcome 🙂😊

@atanuS4 Год назад

😅

@cristinaR2 Год назад

To display the user's photo use the following expression: If(!IsBlank(ThisItem.Email),If(Office365Users.UserPhotoMetadata(ThisItem.Email).HasPhoto=true,Office365Users.UserPhotoV2(ThisItem.Email),SampleImage))

@mickygchannel Год назад

I've researched this workaround countless times and they're all similar to yours but for some reason I'm still getting "Office365Users.UserPhotoMetadata failed: The method 'UserPhotoMetadata' has an invalid value for parameter 'userId'"

@shawnsiegrist3632 Год назад

@April Dunnam I'm getting the same error as Micky G. Has something changed that the formula you used is no longer valid?

@prodjstylus Год назад

@@shawnsiegrist3632 I got around this by using the IfError() command: With( { personImage: Office365Users.UserPhotoV2(ThisItem.Mail), hasPhoto: IfError(Office365Users.UserPhotoMetadata(ThisItem.UserPrincipalName).HasPhoto,"") }, If( hasPhoto, personImage, user ) )

@philosopherkizito911 Год назад

Change Email to Mail and the solution will work If(!IsBlank(ThisItem.Mail),If(Office365Users.UserPhotoMetadata(ThisItem.Mail).HasPhoto=true,Office365Users.UserPhotoV2(ThisItem.Mail),SampleImage)) Thanks for sharing