Forum Discussion

jobinesh's avatar
jobinesh
Copper Contributor
Feb 14, 2020
Solved

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

  • 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?

      • shnippi_esgroup's avatar
        shnippi_esgroup
        Copper 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",
                                },
                              },
                            },
                          ],
                        },
                      ],
                    },
                  ],
                }
                
                
                
                )),
              ],
            }
    • Terry550's avatar
      Terry550
      Copper Contributor

      Gousia_Begum  

      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).

Resources