Building a simple People picker in Adaptive Card based on group members

Adaptive cards are a way to provide an interactive UI for Teams channels or user chats, and Power Automate allows you to do this without coding. For example, when a list item or task is created, you can instantly notify Teams about it and assign a person to it in the chat.

Adaptive card offers a variety of controls, but no people picker, regardless of whether it is searchable or not.

In this post we will show you how to simply create a (pseudo) people picker based on the list of members of a Microsoft 365 group.

1. Sample card payload

A people picker on Adaptive Card is built via a dropdown (Input.ChoiceSet) control. This means that the people picker does not have a search capability.

Below is a sample card JSON to post. It will be rewritten the "choices" array with the actual group members information.

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Assign To",
            "wrap": true
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "First, Last (JobTitle)",
                    "value": "name@example.com"
                }
            ],
            "placeholder": "Select person",
            "id": "assignTo"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}

You can check the card layout in Adaptive Card designer by copy & paste the JSON.

2. Mapping member list into ChoiceSet array

Once the member list of Microsoft 365 group is obtained by Office 365 group connector (List group members), you can create an array with schema for ChoiceSet from member list array.

Add "Select" action next to "List group members" action, and set following parameters respectively:

From

body('List_group_members')?['value']

Map

{
  "title": @{concat(item()?['displayName'],' (',item()?['jobTitle'],')')},
  "value": @{item()?['userPrincipalName']}
}

• jobTitle is to distinguish the same name.

Check the output of Select action, it will return an array as expected format.

3. Post Adaptive Card and wait for response

Now you are all set.

Add "Post adaptive card and wait for a response" action and set message property as follwoing:

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Assign To",
            "wrap": true
        },
        {
            "type": "Input.ChoiceSet",
            "choices": @{body('Select')},
            "placeholder": "Select person",
            "id": "assignTo"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}

You can see that value for "choices" property is replaced by @{body('Select')} (result of "Select" action), it will generate dropdown with group members.

As card response, the UPN of selected user will be returned and you can insert its UPN to following actions from dynamic content - set Person field of List item or AssignTo field of Task item.