I have created an Adaptive Card using Adaptive Cards Designer . At the top of the card are 6 buttons that when clicked toggle the visibility control for a related container e.g. clicking button 2 reveals container 2 by changing its visibility to true. In each container is a ChoiceSet and a button to close the container. Closing the container merely toggles the container visibility back to false with the effect it is hidden. Submitting the card triggers a Microsoft Flow to return a new payload to the card.
The card works fine in the Designer, Outlook for Desktop (Windows 10) and Outlook Web (Edge-Cr Dev, Edge and Chrome). The card works fine in Dark and Light mode in Outlook for Desktop and Outlook Web.
My issue is that the card renders as empty in Outlook for Mobile (Android). Sample cards render fine in Outlook for Mobile. This is making me think that there is limit to the card complexity / number of items that can be rendered on mobile.
Is there a limit on the complexity / number of items for mobile?
Screenshots and code provided below:
Adaptive Card with one of the containers visible
Adaptive Card rendering as blank in Outlook Mobile
{
"type": "AdaptiveCard",
"version": "1.0",
"hideOriginalBody": true,
"body": [
{
"type": "TextBlock",
"weight": "Bolder",
"color": "Accent",
"text": "How are you feeling today?",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Mad",
"targetElements": [
"madCont"
]
},
{
"type": "Action.ToggleVisibility",
"title": "Scared",
"targetElements": [
"scaredCont"
]
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Powerful",
"targetElements": [
"powerfulCont"
]
},
{
"type": "Action.ToggleVisibility",
"title": "Joyful",
"targetElements": [
"joyfulCont"
]
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Sad",
"targetElements": [
"sadCont"
]
},
{
"type": "Action.ToggleVisibility",
"title": "Peaceful",
"targetElements": [
"peacefulCont"
]
}
]
},
{
"type": "Container",
"id": "madCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling mad...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "madChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Hurt",
"value": "m1"
},
{
"title": "Hostile",
"value": "m2"
},
{
"title": "Angry",
"value": "m3"
},
{
"title": "Selfish",
"value": "m4"
},
{
"title": "Hateful",
"value": "m5"
},
{
"title": "Critical",
"value": "m6"
},
{
"title": "Distant",
"value": "m7"
},
{
"title": "Sarcastic",
"value": "m8"
},
{
"title": "Frustrated",
"value": "m9"
},
{
"title": "Jealous",
"value": "m10"
},
{
"title": "Irritated",
"value": "m11"
},
{
"title": "Skeptical",
"value": "m12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"madCont"
]
}
]
}
]
},
{
"type": "Container",
"id": "scaredCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling scared...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "scaredChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Confused",
"value": "s1"
},
{
"title": "Rejected",
"value": "s2"
},
{
"title": "Helpless",
"value": "s3"
},
{
"title": "Submissive",
"value": "s4"
},
{
"title": "Insecure",
"value": "s5"
},
{
"title": "Anxious",
"value": "s6"
},
{
"title": "Bewildered",
"value": "s7"
},
{
"title": "Discouraged",
"value": "s8"
},
{
"title": "Insignificant",
"value": "s9"
},
{
"title": "Inadequate",
"value": "s10"
},
{
"title": "Embarrassed",
"value": "s11"
},
{
"title": "Overwhelmed",
"value": "s12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"scaredCont"
]
}
]
}
]
},
{
"type": "Container",
"id": "joyfulCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling joyful...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "joyChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Excited",
"value": "j1"
},
{
"title": "Sensuous",
"value": "j2"
},
{
"title": "Energetic",
"value": "j3"
},
{
"title": "Cheerful",
"value": "j4"
},
{
"title": "Creative",
"value": "j5"
},
{
"title": "Hopeful",
"value": "j6"
},
{
"title": "Daring",
"value": "j7"
},
{
"title": "Fascinating",
"value": "j8"
},
{
"title": "Stimulating",
"value": "j9"
},
{
"title": "Amused",
"value": "j10"
},
{
"title": "Playful",
"value": "j11"
},
{
"title": "Optimistic",
"value": "j12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"joyfulCont"
]
}
]
}
]
},
{
"type": "Container",
"id": "powerfulCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling powerful...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "powerfulChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Faithful",
"value": "p1"
},
{
"title": "Important",
"value": "p2"
},
{
"title": "Appreciated",
"value": "p3"
},
{
"title": "Respected",
"value": "p4"
},
{
"title": "Proud",
"value": "p5"
},
{
"title": "Aware",
"value": "p6"
},
{
"title": "Confident",
"value": "p7"
},
{
"title": "Discerning",
"value": "p8"
},
{
"title": "Valueable",
"value": "p9"
},
{
"title": "Worthwhile",
"value": "p10"
},
{
"title": "Successful",
"value": "p11"
},
{
"title": "Suprised",
"value": "p12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"powerfulCont"
]
}
]
}
]
},
{
"type": "Container",
"id": "peacefulCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling peaceful...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "peacefulChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Content",
"value": "q1"
},
{
"title": "Thoughful",
"value": "q2"
},
{
"title": "Intimate",
"value": "q3"
},
{
"title": "Loving",
"value": "q4"
},
{
"title": "Trusting",
"value": "q5"
},
{
"title": "Nurturing",
"value": "q6"
},
{
"title": "Relaxed",
"value": "q7"
},
{
"title": "Pensive",
"value": "q8"
},
{
"title": "Responsive",
"value": "q9"
},
{
"title": "Serene",
"value": "q10"
},
{
"title": "Secure",
"value": "q11"
},
{
"title": "Thankful",
"value": "q12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"peacefulCont"
]
}
]
}
]
},
{
"type": "Container",
"id": "sadCont",
"isVisible": false,
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "Feeling sad...",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"weight": "Lighter",
"text": "Which terms best express your feelings?",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "sadChoice",
"separator": true,
"placeholder": "Which terms best express your feelings?",
"choices": [
{
"title": "Tired",
"value": "t1"
},
{
"title": "Bored",
"value": "t2"
},
{
"title": "Lonely",
"value": "t3"
},
{
"title": "Depressed",
"value": "t4"
},
{
"title": "Ashamed",
"value": "t5"
},
{
"title": "Guilty",
"value": "t6"
},
{
"title": "Sleepy",
"value": "t7"
},
{
"title": "Apathetic",
"value": "t8"
},
{
"title": "Isolated",
"value": "t9"
},
{
"title": "Inferior",
"value": "t10"
},
{
"title": "Stupid",
"value": "t11"
},
{
"title": "Remorseful",
"value": "t12"
}
],
"style": "expanded",
"isMultiSelect": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Close section",
"targetElements": [
"sadCont"
]
}
]
}
]
},
{
"type": "TextBlock",
"text": "Feel free to provide additional context to your feelings",
"wrap": true
},
{
"type": "Container",
"items": [
{
"type": "Input.Text",
"id": "feedback",
"placeholder": "Do not include feedback that may identify you unless your are comfortable to do so",
"isMultiline": true
},
{
"type": "TextBlock",
"text": "*All submissions are anonymous*",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Http",
"id": "submitHealth",
"title": "Submit",
"method": "POST",
"url": "https://prod-121.westeurope.logic.azure.com:443/workflows/4094594b2712463cbb9d98d349e70733/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=5adh7-2ufbHBLFMLGdKR7_OYuQECIX2B66pN_ihICig",
"body": "[{'mad': '{{madChoice.value}}'},{'scared': '{{scaredChoice.value}}'},{'joyful': '{{joyChoice.value}}'},{'powerful': '{{powerfulChoice.value}}'},{'peaceful': '{{peacefulChoice.value}}'},{'sad': '{{sadChoice.value}}'},{'feedback': '{{feedback.value}}'}]",
"headers": [
{
"name": "Authorization",
"value": ""
}
]
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"originator": "<<<removed for stack overflow post>>>",
"fallbackText": "Sorry your email application does not support Adaptive Cards."
}
