Forum Discussion
Adaptive card is not rendered on android phone
Hi
We have an external bot configured to use MS Teams channel using message end point web hook. The following is the message posted to the Ms Teams channel by the external bot. This response gets rendered as expected when MS Teams is accessed via web browser or MS Teams application on desktop computer. However, the card is not rendered at all (seeing an empty line/block without any content) when used with Teams application on android mobile phone. What is going wrong here? Am I missing something?
{
"channelData":{
"tenant":{
"id":"xxxxxxxxxxxxxx"
}
},
"attachments":[
{
"contentType":"application/vnd.microsoft.card.adaptive",
"content":{
"fallbackText":"Adaptive card version not supported",
"type":"AdaptiveCards",
"body":[
{
"text":"Here is an adaptive card with a link to a task module",
"type":"TextBlock"
},
{
"type":"Image",
"url":"http://adaptivecards.io/content/cats/1.png"
}
],
"version":"1.0",
"actions":[
{
"type":"Action.OpenUrl",
"title":"Open Link",
"url":"https://teams.microsoft.com/l/task/xxxxx?url=https%3A%2F%2Fwww.wikipedia.com%0A&height=large&width=large&title=Wikipedia-Embed"
}
]
}
}
],
"replyToId":"xxxxxx",
"serviceUrl":"https://smba.trafficmanager.net/amer/",
"recipient":{
"name":"xxxx xxxx",
"aadObjectId":"xxxxx",
"id":"xx:xxxxxxxx"
},
"localTimestamp":"2020-02-14T15:21:41.1360000-08:00",
"channelType":"msteams",
"from":{
"name":"xxxxxx",
"id":"xx:xxxxx"
},
"type":"message",
"conversation":{
"conversationType":"personal",
"tenantId":"xxxxxx",
"id":"x:xxxxxx"
}
}
jobinesh I could not repro the issue with Adaptive card on mobile.The card you shared renders fine on mobile:
Could you please try changing the type of card to "AdaptiveCard" instead of "AdaptiveCards"? Also could you please confirm if you have the latest version of Teams app?
7 Replies
- Gousia_BegumFormer Employee
jobinesh I could not repro the issue with Adaptive card on mobile.The card you shared renders fine on mobile:
Could you please try changing the type of card to "AdaptiveCard" instead of "AdaptiveCards"? Also could you please confirm if you have the latest version of Teams app?
- jobineshCopper Contributor
Gousia_Begum Thanks. If I change "type":"AdaptiveCards" it works on mobile as well.
- shnippi_esgroupCopper Contributor
jobinesh Hello i have the exact same problem with a card i did by myself: it renders on pc just fine, but not on mobile.
{ schema: "http://adaptivecards.io/schemas/adaptive-card.json", version: "1.0.0", type: "AdaptiveCard", body: [ { type: "TextBlock", //text: taskDefination[state] + " [" + tasks.length + "]", }, ...tasks.map((t) => ( { type: "ColumnSet", separator:true, height : "auto", spacing: "padding", columns: [ { type: "Column", items: [ { type: "Image", url : t.src }, ], }, { type: "Column", items: [ { type: "TextBlock", text: t.receiptNo, weight: "bolder", horizontalAlignment: "center" }, ], }, { type: "Column", items: [ { type: "ActionSet", actions: [ { type: "Action.Submit", //id: "btnBuy", style : "positive", title: "Show Expense", data: { taskId: t.receiptNo, msteams: { type: "task/fetch", }, }, }, ], }, ], }, ], } )), ], }
- Terry550Copper Contributor
I have the same issue, did a web search, and this ticket came up. I'm attaching a screenshot of what it looks like. I can see the card fine in the Mac and browser clients.
I'm on a Samsung S9, using the Teams client last updated on January 26, 2020 (1416/1.0.0.2020012501).