Hello everyone and welcome to my blog. In today’s blog I am going to show how to use Power Platform Creator Kit to develop People Picker control.
Let’s get started. The first thing we need to do is install the Power Platform Creator kit. You can find the multiple options to install in Microsoft documentation.
Before you install the solution, please ensure to enable publishing of canvas apps with code components. You can enable it for your environment through Power Platform Admin center
I always prefer to eliminate any kind of manual step and hence install from AppSource. Navigate to Microsoft Appsource and search for Creator Kit.
Use ‘Get it now’ option to install the solution in your desired DataVerse environment.
The Creator Kit has many components but today I will discuss only about the People Picker control.
Let’s get started with a canvas app. Open the app and then click on ‘Import Components’.
Choose ‘Code‘ and then add the Fluent People Picker from the list.
In the next step, navigate to the screen where you want to insert People Picker control. Add the control from Code components section.
Now that we have the control on the form, the next step is to focus on the important properties of People Picker control.
.
The first important property is the Personas. As per documentation, these are basically pre-selected Persona(members) to appear on Peoplepicker.
The next important property is the Suggestion_Items. This is precisely the List of Suggested members to pick from. This is a required dataset property.
Great! Let’s first start with the required property then. Since I am going to search users from Office 365, I first add the Office 365 Users datasource.
And then set the Suggestions_Items property to the following formula.
For searchTerm, I am using the SearchText property of the control.
Next, navigate to Advanced tab and then set the properties related to Suggestion Items. I have set the field names in accordance with the fields returned from Office365 Search User API. If your datasource is different, you will need to change the field names accordingly as returned by the data source.
For complete understanding what each property stands, refer to the below explanation from Microsoft docs.
Property
Description
SuggestionName
Display Name of the Persona.
SuggestionKey
The key identify the specific Item. The key must be unique.
SuggestionImgUrl
Url or Base64 Content of Persona Image(Profile Picture).
SuggestionRole
Secondary Text, Preferably JobTitle of the Persona
SuggestionPresence
Optional – Presence of the person to display – won’t display presence if undefined. Value should be from one of the following: away, blocked, busy, dnd, none, offline, online
SuggestionOOF
Optional – True or False, Based on whether the persona if Out of office or not.
Additionally you can also set the Personas property explained earlier, if you want to pre-populate with a fixed set of values. For example, I want to prepopulate the control with 2 users by default. To do this, I set the Personas to the following formula.
Office365Users.SearchUser({top:2})
And then set the Persona related properties in the Advanced tab. This is very similar to the step we did for Suggestion_Items
And that’s it. We now have the People picker control in action.
The final thing. How do we get the value of the personas selected in the control. For that we have the SelectedPeople property.
The expression return a table. In the formula below I set the Text property of a label to the people selected from the People picker control.
