Adaptivecards: Adaptive Cards Support for MS Teams Incoming Webhooks

[varundmishra]

I see that there was an issue which was closed on this (back in 2018) but I wanted to know if/when the Adaptive Cards will be supported by Incoming Webhooks in MS Teams?

[shalinijoshi19]

@siduppal / @VikrantSingh01 / @matthidinger / @dclaux ideas on what the ask here is ?

[matthidinger]

This is something that Teams is aware of and has been working on, but we don't have a timeline for when it can be released yet. There are some complicated dependencies that make it difficult to estimate

[dclaux]

This is related to Teams' Connectors support, which are currently limited to the MessageCard format. The Connectors platform is owned by Outlook, and it is not straightforward to add support for Adaptive Cards.

[shalinijoshi19]

Thanks @matthidinger / @dclaux . @siduppal can you share the tracking issue etc at your end for reference here for details/timelines? Thanks!

[shalinijoshi19]

@dclaux / @siduppal do we have tracking bugs or issues or forums that we can route the customer to for updates here? @varundmishra FYI please see notes above.

[Trinetra-MSFT]

@varundmishra , Adaptive cards is not supported in webhooks, However you can send message card to work with webhooks

[sgiulianiamius]

Hi guys,
how's the situation here? When will this functionality be released?
Is there at least a way to simulate a NxN table with Message Cards?
Thanks

[cryptic-ai]

Just going to +1 this. It would be nice to have Adaptive Cards in webhooks.

[chandan-g-bhagat]

Eagerly waiting for the adaptive cards to be supported in webhooks.

[Jon889]

+1 on this too

[kdll]

+1 on this
If anyone knows how to send them via other methods, let me know!

[cscheffauer]

+1 on this as well!

[timdonovanuk]

+1 here too.

[matthidinger]

Hi folks, we've got some updates to share here from the Teams developer community call. This video walks through how to use an Adaptive Card in an incoming webhook, but please note there is a limitation today with regards to Action.Submit. Take a look at the video for details:

https://www.youtube.com/watch?v=y5pbJI43Zvg

[dylan-asos]

Quick schema reference as used in the video linked from @matthidinger if it helps anyone, it's wrapping the adaptive content in the outermost envelope that got this working for me, then it's basically as described at https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference

{
   "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":"ColumnSet",
                  "id":"1ede2aba-61b9-faa0-9895-9ed0c26b2e6f",
                  "columns":[
                     {
                        "type":"Column",
                        "id":"e5756242-0963-37a2-7cb4-4397886d60bb",
                        "padding":"None",
                        "width":"stretch",
                        "items":[
                           {
                              "type":"TextBlock",
                              "id":"20f3833e-0435-5c87-fad1-b528e0046fb6",
                              "text":"Company Name",
                              "wrap":true
                           }
                        ],
                        "verticalContentAlignment":"Center"
                     },
                     {
                        "type":"Column",
                        "id":"74215a26-fa8b-e549-cced-7f99fd34a661",
                        "padding":"None",
                        "width":"auto",
                        "items":[
                           {
                              "type":"Image",
                              "id":"795047e2-e63e-6e14-07ba-5a3e13323dff",
                              "url":"https://amdesigner.azurewebsites.net/samples/assets/PlaceHolder_Person.png",
                              "size":"Small"
                           }
                        ],
                        "horizontalAlignment":"Right"
                     }
                  ],
                  "padding":{
                     "top":"Small",
                     "bottom":"Small",
                     "left":"Default",
                     "right":"Small"
                  },
                  "style":"emphasis"
               }
            ],
            "padding":"None"
         }
      }
   ]
}

[rkapoor028]

Official Update:-
https://microsoftteams.uservoice.com/forums/555103-public/suggestions/35793883-adaptive-cards-webhooks

[chandan-g-bhagat]

Quick schema reference as used in the video linked from @matthidinger if it helps anyone, it's wrapping the adaptive content in the outermost envelope that got this working for me, then it's basically as described at https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference

{
   "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":"ColumnSet",
                  "id":"1ede2aba-61b9-faa0-9895-9ed0c26b2e6f",
                  "columns":[
                     {
                        "type":"Column",
                        "id":"e5756242-0963-37a2-7cb4-4397886d60bb",
                        "padding":"None",
                        "width":"stretch",
                        "items":[
                           {
                              "type":"TextBlock",
                              "id":"20f3833e-0435-5c87-fad1-b528e0046fb6",
                              "text":"Company Name",
                              "wrap":true
                           }
                        ],
                        "verticalContentAlignment":"Center"
                     },
                     {
                        "type":"Column",
                        "id":"74215a26-fa8b-e549-cced-7f99fd34a661",
                        "padding":"None",
                        "width":"auto",
                        "items":[
                           {
                              "type":"Image",
                              "id":"795047e2-e63e-6e14-07ba-5a3e13323dff",
                              "url":"https://amdesigner.azurewebsites.net/samples/assets/PlaceHolder_Person.png",
                              "size":"Small"
                           }
                        ],
                        "horizontalAlignment":"Right"
                     }
                  ],
                  "padding":{
                     "top":"Small",
                     "bottom":"Small",
                     "left":"Default",
                     "right":"Small"
                  },
                  "style":"emphasis"
               }
            ],
            "padding":"None"
         }
      }
   ]
}

This one worked like a charm. Wrapping it in the type Message and attaching it in the attachments. However, I tried passing array of adaptive cards in it, but it displayed only one.

[Wajeed-msft]

Here is the documentation on Send adaptive cards using an incoming webhook.