Using MS Graph Explorer to Send a Adaptive Card to a Channel - Can I Remove the Padding at the Top?

Question

I'm using the MS Graph API Explorer to send messages to Channels in Teams, but whenever I send a message with an Adaptive Card attached, it adds padding to the top of the card and a 3-dot menu on the right with a "Copy" option.

The examples in Microsoft's documentation do not seem to have this problem.

Image of Card in Teams with extra padding at top

Is there a way to remove this padding and menu? or can I alter the content shown in this space?

I'm using the following endpoint... https://graph.microsoft.com/v1.0/teams/{team-id}/channels/{channel-id}/messages

With the following request body...

{
  "body": {
    "contentType": "html",
    "content": "<attachment id=\"4465B062-EE1C-4E0F-B944-3B7AF61EAF40\"></attachment>"
  },
  "attachments": [
    {
      "id": "4465B062-EE1C-4E0F-B944-3B7AF61EAF40",
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": "{\n        \"type\": \"AdaptiveCard\",\n        \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n        \"version\": \"1.3\",\n        \"body\": [\n          {\n            \"type\": \"TextBlock\",\n            \"size\": \"Large\",\n            \"weight\": \"Bolder\",\n            \"text\": \"My News Item\",\n            \"wrap\": true\n          }\n        ],\n        \"actions\": [\n          {\n            \"type\": \"Action.OpenUrl\",\n            \"title\": \"View\",\n            \"url\": \"https://bing.com\"\n          }\n        ]\n      }"
    }
  ]
}

So the issue doesnt happen when you play with Adaptive card playground, but only when you use with Graph Explorer only? — Dev
Yes. The Adaptive Card Designer link only shows the adaptive card, not the outer message body. However, to send that card with MS Graph API, you need to add the card JSON as an attachment to a message. When doing so through Graph Explorer, large padding is adding to the top. However, I did notice in the examples that send adaptive cards via a bot, they have that bot's name added into that space. I'm not sure how you add content into this space if you are not using a bot to initiate the request. — Phil
yeah i tested the same with Adaptive card designer and it works fine. Instead of Graph explorer i suggest you to test with their SDK also to see if you can repro the issue. Being said that sounds like the issue when you try to send as attachment. — Dev
Thanks for having a look. I think this is specifically when you send the adaptive card as an attachment. But I'm not sure if there is any other way to send an adaptive card tho? I'll give it a go using the SDK, but I have already tried through a C# dotnet project using a HttpClient POST request with an access token on the authorisation header (essentially what Graph Explorer is doing), and I get the same result. — Phil

Phil Phil · Accepted Answer · 2021-02-05T13:38:51

For now, this is not possible.

According to Microsoft, this is by-design....

Link to Microsoft Tech Community Discussion

I have added a uservoice suggestion for Microsoft, to expand the schema to include options to do this. If you end up having the same issue as me, at least you can add weight to this feature request...

Link to Microsoft Uservoice Suggestion

Using MS Graph Explorer to Send a Adaptive Card to a Channel - Can I Remove the Padding at the Top?

1 Answers