Search code examples
ms-officemicrosoft-teamsadaptive-cardsteams-toolkit

Submit Adaptive Cards in MSTeams with Outgoing Webhook

I am following Add Outgoing Webhooks to show an adaptive card with text prompt:

{
    "type": "message",
    "attachments": [
        {
            "contentType": "application/vnd.microsoft.card.adaptive",
            "content": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": " Input.Text elements",
            "horizontalAlignment": "Center",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Comments",
            "wrap": true
        },
        {
            "type": "Input.Text",
            "isMultiline": true,
            "id": "MultiLineVal"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
                "id": "1234567890"
            }
        },
        {
            "type": "Action.ShowCard",
            "title": "Show Card",
            "card": {
                "type": "AdaptiveCard",
                "body": [
                    {
                        "type": "TextBlock",
                        "text": "Enter comment",
                        "wrap": true
                    },
                    {
                        "type": "Input.Text",
                        "id": "CommentVal"
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        }
    ]
}
        }
    ]
}

The card json is generated from standard input template on https://adaptivecards.io/designer/

The bot is configured with https://teamsbot.free.beeceptor.com/test4 as an outgoing webhook: enter image description here

Messaging the bot works, I see the request on https://beeceptor.com/console/teamsbot, it returns the mock and I get the card showing in teams.

When I click "Submit" I get Something went wrong. Please try again. error:

enter image description here

There is no new requests on beeceptor, and I see 2 consecutive 400 error in the chrome devtools:

curl 'https://uk.ng.msg.teams.microsoft.com/v1/agents/f9f5e125-xxxx-xxxx-xxxx-9a9a8dcb1824/invoke' \
  -H 'authority: uk.ng.msg.teams.microsoft.com' \
  ... many irrelevant headers ...
  -H 'accept: json' \
  -H 'x-ms-client-version: 1415/1.0.0.2022020411' \
  -H 'x-ms-user-type: null' \
  -H 'authentication: skypetoken=eyJhbGciOiJSUzI...very long token ... zZy_S4a0zp8m_a72SMuew' \
  -H 'origin: https://teams.microsoft.com' \
  -H 'referer: https://teams.microsoft.com/' \
  --data-raw '{"value":{"id":"1234567890"},"conversation":{"id":"19:F32YIP...long [email protected];messageid=1644066509347"},"clientMessageId":"3673456194497933931","serverMessageId":"1644067693444","messageType":"RichText/Media_Card","name":"messageback","imdisplayname":"Azure Admin","complianceData":{"action":{"type":"Action.Submit","title":"Submit"}}}'

results with 400 response with following body:

{"errorCode":201,"message":"The resource URL agentMri is misformatted."}

The request is followed by the very similar one:

curl 'https://uk.ng.msg.teams.microsoft.com/v1/agents/f9f5e125-xxxx-xxxx-xxxx-9a9a8dcb1824/invoke' \
  -H 'authority: uk.ng.msg.teams.microsoft.com' \
  ... same irrelevant headers ...
  -H 'accept: json' \
  -H 'x-ms-client-version: 1415/1.0.0.2022020411' \
  -H 'x-ms-user-type: null' \
  -H 'authentication: skypetoken=eyJhbGciOiJSUz ... same token ...tzZy_S4a0zp8m_a72SMuew' \
  -H 'origin: https://teams.microsoft.com' \
  -H 'referer: https://teams.microsoft.com/' \
  --data-raw '{"value":{"id":"1234567890","MultiLineVal":"My comment"},"conversation":{"id":"19:F32YIP...same [email protected];messageid=1644066509347"},"clientMessageId":"3673456194497933931","serverMessageId":"1644067693444","messageType":"RichText/Media_Card","name":"messageback","imdisplayname":"Azure Admin","complianceData":{"action":{"type":"Action.Submit","title":"Submit"}}}'

Response is the same 400:

{"errorCode":201,"message":"The resource URL agentMri is misformatted."}

The only difference I could spot is the --data-raw '{"value":{"id":"1234567890","MultiLineVal":"My comment"}," part. The second request has "MultiLineVal":"My comment". It is exactly what I would like to see on the beeceptor side, but it never reached the API.

It's not quite clear what is agentMri, where and how it is misformatted, and what to change in the adaptive card to make the form submitted to the same webhook domain. I am not sure if this agentMri "misformattion" is related, but it was the only http request from Teams that contained the string I entered in the adaptive card.

Solution

  • Outgoing Webhooks can't use any card actions except for openURL.

    Document ref: Key features of Outgoing Webhook:
    Standard HTTP message exchange Responses appear in the same chain as the original request message and can include any Bot Framework message content. For example, rich text, images, cards, and emojis. Although Outgoing Webhooks can use cards, they can't use any card actions except for openURL.