Forum Discussion

Ori_ayache's avatar
Ori_ayache
Copper Contributor
May 15, 2023

Adaptive card not Displaying on teams mobile

hey!. my adaptive card doesn't display on moblie teams but it does work on desktop.     here is the Json:    { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "Adaptiv...
developer
microsoft teams
Nivedipa-MSFT's avatar
Nivedipa-MSFT
Icon for Microsoft rankMicrosoft
We will check and update you soon.
Chris_Brydges's avatar
Chris_Brydges
Copper Contributor
Jun 22, 2023

Nivedipa-MSFT  Is there an update on this issue? I am seeing the same thing.

  • bodei's avatar
    bodei
    Copper Contributor
    Sep 09, 2024

    Hi Griffin1235, found two possible ways Teams card can fail on mobiles while ok on desktop:
    1) Having an empty image url (I used Power Automate and in my case the link may be null)

     

     

     

    {
  "type": "Image",
  "size": "medium",
  "url": "@{variables('LinkToImage')}"
}

     

     

     

    2) Duplicate 'title' fields for 'Action.Submit' - as shown below, look for duplicate '"title": "Submit"',  change one of them to 'Submitxyz', see if it's fixed.  Not sure if this is explicitly not allowed in the Adaptive Card doc.

     

     

     

    "actions": [
  {
    "type": "Action.Submit",
    "title": "Submit"
  }
]

     

     

     

    I'm using card v1.4

     

    It seems that the desktop Teams is more forgiving while the mobile clients are a lot more sensitive.  Also same case as some of you above, my cards worked for some time then one day it stopped showing.  The result of a Teams client update probably.

     

    HTH,

     

    GDB

  • vfan140's avatar
    vfan140
    Copper Contributor
    Dec 21, 2023
    use this json for the adaptive-card, display well on the IOS, but fail on Android.

    {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
    {
    "type": "TextBlock",
    "text": "hh",
    "wrap": true,
    "size": "medium"
    }
    ]
    }
  • vfan140's avatar
    vfan140
    Copper Contributor
    Dec 21, 2023
    Is there an update on this issue? I am seeing the same thing.
  • Griffin1235's avatar
    Griffin1235
    Copper Contributor
    Nov 28, 2023
    smendigor Please share your Android/iOS and mobile team versions so we can test on the same ones.
  • smendigor's avatar
    smendigor
    Copper Contributor
    Nov 27, 2023

    Griffin1235 

     

    I found the issue here, it was because of a column set that we used in the Adaptive card, some are not compatible to the images. What I did is I removed the column set and try to put it in a container. 

    Maybe you can try first to remove the column set if you are using it then check if the image will appear on your mobile. 

     

  • Griffin1235's avatar
    Griffin1235
    Copper Contributor
    Nov 27, 2023
    Nivedipa-MSFT Have a similar issue. Teams Adaptive card renders properly on Web/Desktop versions but not on Mobile - IpHone or Android. Is there an update on this issue?
  • smendigor's avatar
    smendigor
    Copper Contributor
    Jul 27, 2023

    Chris_Brydges 

     

    What did you do? I'm using also Azure Logic Apps and have some image in my adaptive card. 

  • Chris_Brydges's avatar
    Chris_Brydges
    Copper Contributor
    Jul 06, 2023
    We have got this to work, we were using Logic Apps. We were dynamically passing images, if there wasnt one we were sending "" as the URL, this was causing the card to not work on Mobile, but working ok on desktop.
  • Nivedipa-MSFT's avatar
    Nivedipa-MSFT
    Icon for Microsoft rankMicrosoft
    Jul 04, 2023

    Sannjeevr - Apologies for late reply. 

    We have tested this via Power Automate and on Teams web client. Also on Android 12 and Android Teams version 1416/1.0.0.2023133201/0721  It was working fine at our end. The card is displaying correctly.


    Android

     


    Could you please test this again and confirm once?

    Thanks,
    Nivedipa
    -------------------------------------------------------------------------
    If the response is helpful, please click Mark as Best Response and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

Resources