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

  •  

    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
    • Nivedipa-MSFT's avatar
      Nivedipa-MSFT
      Icon for Microsoft rankMicrosoft

      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?

      • Nivedipa-MSFT's avatar
        Nivedipa-MSFT
        Icon for Microsoft rankMicrosoft

        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?

Resources