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.