Adaptive card not Displaying on teams mobile

[Ori_ayache]

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": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "אנא בחר פעולה",
"size": "Medium",
"weight": "Bolder",
"wrap": true,
"horizontalAlignment": "Right"
}
],
"actions": [
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "חוו\"ד",
"wrap": true,
"horizontalAlignment": "Right",
"weight": "Bolder"
},
{
"type": "Input.Text",
"id": "HavadApproved",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "שלח/י",
"data": {
"ActionChoice": "Approved"
},
"style": "positive"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"style": "positive",
"title": "אושר לפרסום"
},
{
"type": "Action.ShowCard",
"title": "אושר להעברה ללשכת דו\"ץ",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "חוו\"ד",
"horizontalAlignment": "Right",
"weight": "Bolder"
},
{
"type": "Input.Text",
"id": "HavadForwardDotz",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.Submit",
"data": {
"ActionChoice": "ForwardDotz"
},
"title": "שלח/י",
"style": "positive"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
},
"style": "positive"
},
{
"type": "Action.ShowCard",
"title": "מאושר לעדכון לשכת דובר צה\"ל",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "חוו\"ד",
"wrap": true,
"horizontalAlignment": "Right",
"weight": "Bolder"
},
{
"type": "Input.Text",
"isMultiline": true,
"id": "HavadUpdateDotz"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "שלח/י",
"style": "positive",
"data": {
"ActionChoice": "UpdateDotz"
}
}
]
}
]
}
},
{
"type": "Action.ShowCard",
"title": "חזרה לטיפול",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "הערות חזרה לטיפול",
"horizontalAlignment": "Right",
"id": "NotesBackToHeader",
"weight": "Bolder"
},
{
"type": "Input.Text",
"id": "NotesBackTo",
"isMultiline": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "שלח/י",
"data": {
"ActionChoice": "BackTo"
},
"style": "positive"
}
]
}
]
}
},
{
"type": "Action.ShowCard",
"title": "נדחה",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "הערות לדחייה",
"id": "RejectedHeader",
"horizontalAlignment": "Right",
"weight": "Bolder"
},
{
"type": "Input.Text",
"id": "RejectedInput",
"isMultiline": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "שלח/י",
"data": {
"ActionChoice": "Rejcted"
},
"style": "positive"
}
]
}
]
}
},
{
"type": "Action.ShowCard",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"wrap": true,
"text": "חוו\"ד",
"weight": "Bolder",
"horizontalAlignment": "Right"
},
{
"type": "Input.Text",
"isMultiline": true,
"id": "RejcetedUpdate"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "שלח/י",
"style": "positive",
"data": {
"ActionChoice": "RejctedUpdate"
}
}
]
}
]
},
"title": "נדחה, עדכון לשכת דובר צה\"ל"
},
{
"type": "Action.ShowCard",
"title": "דילוג",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "הערות",
"wrap": true,
"weight": "Bolder",
"horizontalAlignment": "Right"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text",
"isMultiline": true,
"id": "DilogNotes"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "שליחה",
"style": "positive",
"data": {
"ActionChoice": "Dilog"
}
}
]
}
]
}
}
]
}

[#2]

@Ori_ayache 

Based on the Adaptive Card JSON code you provided earlier, there don't appear to be any glaring issues that would prevent it from rendering correctly in Teams. However, I can provide a few recommendations to improve the code structure and ensure compatibility:

1. Validate JSON Structure: Before proceeding, ensure that the JSON structure is valid and follows the correct syntax. You can use online JSON validators or tools like the Adaptive Card Designer to validate your code.

2. Simplify Horizontal Alignment: In some elements, you've specified `"horizontalAlignment": "Right"`. However, since the card is intended for mobile display, it's recommended to use the default alignment (`"left"`) or center alignment (`"center"`). This will ensure better readability on mobile devices.

3. Handle Multiline Inputs: For multiline inputs, use the `"style"` property to specify how the input should behave. Add `"style": "text"` to allow multiline input with line breaks.

4. Check Card Width: Ensure that the overall width of the Adaptive Card does not exceed the maximum width allowed in Teams. Large card widths might cause layout issues on mobile devices.

5. Test on Multiple Devices: Validate the Adaptive Card's rendering on different mobile devices and screen sizes to ensure it displays correctly across various platforms.

While there doesn't seem to be a significant issue with the code you provided, it's crucial to test and iterate based on actual rendering in the Teams app to ensure the best user experience.

If I have answered your question, please mark your post as Solved

If you like my response, please give it a like

[#3]

@Ori_ayache 
We have tested your adaptive card json on Android version 12 and Teams version 1416/1.0.0.2023083101/0504. Card is displaying at our end.

Could you please share your Android version and Teams version?

[#4]

@Ori_ayache - Could you please confirm whether your issue has resolved or still facing this issue.
If yes, could you please share your Android version and Teams version?

[#5]

Have a similar issue. Teams Adaptive card renders properly on Web/Desktop versions but not on Mobile - IpHone or Android. Was working couple of days back. All the grey bars you see in the snip below are supposed to be adaptive cards that were working earlier.

[#6]

@Sannjeevr - Could you please share your Android/iOS and Mobile Teams version, so that we can test this on same version?

[#7]

@Nivedipa-MSFT 

Android Version : 12

Teams:

 

[#8]

We will check and update you soon.

[#9]

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

[#10]

@Chris_Brydges, @Sannjeevr - At our end, we are able to see the card. Could you please confirm the method you are using to send the card in chat? Are you utilizing bot code or Power Automate?

[#11]

@Nivedipa-MSFT  - Power Automate

[#12]

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

[#13]

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.

[#14]

@Chris_Brydges 

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

[#15]

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

[#16]

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

[#17]

@smendigor Please share your Android/iOS and mobile team versions so we can test on the same ones.

[#18]

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

[#19]

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

[#20]

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