People Picker in Adaptive Cards

In this blog, we will be learning about People Picker in Adaptive Cards.

People Picker is an input control in Adaptive Card. It allows users to quickly search and select valid user accounts for peoples within the organization.

People Picker supports the following features:

• Searches single or multiple users.
• Selects single or multiple users.
• Reassigns to single or multiple users.
• Prepopulates the name of selected users.

Implementation of People Picker

People Picker in Adaptive Cards is implemented as an extension of the Input.ChoiceSet control.

Schema

The following properties are additions to the Input.ChoiceSet schema to enable People Picker experience on the Adaptive Card.

Input.ChoiceSet control

The choices.data property is supported in version 1.6; however, in my testing, it also worked for version 1.4. The JSON format data is passed into the property.

Property	Type	Required	Description
choices.data	Data.Query	No	Enables dynamic auto complete for different user types, by fetching results from the dataset specified.

Data.Query

Property	Type	Required	Description
dataset	String	Yes	The type of data that must be fetched dynamically.

dataset

The following table provides predefined values as dataset for people picker:

dataset	Search Scope
graph.microsoft.com/users	Search all members across the organization.
graph.microsoft.com/users?scope=currentContext	Search within the members of the current conversation, such as chat or channel in which the particular card is sent.

Data Submission

We can use Action.Submit or Action.Execute to submit selected user data. The payload received is a list of Microsoft Entra IDs or the IDs provided in the static list. In People Picker, when a user is selected in the control, the Microsoft Entra ID of the user is the value sent back. The Microsoft Entra ID is a string and uniquely identifies a user in the directory.

Create Flow

1). Sign in to Power Automate

2). Open the flow, click on the Create option, and select "Instant Cloud Flow".

Enter Flow name.
Choose the flow trigger as "Manually trigger a flow".
Click on the Create button.

3). Add an action "Post adaptive card and wait for a response".
Add mandatory parameter values as shown in below image.

In this step an Adaptive Card with People Picker control will be sent to user in MS Teams chat. It will wait till the user has search & selected the user(s) and clicked on 'Save' button.

4). Add a loop "Apply to each" and set input value "Select an output from previous steps" as below

split(body('Post_adaptive_card_and_wait_for_a_response')?['data']?['peoplePickerChoiceSetControlID'],',')

Then add an action "Get user profile (V2)" and enter User (UPN) value as current item.

Here, we are retrieving the user(s) that has been selected and submitted from above step. When a user is selected in the control, the Microsoft Entra ID (Azure Active Directory) of the user is the value sent back. The value will be comma separated user ID's if multi select is enabled.
To compare, we will iterate over the values and verify if the chosen user matches the one we have received.

Repeat above step for all the four People Picker controls added in Adaptive card.

Now we will discuss how to create Adaptive Card parameter value.

5). Open Adaptive Cards Designer portal.

Select host app as "Microsoft Teams" and Target version as 1.4
Then, create the Adaptive card design according to your requirements.

Once Adaptive Card design is complete. Click on "Copy card payload" and paste it into the  Adaptive Card parameter value (Step 3)

People Picker - CARD PAYLOAD

