如何在 iOS 和 Android 的 Outlook Mobile 应用程序中启用显示从 Microsoft Flow 发送的自定义自适应卡片？
How to enable showing a custom adaptive card sent from Microsoft Flow in Outlook Mobile app for iOS and Android?
我们正在使用 amdesigner.azurewebsite 设计自定义自适应卡片，通过 Microsoft 流程发送给我们的组织成员以进行 PO 批准。卡片的 JSON 代码由设计者生成，发起者 ID 由 Actionable Message Developer Dashboard 生成并批准。
我们触发流程以发送包含可操作留言卡的电子邮件，它在 Microsoft Outlook 桌面和 OWA（从桌面 Web 浏览器访问 Web Outlook）中显示并完美运行。但是，当我们在移动网络浏览器中检查来自 Outlook iOS 和 Android 移动应用程序和 OWA 的同一封电子邮件时，电子邮件显示为空（卡片根本不呈现）。
我们已经联系了 Microsoft 支持（Office 365、Flow 和 iOS 应用程序内），他们都说这超出了他们的范围，并不断将我们从一个支持门户网站来回重定向到另一个, 没有任何分辨率。
<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": "rawad.farhat@gtslb.com",
"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>
这是在 MS Flow 中的 "send email" 操作中使用的完整自适应卡 JSON 文件。
最后一条信息，在使用 amdesigner 时有一个按钮可以将卡片发送到我的电子邮件以测试查看它，当我们将该按钮用于相同的完全自适应卡片时，它显示正常展望手机。
请帮忙。
对于所有通过此线程遇到相同问题的人，我们已经找到了解决方案，可以联系 onboardoam@microsoft.com 微软入职团队。
他们阻止所有未通过其白名单程序的自适应卡片，以确保卡片格式正确并在移动设备上正常显示。
另外，如果有人已经完成了这个过程，但仍然没有让他们的卡在移动 Outlook 中显示，可能是您在应用程序中启用了深色模式，自适应卡尚不支持（颜色方案还没有自动切换）。团队正在努力在不久的将来使其兼容。
对于现在返回此 post 的用户 - 自适应卡不再需要列入白名单并且应该可以正常工作而无需 Microsoft 方面的任何干预。
现在暗模式也支持自适应卡片，所以这应该不再是障碍。
我们正在使用 amdesigner.azurewebsite 设计自定义自适应卡片，通过 Microsoft 流程发送给我们的组织成员以进行 PO 批准。卡片的 JSON 代码由设计者生成，发起者 ID 由 Actionable Message Developer Dashboard 生成并批准。
我们触发流程以发送包含可操作留言卡的电子邮件，它在 Microsoft Outlook 桌面和 OWA（从桌面 Web 浏览器访问 Web Outlook）中显示并完美运行。但是，当我们在移动网络浏览器中检查来自 Outlook iOS 和 Android 移动应用程序和 OWA 的同一封电子邮件时，电子邮件显示为空（卡片根本不呈现）。
我们已经联系了 Microsoft 支持（Office 365、Flow 和 iOS 应用程序内），他们都说这超出了他们的范围，并不断将我们从一个支持门户网站来回重定向到另一个, 没有任何分辨率。
<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": "rawad.farhat@gtslb.com",
"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>
这是在 MS Flow 中的 "send email" 操作中使用的完整自适应卡 JSON 文件。
最后一条信息，在使用 amdesigner 时有一个按钮可以将卡片发送到我的电子邮件以测试查看它，当我们将该按钮用于相同的完全自适应卡片时，它显示正常展望手机。
请帮忙。
对于所有通过此线程遇到相同问题的人，我们已经找到了解决方案，可以联系 onboardoam@microsoft.com 微软入职团队。
他们阻止所有未通过其白名单程序的自适应卡片，以确保卡片格式正确并在移动设备上正常显示。
另外，如果有人已经完成了这个过程，但仍然没有让他们的卡在移动 Outlook 中显示，可能是您在应用程序中启用了深色模式，自适应卡尚不支持（颜色方案还没有自动切换）。团队正在努力在不久的将来使其兼容。
对于现在返回此 post 的用户 - 自适应卡不再需要列入白名单并且应该可以正常工作而无需 Microsoft 方面的任何干预。 现在暗模式也支持自适应卡片，所以这应该不再是障碍。