Display user as a link using AdaptiveCards

Question

I'm building a Teams Chat Bot which triggers by a chat command and return a message using AdaptiveCards

I want to display user in the chat message, but I couldn't find a way to show user with profile picture, as a link, so users of the chat can hover over the user link and initiate a chat, etc.

How can I have a user with their name and profile picture as a link?

I have an AdaptiveCard json;

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "${selected.name}",
      "size": "extraLarge",
      "isSubtle": false,
      "color": "accent"
    }
  ]
}

But this doesn't support showing profile picture of the selected person, and, it also doesn't shown as a link that I can hover over and interact with the person.

Answer 1

From your description, you may consider to use the User mention syntax in Adaptive Cards.

Here's a sample:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hi <at>User Name</at>"
    }
  ],
  "msteams": {
    "entities": [
      {
        "type": "mention",
        "text": "<at>User Name</at>",
        "mentioned": {
          "id": "[email protected]",
          "name": "User Name"
        }
      }
    ]
  }
}

For more details, you may refer to the documentation: https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#user-mention-in-bots-with-adaptive-cards