title: How to enable showing a custom adaptive card sent from Microsoft Flow in Outlook Mobile app for iOS and Android?
body: <p>we are using <a href="https://amdesigner.azurewebsites.net/" rel="nofollow noreferrer">amdesigner.azurewebsite</a>s 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.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <pre><code>&lt;script type="application/adaptivecard+json"&gt;
      {
          "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"
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is the full adaptive card JSON file that is used in the "send email" action in MS Flow.</p>
  
  <p>One last piece of information, while using <a href="https://amdesigner.azurewebsites.net/" rel="nofollow noreferrer">amdesigner</a> 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.</p>
  
  <p>Please help.</p>