SOLVED

Adaptive card is not rendered on android phone

%3CLINGO-SUB%20id%3D%22lingo-sub-1175133%22%20slang%3D%22en-US%22%3EAdaptive%20card%20is%20not%20rendered%20on%20android%20phone%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1175133%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20have%20an%20external%20bot%20configured%20to%20use%20MS%20Teams%20channel%20using%20message%20end%20point%20web%20hook.%20The%20following%20is%20the%20message%20posted%20to%20the%26nbsp%3B%20Ms%20Teams%20channel%20by%20the%20external%20bot.%20This%20response%20gets%20rendered%20as%20expected%20when%20MS%20Teams%20is%20accessed%20via%20web%20browser%20or%20MS%20Teams%20application%20on%20desktop%20computer.%20However%2C%26nbsp%3B%20the%20card%20is%20not%20rendered%20at%20all%20(seeing%20an%20empty%20line%2Fblock%20without%20any%20content)%26nbsp%3B%20when%20used%20with%26nbsp%3B%20Teams%20application%20on%20android%20mobile%20phone.%20What%20is%20going%20wrong%20here%3F%20Am%20I%20missing%20something%3F%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%20%0A%20%20%20%22channelData%22%3A%7B%20%0A%20%20%20%20%20%20%22tenant%22%3A%7B%20%0A%20%20%20%20%20%20%20%20%20%22id%22%3A%22xxxxxxxxxxxxxx%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%7D%2C%0A%20%20%20%22attachments%22%3A%5B%20%0A%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%22contentType%22%3A%22application%2Fvnd.microsoft.card.adaptive%22%2C%0A%20%20%20%20%20%20%20%20%20%22content%22%3A%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%22fallbackText%22%3A%22Adaptive%20card%20version%20not%20supported%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%22AdaptiveCards%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22body%22%3A%5B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%22Here%20is%20an%20adaptive%20card%20with%20a%20link%20to%20a%20task%20module%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%22TextBlock%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22version%22%3A%221.0%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22actions%22%3A%5B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%22Action.OpenUrl%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22title%22%3A%22Open%20Link%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%22https%3A%2F%2Fteams.microsoft.com%2Fl%2Ftask%2Fxxxxx%3Furl%3Dhttps%253A%252F%252Fwww.wikipedia.com%250A%26amp%3Bheight%3Dlarge%26amp%3Bwidth%3Dlarge%26amp%3Btitle%3DWikipedia-Embed%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%5D%2C%0A%20%20%20%22replyToId%22%3A%22xxxxxx%22%2C%0A%20%20%20%22serviceUrl%22%3A%22https%3A%2F%2Fsmba.trafficmanager.net%2Famer%2F%22%2C%0A%20%20%20%22recipient%22%3A%7B%20%0A%20%20%20%20%20%20%22name%22%3A%22xxxx%20xxxx%22%2C%0A%20%20%20%20%20%20%22aadObjectId%22%3A%22xxxxx%22%2C%0A%20%20%20%20%20%20%22id%22%3A%22xx%3Axxxxxxxx%22%0A%20%20%20%7D%2C%0A%20%20%20%22localTimestamp%22%3A%222020-02-14T15%3A21%3A41.1360000-08%3A00%22%2C%0A%20%20%20%22channelType%22%3A%22msteams%22%2C%0A%20%20%20%22from%22%3A%7B%20%0A%20%20%20%20%20%20%22name%22%3A%22xxxxxx%22%2C%0A%20%20%20%20%20%20%22id%22%3A%22xx%3Axxxxx%22%0A%20%20%20%7D%2C%0A%20%20%20%22type%22%3A%22message%22%2C%0A%20%20%20%22conversation%22%3A%7B%20%0A%20%20%20%20%20%20%22conversationType%22%3A%22personal%22%2C%0A%20%20%20%20%20%20%22tenantId%22%3A%22xxxxxx%22%2C%0A%20%20%20%20%20%20%22id%22%3A%22x%3Axxxxxx%22%0A%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1175133%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1176879%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20is%20not%20rendered%20on%20android%20phone%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1176879%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F443342%22%20target%3D%22_blank%22%3E%40jobinesh%3C%2FA%3E%26nbsp%3BI%20could%20not%20repro%20the%20issue%20with%20Adaptive%20card%20on%20mobile.The%20card%20you%20shared%20renders%20fine%20on%20mobile%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Gousia_Begum_0-1581916195723.jpeg%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F171464iFA2AABBB38EFD2DC%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Gousia_Begum_0-1581916195723.jpeg%22%20alt%3D%22Gousia_Begum_0-1581916195723.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ECould%20you%20please%20try%20changing%20the%20type%20of%20card%20to%20%22AdaptiveCard%22%20instead%20of%20%22AdaptiveCards%22%3F%20Also%20could%20you%20please%20confirm%20if%20you%20have%20the%20latest%20version%20of%20Teams%20app%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1178452%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20is%20not%20rendered%20on%20android%20phone%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1178452%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F359599%22%20target%3D%22_blank%22%3E%40Gousia_Begum%3C%2FA%3E%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20the%20same%20issue%2C%20did%20a%20web%20search%2C%20and%20this%20ticket%20came%20up.%20I'm%20attaching%20a%20screenshot%20of%20what%20it%20looks%20like.%26nbsp%3B%20I%20can%20see%20the%20card%20fine%20in%20the%20Mac%20and%20browser%20clients.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20on%20a%20Samsung%20S9%2C%20using%20the%20Teams%20client%20last%20updated%20on%20January%2026%2C%202020%20(1416%2F1.0.0.2020012501).%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1178576%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20is%20not%20rendered%20on%20android%20phone%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1178576%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F359599%22%20target%3D%22_blank%22%3E%40Gousia_Begum%3C%2FA%3E%26nbsp%3B%20Thanks.%20If%20I%20change%20%22type%22%3A%22AdaptiveCards%22%20it%20works%20on%20mobile%20as%20well.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1593058%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20is%20not%20rendered%20on%20android%20phone%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1593058%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F443342%22%20target%3D%22_blank%22%3E%40jobinesh%3C%2FA%3E%26nbsp%3BHello%20i%20have%20the%20exact%20same%20problem%20with%20a%20card%20i%20did%20by%20myself%3A%20it%20renders%20on%20pc%20just%20fine%2C%20but%20not%20on%20mobile.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%20%20schema%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%22%2C%0A%20%20%20%20%20%20version%3A%20%221.0.0%22%2C%0A%20%20%20%20%20%20type%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%20%20body%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%2F%2Ftext%3A%20taskDefination%5Bstate%5D%20%2B%20%22%20%5B%22%20%2B%20tasks.length%20%2B%20%22%5D%22%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20...tasks.map((t)%20%3D%26gt%3B%20(%0A%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20type%3A%20%22ColumnSet%22%2C%0A%20%20%20%20%20%20%20%20%20%20separator%3Atrue%2C%0A%20%20%20%20%20%20%20%20%20%20height%20%3A%20%22auto%22%2C%0A%20%20%20%20%20%20%20%20%20%20spacing%3A%20%22padding%22%2C%0A%20%20%20%20%20%20%20%20%20%20columns%3A%20%5B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22Column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%20%3A%20t.src%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%0A%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22Column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20t.receiptNo%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20%22bolder%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20horizontalAlignment%3A%20%22center%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22Column%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22ActionSet%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20actions%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22Action.Submit%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fid%3A%20%22btnBuy%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%20%3A%20%22positive%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3A%20%22Show%20Expense%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20taskId%3A%20t.receiptNo%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msteams%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%22task%2Ffetch%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20))%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
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?