{ "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.4", "id": "peoplePickerCard", "msteams": { "width": "Full" }, "body": [ { "type": "TextBlock", "size": "ExtraLarge", "weight": "Bolder", "text": "People Picker in Adaptive Cards", "id": "peoplePickerTitle", "horizontalAlignment": "Center", "fontType": "Default" }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "People Picker with organization search - Default", "wrap": true, "id": "peoplePickerDefault", "weight": "Bolder", "spacing": "None" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Single select", "wrap": true, "id": "textBlockSingleSelectDefault", "fontType": "Monospace" }, { "type": "Input.ChoiceSet", "choices.data": { "type": "Data.Query", "dataset": "graph.microsoft.com/users" }, "id": "peoplePickerControlSingleSelectDefault", "placeholder": "Search user" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Multi select", "wrap": true, "id": "textBlockMultiSelectDefault", "fontType": "Monospace" }, { "type": "Input.ChoiceSet", "choices.data": { "type": "Data.Query", "dataset": "graph.microsoft.com/users" }, "id": "peoplePickerControlMultiSelectDefault", "isMultiSelect": true, "placeholder": "Search users" } ] } ] } ], "backgroundImage": { "url": "data:image/gif;base64, R0lGODlhCAABAIABAOrbyAacDywAAAAACAABAAACA4RvBQA7", "fillMode": "Repeat" }, "spacing": "ExtraLarge", "separator": true }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "People Picker with organization search - User Preselection", "wrap": true, "id": "peoplePickerPreselection", "spacing": "ExtraLarge", "weight": "Bolder" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Single select", "wrap": true, "id": "textBlockSingleSelectPreselection", "fontType": "Monospace" }, { "type": "Input.ChoiceSet", "choices.data": { "type": "Data.Query", "dataset": "graph.microsoft.com/users" }, "id": "peoplePickerControlSingleSelectPreselection", "placeholder": "Search user", "value": "b8e32ece-6d19-488e-96cf-7703c5xxxxxx" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Multi select", "wrap": true, "id": "textBlockMultiSelectPreselection", "fontType": "Monospace" }, { "type": "Input.ChoiceSet", "choices.data": { "type": "Data.Query", "dataset": "graph.microsoft.com/users" }, "id": "peoplePickerControlMultiSelectPreselection", "isMultiSelect": true, "placeholder": "Search users", "value": "b8e32ece-6d19-488e-96cf-7703c5xxxxxx, e59ec47a-1e87-4ecf-983c-6b7efdxxxxxx" } ] } ] } ], "spacing": "Padding", "backgroundImage": { "url": "data:image/gif;base64, R0lGODlhCAABAIABAOrbyAacDywAAAAACAABAAACA4RvBQA7" } } ], "actions": [ { "type": "Action.Submit", "title": "Save", "iconUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg AAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAhhJREFUOE9jZK AyYKSyeQwoBprMuO3/n4FBg+/XG9cYAyElXoYffDALX//jfoNs+ZpLr5 98ZxVIOZGp+QBZHG6gybTbfgxMDBtBkmK/XjD0eEkxPHjyBK7WzMAAxT Nxiy4xvGSTfMD6/7cjsqEIA2fermf4z9AAM7DVVZTh2LlzcEPCvb0xDH zFJsHwn4ERxVCEgdNvNzAwMtSDdDF/eMSwLEaT4eylSwx//v1lEODlYz DT14Mb+OvPP4aA2ecY/gnKQcT+MzSeyVQFOwargd/fPmUwleZkcNcQYW BhZkJx2Z+//xh2Xn/NcObZDwYOYWncBhpNvDqPiZ0tEWzhvz8Mf75/Yf j/7x/WRMDIxMzAwsnDAKJB4N/PX/PP5WsnobhQr//8ATZOHntyktGv71 8OXio0dKCvgRI8zAy8bNjT/edf/xlefPmLiCRCLsw14WXwVuHE6/stt7 8zTDn7GayGoJc3h4ky/P31i+Hjp09YDeXn42NgZmNj8F31mjgDd0SIMf z+/Yfh67dvWA3k5uJiYGVlYfBY8Yp4Az9/+crw7PkLrAZKSUow8PJw4z dQv/fMelZu/gCQCSAXEgNgLvz59eP6y8UmQSjJRrd5TwAjB+96ZlZ2hk YbbmLMY6g/8pXh7+8fDH9/fPK/Wuu2CcVAEEejcacvw///FolanEQl8P nXvh9kYGA8fqPBfQvMBbQtYInyJwFFAGUS8BXW+cfxAAAAAElFTkSuQmCC", "id": "peoplePickerSubmit" } ], "backgroundImage": { "url": "data:image/gif;base64, R0lGODlhCAABAIABAPjw5QacDywAAAAACAABAAACA4RvBQA7", "fillMode": "Repeat" } }

6). Complete flow with all the actions will look like below.

Now it's time to test the flow. Manually run the flow and wait for sometime.

People Picker in Adaptive Card output for Teams desktop application.

People Picker in Adaptive Card output for Teams web application.

Select the user(s) and click Save button.

Refer Adaptive Card blog series:
Adaptive Card: Power Automate send welcome message when new team member added
Adaptive Card: Power Automate send birthday greetings to team members
People Picker in Adaptive Cards
Adaptive Card: Send Form using Adaptive card in MS Teams to group members

I hope this will help all of you! 🧲
Feel free to provide feedback.

🚀 "Happy Coding" 🚀