we are using amdesigner.azurewebsites to design a custom adaptive card to be sent through Microsoft flow to our organization members for PO approvals. The JSON code for the card is generated from the designer and the originator id was generated and approved from Actionable Message Developer Dashboard.
We trigger the flow to send the email containing the actionable message card, it shows and works perfectly in Microsoft Outlook desktop and OWA (web outlook accessed from a desktop web browser). However, when we check the same email from Outlook iOS and Android Mobile app and OWA in a mobile web browser, the email shows empty (the card does not render at all).
We already contacted Microsoft support (Office 365, Flow and iOS in-app) and all of them were saying that this is outside their scope and keeps redirecting us back and forth from one support portal to another, with no resolution whatsoever.
<script type="application/adaptivecard+json">
{
"type": "AdaptiveCard",
"padding": "none",
"originator": "*******************************",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "PURCHASE ORDER APPROVAL",
"color": "Dark",
"wrap": true
}
],
"width": "stretch",
"style": "default",
"backgroundImage": null,
"bleed": false
},
{
"type": "Column",
"items": [
{
"type": "Image",
"horizontalAlignment": "Right",
"url": "https://.....",
"height": "70px",
"altText": "GTS Logo"
}
],
"width": "auto",
"style": "default",
"backgroundImage": "https://www.haceonline.org/wp-content/uploads/2017/08/light-gray-solid-color-background-300x150.jpg",
"bleed": false
}
],
"style": null,
"bleed": false
}
],
"backgroundImage": null,
"bleed": false
},
{
"type": "Container",
"padding": {
"top": "none",
"left": "default",
"bottom": "default",
"right": "default"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"spacing": "Large",
"separator": true,
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"text": "Requested by **Rawad Farhat**",
"wrap": true,
"spacing": "None"
},
{
"type": "TextBlock",
"spacing": "None",
"text": "[email protected]",
"isSubtle": true
}
],
"width": "stretch",
"style": null,
"backgroundImage": null,
"bleed": false
}
],
"style": null,
"bleed": false
},
{
"type": "TextBlock",
"spacing": "Medium",
"text": "**The following Purchase Order has been submitted for approval:**",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Requested Date:",
"value": "06 Aug 2019"
},
{
"title": "Purchase Order:",
"value": "19000001-OP-00210"
}
]
},
{
"type": "Container",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "ColumnSet",
"style": null,
"columns": [
{
"type": "Column",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "TextBlock",
"text": "**Item**",
"size": "Small",
"wrap": true
}
],
"bleed": false,
"width": "100px"
},
{
"type": "Column",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "TextBlock",
"text": "**Quantity - Description**",
"size": "Small",
"wrap": true
}
],
"bleed": false,
"width": "stretch"
}
],
"bleed": false
},
{
"type": "ColumnSet",
"style": null,
"columns": [
{
"type": "Column",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "ColumnSet",
"style": null,
"columns": [
{
"type": "Column",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "Input.Toggle",
"id": "itemLine01",
"spacing": "None",
"title": " ",
"value": "false",
"validation": null,
"wrap": true
}
],
"bleed": false,
"width": "auto"
},
{
"type": "Column",
"spacing": "None",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "TextBlock",
"spacing": "None",
"text": "Item",
"wrap": true
}
],
"bleed": false,
"width": "stretch"
}
],
"bleed": false
}
],
"bleed": false,
"width": "100px"
},
{
"type": "Column",
"style": null,
"backgroundImage": null,
"items": [
{
"type": "TextBlock",
"text": "Description",
"size": "Small",
"wrap": true
}
],
"bleed": false,
"width": "stretch"
}
],
"bleed": false
}
],
"bleed": false
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"title": "Approve",
"card": {
"type": "AdaptiveCard",
"style": "emphasis",
"body": [
{
"type": "Input.Text",
"id": "commentsApprove",
"placeholder": "Comments (Optional)",
"isMultiline": true,
"validation": null
}
],
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"method": "POST",
"url": "https://....",
"body": "{\"instanceID\": \"instanceID\", \"response\": \"Approve\", \"comments\": \"{{commentsApprove.value}}\" }",
"headers": [
{
"name": "Authorization",
"value": ""
},
{
"name": "Content-Type",
"value": "application/json"
}
]
}
],
"backgroundImage": null,
"bleed": false,
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "Reject",
"card": {
"type": "AdaptiveCard",
"style": "emphasis",
"body": [
{
"type": "Input.Text",
"id": "commentsReject",
"placeholder": "Comments (Optional)",
"isMultiline": true,
"validation": null
}
],
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"method": "POST",
"url": "https://....",
"body": "{\"instanceID\": \"instanceID\", \"response\": \"Reject\", \"comments\": \"{{commentsReject.value}}\" }",
"headers": [
{
"name": "Authorization",
"value": ""
} ,
{
"name": "Content-Type",
"value": "application/json"
}
]
}
],
"backgroundImage": null,
"bleed": false,
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
],
"style": null,
"backgroundImage": null,
"bleed": false
}
],
"style": null,
"backgroundImage": null,
"bleed": false
}
],
"version": "1.0",
"style": null,
"backgroundImage": "null",
"bleed": false,
"actions": null,
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"minHeight": "800px"
}
</script>
Here is the full adaptive card JSON file that is used in the "send email" action in MS Flow.
One last piece of information, while using amdesigner there is a button that sends the card to my email to test viewing it, when we use that button for the same exact adaptive card, it displays fine in outlook mobile.
Please help.
To the users coming back to this post now - the adaptive cards do not need to be white-listed anymore and should work as is without any intervention from Microsoft side. Adaptive cards are also supported in dark mode now, so that should not be a blocker anymore.