Microsoft Teams Webhook Generating 400 for Adaptive Card

13

votes

I have a functioning webhook to a Teams channel to which I can successfully post messages. I am now trying to post an adaptive card to the webhook. Using Postman and performing a Post to https://outlook.office.com/webhook/xyz, with Content-Type set to application/json in the header and the following adaptive card set in the body.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "speak": "Nothing to say.",
  "body": [
    {
      "type": "TextBlock",
      "text": "Hello Teams' user"
    }
  ]
}

With this I receive a HTTP 400 Bad Request and Summary or Text is required message. Does anyone know if Teams webhooks support Adaptive Cards yet or if this is an unsupported task currently?

microsoft-teamsadaptive-cards

21

votes

Webhooks do not yet support Adaptive Cards! We plan to add support for Adaptive Cards shortly after we release them for bots.

8

votes

For simple use cases POST this to the webhook url:

{
  "title": "Action News",
  "text": "not **much** happend (markdown)"
}

For advanced use cases try using MessageCard: https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using

Example:

{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"themeColor": "0076D7",
"summary": "Larry Bryant created a new task",
"sections": [{
    "activityTitle": "![TestImage](https://47a92947.ngrok.io/Content/Images/default.png)Larry Bryant created a new task",
    "activitySubtitle": "On Project Tango",
    "activityImage": "https://teamsnodesample.azurewebsites.net/static/img/image5.png",
    "facts": [{
        "name": "Assigned to",
        "value": "Unassigned"
    }, {
        "name": "Due date",
        "value": "Mon May 01 2017 17:07:18 GMT-0700 (Pacific Daylight Time)"
    }, {
        "name": "Status",
        "value": "Not started"
    }],
    "markdown": true
}],
"potentialAction": [{
    "@type": "ActionCard",
    "name": "Add a comment",
    "inputs": [{
        "@type": "TextInput",
        "id": "comment",
        "isMultiline": false,
        "title": "Add a comment here for this task"
    }],
    "actions": [{
        "@type": "HttpPOST",
        "name": "Add comment",
        "target": "http://..."
    }]
}, {
    "@type": "ActionCard",
    "name": "Set due date",
    "inputs": [{
        "@type": "DateInput",
        "id": "dueDate",
        "title": "Enter a due date for this task"
    }],
    "actions": [{
        "@type": "HttpPOST",
        "name": "Save",
        "target": "http://..."
    }]
}, {
    "@type": "ActionCard",
    "name": "Change status",
    "inputs": [{
        "@type": "MultichoiceInput",
        "id": "list",
        "title": "Select a status",
        "isMultiSelect": "false",
        "choices": [{
            "display": "In Progress",
            "value": "1"
        }, {
            "display": "Active",
            "value": "2"
        }, {
            "display": "Closed",
            "value": "3"
        }]
    }],
    "actions": [{
        "@type": "HttpPOST",
        "name": "Save",
        "target": "http://..."
    }]
}]
}

2

votes

Recently I was facing the same issue and was looking for a solution. The good part is MS Teams support adaptive cards now youtube video to explain how it can be implemented

Github link to track the progress on the issue

I managed to send messages to the Teams channel without any failure.

0

votes

I'm using axios to send an Adaptive Card to a Teams Connector and I was getting this same error. In my case, I was able to resolve the issue by wrapping the card as an "attachment" to the message protocol shown in this link (syntax copied here for reference).

https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using?tabs=cURL#send-adaptive-cards-using-an-incoming-webhook

{
   "type":"message",
   "attachments":[
      {
         "contentType":"application/vnd.microsoft.card.adaptive",
         "contentUrl":null,
         "content":{
            "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
            "type":"AdaptiveCard",
            "version":"1.2",
            "body":[
                {
                "type": "TextBlock",
                "text": "For Samples and Templates, see [https://adaptivecards.io/samples](https://adaptivecards.io/samples)"
                }
            ]
         }
      }
   ]
}

By sending the above JSON as the request body (data argument for axios), I successfully got the Adaptive Card to show up in my Teams Channel.

As you can see, the value of "content" is the Adaptive Card structure. The Adaptive Card follows the documented syntax, found here:

https://docs.microsoft.com/en-us/adaptive-cards/authoring-cards/getting-started

But ultimately, I found it easier to work with this "Designer" https://www.adaptivecards.io/designer/ which provides a WYSIWYG interface.

I am sending the request to a Connector that I created in Teams by following the instructions found here:

https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook#create-incoming-webhook-1

And now it responds with 200 OK and shows up in the Channel!

Microsoft Teams Webhook Generating 400 for Adaptive Card

4 Answers