SOLVED

Adaptive Card not Displaying On Teams Mobile

Copper Contributor

Hey everyone,

I've been messing with Power Automate to create Adaptive Cards after every day to update the team on how we're doing. It works perfectly on Desktop, however, some text is not visible on Mobile as seen in attached pictures. The first picture is how it displays on mobile, the second is how it displays on desktop.
Changing my theme to light still does not show the numbers that should be there. I've attached the adaptive card json at the bottom, any help is appreciated!

Mobile view, numbers are invisible.Mobile view, numbers are invisible.Desktop view, how it should lookDesktop view, how it should look

{
    "type""AdaptiveCard",
    "body": [
        {
            "type""Container",
            "items": [
                {
                    "type""TextBlock",
                    "size""Large",
                    "weight""Bolder",
                    "text""DC Data for Last Shipping Day ",
                    "spacing""Large",
                    "horizontalAlignment""Center",
                    "color""Good"
                },
                {
                    "type""TextBlock",
                    "text""Great work! We shipped @{add(add(int(variables('Output')[0]['Orders Shipped']), int(variables('Output')[1]['Orders Shipped'])), int(variables('Output')[2]['Orders Shipped']))} orders.",
                    "wrap"true,
                    "size""Medium",
                    "horizontalAlignment""Center"
                }
            ]
        },
        {
            "type""ColumnSet",
            "columns": [
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""TextBlock",
                            "wrap"true,
                            "text""Wisconsin:\n\n",
                            "size""Large",
                            "weight""Bolder"
                        },
                        {
                            "type""FactSet",
                            "facts": [
                                {
                                    "title""Orders Shipped:",
                                    "value""@{variables('Output')[0]['Orders Shipped']}"
                                },
                                {
                                    "title""Orders Left to Ship:",
                                    "value""@{variables('Output')[0]['Orders Left to Ship']}"
                                },
                                {
                                    "title""Overdue Orders:",
                                    "value""@{variables('Output')[0]['Overdue Orders ']}"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""TextBlock",
                            "text""Nevada:",
                            "wrap"true,
                            "size""Large",
                            "weight""Bolder"
                        },
                        {
                            "type""FactSet",
                            "facts": [
                                {
                                    "title""Orders Shipped:",
                                    "value""@{variables('Output')[1]['Orders Shipped']}",
                                    "color""Accent"
                                },
                                {
                                    "title""Orders Left to Ship:",
                                    "value""@{variables('Output')[1]['Orders Left to Ship']}"
                                },
                                {
                                    "title""Overdue Orders:",
                                    "value""@{variables('Output')[1]['Overdue Orders ']}"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""TextBlock",
                            "text""Mississippi:",
                            "wrap"true,
                            "size""Large",
                            "weight""Bolder"
                        },
                        {
                            "type""FactSet",
                            "facts": [
                                {
                                    "title""Orders Shipped:",
                                    "value""@{variables('Output')[2]['Orders Shipped']}"
                                },
                                {
                                    "title""Orders Left to Ship:",
                                    "value""@{variables('Output')[2]['Orders Left to Ship']}"
                                },
                                {
                                    "title""Overdue Orders:",
                                    "value""@{variables('Output')[2]['Overdue Orders ']}"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type""ColumnSet",
            "columns": [
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""TextBlock",
                            "text""TOTAL PERCENTAGE",
                            "size""Large",
                            "color""Accent",
                            "maxLines"3,
                            "wrap"true,
                            "horizontalAlignment""Center"
                        }
                    ],
                    "verticalContentAlignment""Center"
                },
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""TextBlock",
                            "wrap"true,
                            "text"" @{body('Format_number')}%",
                            "size""ExtraLarge",
                            "horizontalAlignment""Center",
                            "color""Good"
                        }
                    ],
                    "verticalContentAlignment""Center"
                },
                {
                    "type""Column",
                    "width""stretch",
                    "items": [
                        {
                            "type""Image",
                            "url""imageURL",
                            "horizontalAlignment""Center",
                            "spacing""None"
                        }
                    ],
                    "verticalContentAlignment""Center",
                    "backgroundImage": {
                        "verticalAlignment""Center",
                        "horizontalAlignment""Center"
                    },
                    "horizontalAlignment""Center"
                }
            ]
        }
    ],
    "version""1.3"
}
15 Replies

@Sigmadelta8 - We are checking the issue. We will get back to you shortly.

best response confirmed by Sigmadelta8 (Copper Contributor)
Solution

@Sigmadelta8 - We are able to repro the issue. The card is getting rendered properly in Teams Desktop and Web version.

Prasad_DasMSFT_0-1655362229130.png


But its not rendering properly in Mobile clients.

Prasad_DasMSFT_1-1655362262072.png


We have raised a bug for this. We will inform you once we get any update from engineering team.

Thanks, 

Prasad Das

-------------------------------------------------------------------------------

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. 

@Prasad_Das-MSFT   Hello Prasa, i see your reply dates back to June,  today 17 Oct , i have the same rendering issue in the phone app.  In this case the AC does not show at all when using Teams on the phone app. (Ios)

@isaaccordovasalazar - We are checking the status of the bug with engineering team. We will inform you once we have any update. Thanks!

@Prasad_Das-MSFT I’m having this exact same issue.  In my situation though, the entire card is blank on mobile. Any updates on this?

@Bravo8whiskey - We are checking the status of the bug with engineering team. We will inform you once we have any update.

@Bravo8whiskey -
Sorry for delay in response.
We are actively checking the status of the bug with engineering team. We will inform you once we have any update.
I have the same issue. Surely an issue raised on 15/6/22 as fundamental as this cant still be outstanding.
It makes the whole Adaptive Card system in Power Automate and Teams unusable.
getting the same error with my card now. Worked until 15th March 2023.

{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "Refresh",
"verb": "refresh",
"data": {
"AssignedUserName": "${$root.AssignedUserName}",
"CC": "${$root.CC}",
"CloseDate": "${$root.CloseDate}",
"Description": "${$root.Description}",
"From": "${$root.From}",
"ID": "${$root.ID}",
"LastUpdated": "${$root.LastUpdated}",
"Notified": "${$root.Notified}",
"OpenDate": "${$root.OpenDate}",
"Priority": "${$root.Priority}",
"Reference": "${$root.Reference}",
"StatusName": "${$root.StatusName}",
"Subject": "${$root.Subject}",
"TimeTaken": "${$root.TimeTaken}"
},
"fallback": "Action.Submit"
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open in Outlook",
"url": "http://outlookredirect/${$root.Reference}"
}
]
}
],
"width": "stretch"
}
],
"style": "emphasis",
"bleed": true
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${$root.Subject}",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${$root.From}",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "${$root.OpenDate}",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "Status:",
"value": "${$root.StatusName}"
},
{
"title": "Assigned to:",
"value": "${$root.AssignedUserName}"
},
{
"title": "User needs it done by:",
"value": "${$root.PriorityName}"
},
{
"title": "IT can do it by:",
"value": "${$root.ITPriorityName}"
},
{
"title": "Tags:",
"value": "${$root.Tags}"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Edit",
"card": {
"type": "AdaptiveCard",
"body": [
{
"id": "Status",
"label": "Status:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Created",
"value": "1"
},
{
"title": "Acknowledged",
"value": "2"
},
{
"title": "Working On",
"value": "4"
},
{
"title": "Delayed",
"value": "8"
},
{
"title": "PassedOn",
"value": "16"
},
{
"title": "Completed",
"value": "32"
},
{
"title": "Rejected",
"value": "64"
},
{
"title": "Awaiting further details",
"value": "128"
},
{
"title": "On Hold",
"value": "256"
},
{
"title": "Awaiting Sign Off",
"value": "512"
}
],
"value": "${$root.Status}"
},
{
"id": "AssignedUserID",
"label": "Assign a user:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Tom Perry 🥦",
"value": "81"
},
{
"title": "Matt Roberts :camera:",
"value": "18"
},
{
"title": "Matt Phillips :poultry_leg:",
"value": "57"
},
{
"title": "Ben Rose 🧛:rat:",
"value": "78"
}
],
"value": "${$root.AssignedUserID}"
},
{
"id": "UserPriority",
"label": "User wants this done by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.UserPriority}"
},
{
"id": "ITPriority",
"label": "IT can do this by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.ITPriority}"
},
{
"id": "CardTag",
"label": "Add a Tag:",
"type": "Input.ChoiceSet",
"choices": "${$root.DBTags}",
"value": "${$root.CardTag}"
}
],
"actions": [
{
"type": "Action.Execute",
"title": "Save",
"verb": "save",
"data": {
"AssignedUserName": "${$root.AssignedUserName}",
"CC": "${$root.CC}",
"CloseDate": "${$root.CloseDate}",
"Description": "${$root.Description}",
"From": "${$root.From}",
"ID": "${$root.ID}",
"LastUpdated": "${$root.LastUpdated}",
"Notified": "${$root.Notified}",
"OpenDate": "${$root.OpenDate}",
"Priority": "${$root.Priority}",
"Reference": "${$root.Reference}",
"StatusName": "${$root.StatusName}",
"Subject": "${$root.Subject}",
"TimeTaken": "${$root.TimeTaken}"
},
"fallback": "Action.Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "Completed",
"card": {
"type": "AdaptiveCard",
"body": [
{
"id": "Status",
"label": "Status:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Created",
"value": "1"
},
{
"title": "Acknowledged",
"value": "2"
},
{
"title": "Working On",
"value": "4"
},
{
"title": "Delayed",
"value": "8"
},
{
"title": "PassedOn",
"value": "16"
},
{
"title": "Completed",
"value": "32"
},
{
"title": "Rejected",
"value": "64"
},
{
"title": "Awaiting further details",
"value": "128"
},
{
"title": "On Hold",
"value": "256"
},
{
"title": "Awaiting Sign Off",
"value": "512"
}
],
"value": "${$root.Status}"
},
{
"id": "AssignedUserID",
"label": "Assign a user:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Tom Perry 🥦",
"value": "81"
},
{
"title": "Matt Roberts :camera:",
"value": "18"
},
{
"title": "Matt Phillips :poultry_leg:",
"value": "57"
},
{
"title": "Ben Rose 🧛:rat:",
"value": "78"
}
],
"value": "${$root.AssignedUserID}"
},
{
"id": "UserPriority",
"label": "User wants this done by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.UserPriority}"
},
{
"id": "ITPriority",
"label": "IT can do this by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.ITPriority}"
},
{
"id": "CardTag",
"label": "Add a Tag:",
"type": "Input.ChoiceSet",
"choices": "${$root.DBTags}",
"value": "${$root.CardTag}"
},
{
"type": "Input.Number",
"style": "text",
"id": "TimeTaken",
"label": "Time Taken (in minutes):",
"errorMessage": "Number is required"
},
{
"type": "Input.Text",
"style": "text",
"id": "WikiLink",
"label": "Wiki Link:",
"errorMessage": "Text is required"
},
{
"type": "Input.Text",
"style": "text",
"id": "ExecutedSQL",
"label": "Executed SQL:",
"errorMessage": "Text is required"
}
],
"actions": [
{
"type": "Action.Execute",
"title": "Save",
"verb": "save",
"data": {
"AssignedUserName": "${$root.AssignedUserName}",
"CC": "${$root.CC}",
"CloseDate": "${$root.CloseDate}",
"Description": "${$root.Description}",
"From": "${$root.From}",
"ID": "${$root.ID}",
"LastUpdated": "${$root.LastUpdated}",
"Notified": "${$root.Notified}",
"OpenDate": "${$root.OpenDate}",
"Priority": "${$root.Priority}",
"Reference": "${$root.Reference}",
"StatusName": "${$root.StatusName}",
"Subject": "${$root.Subject}",
"ITPriority": "${$root.ITPriority}"
},
"fallback": "Action.Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"card": {
"type": "AdaptiveCard",
"body": [
{
"id": "Status",
"label": "Status:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Created",
"value": "1"
},
{
"title": "Acknowledged",
"value": "2"
},
{
"title": "Working On",
"value": "4"
},
{
"title": "Delayed",
"value": "8"
},
{
"title": "PassedOn",
"value": "16"
},
{
"title": "Completed",
"value": "32"
},
{
"title": "Rejected",
"value": "64"
},
{
"title": "Awaiting further details",
"value": "128"
},
{
"title": "On Hold",
"value": "256"
},
{
"title": "Awaiting Sign Off",
"value": "512"
}
],
"value": "${$root.Status}"
},
{
"id": "AssignedUserID",
"label": "Assign a user:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Tom Perry 🥦",
"value": "81"
},
{
"title": "Matt Roberts :camera:",
"value": "18"
},
{
"title": "Matt Phillips :poultry_leg:",
"value": "57"
},
{
"title": "Ben Rose 🧛:rat:",
"value": "78"
}
],
"value": "${$root.AssignedUserID}"
},
{
"id": "UserPriority",
"label": "User wants this done by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.UserPriority}"
},
{
"id": "ITPriority",
"label": "IT can do this by:",
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Unset",
"value": "0"
},
{
"title": "End of Week",
"value": "1"
},
{
"title": "Three Days",
"value": "2"
},
{
"title": "Afternoon",
"value": "3"
},
{
"title": "ASAP",
"value": "4"
},
{
"title": "Week",
"value": "5"
},
{
"title": "Two Weeks",
"value": "6"
},
{
"title": "Three Weeks",
"value": "7"
},
{
"title": "One Month",
"value": "8"
},
{
"title": "Six Months",
"value": "9"
}
],
"value": "${$root.ITPriority}"
},
{
"id": "CardTag",
"label": "Add a Tag:",
"type": "Input.ChoiceSet",
"choices": "${$root.DBTags}",
"value": "${$root.CardTag}"
},
{
"type": "Input.Text",
"style": "text",
"id": "RejectionReasoning",
"label": "Rejection Reasoning:",
"errorMessage": "Text is required"
}
],
"actions": [
{
"type": "Action.Execute",
"title": "Save",
"verb": "save",
"data": {
"AssignedUserName": "${$root.AssignedUserName}",
"CC": "${$root.CC}",
"CloseDate": "${$root.CloseDate}",
"Description": "${$root.Description}",
"From": "${$root.From}",
"ID": "${$root.ID}",
"LastUpdated": "${$root.LastUpdated}",
"Notified": "${$root.Notified}",
"OpenDate": "${$root.OpenDate}",
"Priority": "${$root.Priority}",
"Reference": "${$root.Reference}",
"StatusName": "${$root.StatusName}",
"Subject": "${$root.Subject}"
},
"fallback": "Action.Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "Add Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"style": "text",
"id": "Comment",
"errorMessage": "Text is required"
}
],
"actions": [
{
"type": "Action.Execute",
"title": "Add Comment",
"verb": "addcomment",
"data": {
"AssignedUserName": "${$root.AssignedUserName}",
"CC": "${$root.CC}",
"CloseDate": "${$root.CloseDate}",
"Description": "${$root.Description}",
"From": "${$root.From}",
"ID": "${$root.ID}",
"LastUpdated": "${$root.LastUpdated}",
"Notified": "${$root.Notified}",
"OpenDate": "${$root.OpenDate}",
"Priority": "${$root.Priority}",
"Reference": "${$root.Reference}",
"StatusName": "${$root.StatusName}",
"Subject": "${$root.Subject}",
"TimeTaken": "${$root.TimeTaken}",
"ITPriority": "${$root.ITPriority}",
"Comment": "${$root.Comment}"
},
"fallback": "Action.Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4"
}
Same results for us.

We get the complete card on Desktop, but in mobile view, it doesn't display anything.
Same problem on my organization. Adaptive cards do not display anything whatsoever
Any update on this? I have Cards showing in mobile and it seems like the exact same card isnt showing the card contents at all in another spot.
I have dropdowns showing as it should in the DT Client and the mobile client shows a series of checkboxes. Im not sure what to do here.
Apologies. Currently there is no specific ETA to share about the fix. However, we are constantly following up with engineering team and updated about severity and multiple reports. We will update this thread once we hear from them. Thanks!

@Prasad_Das-MSFT 

in 2024 issue is still there in teams ios app. AC working fine in desktop. nothing render in mobile app.

@Prasad_Das-MSFTIn iPhones, the adaptive card text is not properly aligned. However, the card renders properly in Teams Desktop and Web versions.

{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "- Alert you when you have upcoming or past due tasks",
"wrap": true,
"size": "Medium"
},
{
"type": "TextBlock",
"text": "- Allow you to view all of your open tasks",
"wrap": true,
"size": "Medium",
"spacing": "None"
},
{
"type": "TextBlock",
"text": "- View your own behavioral insights",
"wrap": true,
"size": "Medium",
"spacing": "None"
}
],
"spacing": "ExtraLarge"
},


30627f35-8aee-48a6-8d54-ca0f4f8319dd.png

Ayyappareddy965_1-1710331692538.png

 

1 best response

Accepted Solutions
best response confirmed by Sigmadelta8 (Copper Contributor)
Solution

@Sigmadelta8 - We are able to repro the issue. The card is getting rendered properly in Teams Desktop and Web version.

Prasad_DasMSFT_0-1655362229130.png


But its not rendering properly in Mobile clients.

Prasad_DasMSFT_1-1655362262072.png


We have raised a bug for this. We will inform you once we get any update from engineering team.

Thanks, 

Prasad Das

-------------------------------------------------------------------------------

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. 

View solution in original post