SOLVED

Adaptive card is not rendered on android phone

New Contributor

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"
   }
}

 

 

5 Replies
best response confirmed by jobinesh (New Contributor)
Solution

@jobinesh I could not repro the issue with Adaptive card on mobile.The card you shared renders fine on mobile:

Gousia_Begum_0-1581916195723.jpeg

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?

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

@Gousia_Begum  Thanks. If I change "type":"AdaptiveCards" it works on mobile as well. 

@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",
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        }
        
        
        
        )),
      ],
    }

@shnippi_esgroup 

Facing the same issue. Have used only "AdaptiveCard" as the type everywhere. Were you able to find a solution?