cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Responsive Resident
Responsive Resident

How to send adaptive card in Outlook email

Hi All

 

I'm trying to create a flow and send an email to outlook with some values, but the result i see is no preview in my email.. its just the blank email. 

Tapesh_0-1601467105375.png

 

 

and here the preview of the flow after a successful run 

 

Tapesh_1-1601467209721.png

 

 

Can anyone please let me know what is the missing part? 

 

Please see that I have referred to this blog post: https://www.bythedevs.com/post/multi-line-approvals-with-adaptive-cards-outlook-and-power-automate 

 

Thanks in advance experts. 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Responsive Resident
Responsive Resident

Re: How to send adaptive card in Outlook email

hi @CFernandes 

 

I you need the solution try this one it will  work now as this worked for me. Thanks Please accept and give kudos if you find it useful thanks 

<script type="application/adaptivecard+json">
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until 10:10 AM.</s>",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "size": "Small",
                            "url": "add user image here ",
                            "id": "userImage_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Petty Cash Application Status",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "id": "titlestatus_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "size": "Large",
                            "color": "Good",
                            "id": "status_id"
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Employee Name ",
                                            "id": "empname_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Tapesh patel",
                                            "id": "empvalue_id",
                                            "color": "Dark"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Application ID ",
                                            "id": "Application_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "1",
                                            "id": "appvlaue_id"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Unit Name",
                                            "color": "Dark",
                                            "weight": "Bolder",
                                            "id": "Unitname_id"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Kare",
                                            "id": "unitvalue_id"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Description",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "Descdetails_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Description 1",
                            "spacing": "Small",
                            "id": "description1_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Amount",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "amount_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Aamount 1",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "id": "amount1_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved By ",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "approver_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approver name ",
                            "spacing": "Small",
                            "id": "approvername_id",
                            "color": "Warning"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved on",
                            "isSubtle": true,
                            "horizontalAlignment": "Center",
                            "weight": "Bolder",
                            "id": "approvedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approved time",
                            "color": "Warning",
                            "weight": "Bolder",
                            "horizontalAlignment": "Center",
                            "spacing": "Small",
                            "id": "approvedtime_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Submitted On ",
                            "isSubtle": true,
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "id": "Submittedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Submit Time",
                            "color": "Warning",
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "spacing": "Small",
                            "id": "submittime_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Send",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Accent"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/fluent/2x/send-mass-email.png",
                            "size": "Medium"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Verified",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Warning",
                            "horizontalAlignment": "Center"
                        },
                        {
                            "type": "Image",
                            "size": "Medium",
                            "url": "https://img.icons8.com/dusk/2x/unverified-account.png",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "weight": "Bolder",
                            "size": "Medium",
                            "color": "Good",
                            "horizontalAlignment": "Right"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/flat_round/2x/checkmark.png",
                            "size": "Medium",
                            "horizontalAlignment": "Right"
                        }
                    ]
                }
            ],
            "horizontalAlignment": "Center",
            "style": "emphasis"
        }
    ]
}

</script>

View solution in original post

4 REPLIES 4
Highlighted
Resident Rockstar
Resident Rockstar

Re: How to send adaptive card in Outlook email

@Tapesh 

 

Hey Mate,

 

The adaptive card should wrap by <script> tag, and it should be input in the HTML format, for example, see screenshot below:

 

Untitled.png

 

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

 

 

 

Highlighted
Responsive Resident
Responsive Resident

Re: How to send adaptive card in Outlook email

Hi @CFernandes 

 

Please that i already have the created the HTML formate with script tag 

 

 

Please let me know if you can help me out. The below code is given as INPUT in compose action. and then the out put is just added as dynamic content in the email body. 

Thanks 

 

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">


{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until 10:10 AM.</s>",
"hideOriginalBody": true,
  "originator": "8202aab9-78554-aa5892a-7852",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "size": "Small",
                            "url": "add user image here ",
                            "id": "userImage_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Petty Cash Application Status",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "id": "titlestatus_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "size": "Large",
                            "color": "Good",
                            "id": "status_id"
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Employee Name ",
                                            "id": "empname_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Tapesh patel",
                                            "id": "empvalue_id",
                                            "color": "Dark"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Application ID ",
                                            "id": "Application_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "1",
                                            "id": "appvlaue_id"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Unit Name",
                                            "color": "Dark",
                                            "weight": "Bolder",
                                            "id": "Unitname_id"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Kare",
                                            "id": "unitvalue_id"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Description",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "Descdetails_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Description 1",
                            "spacing": "Small",
                            "id": "description1_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Amount",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "amount_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Aamount 1",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "id": "amount1_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved By ",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "approver_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approver name ",
                            "spacing": "Small",
                            "id": "approvername_id",
                            "color": "Warning"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved on",
                            "isSubtle": true,
                            "horizontalAlignment": "Center",
                            "weight": "Bolder",
                            "id": "approvedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approved time",
                            "color": "Warning",
                            "weight": "Bolder",
                            "horizontalAlignment": "Center",
                            "spacing": "Small",
                            "id": "approvedtime_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Submitted On ",
                            "isSubtle": true,
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "id": "Submittedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Submit Time",
                            "color": "Warning",
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "spacing": "Small",
                            "id": "submittime_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Send",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Accent"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/fluent/2x/send-mass-email.png",
                            "size": "Medium"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Verified",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Warning",
                            "horizontalAlignment": "Center"
                        },
                        {
                            "type": "Image",
                            "size": "Medium",
                            "url": "https://img.icons8.com/dusk/2x/unverified-account.png",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "weight": "Bolder",
                            "size": "Medium",
                            "color": "Good",
                            "horizontalAlignment": "Right"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/flat_round/2x/checkmark.png",
                            "size": "Medium",
                            "horizontalAlignment": "Right"
                        }
                    ]
                }
            ],
            "horizontalAlignment": "Center",
            "style": "emphasis"
        }
    ]
}

</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>

 

Highlighted
Resident Rockstar
Resident Rockstar

Re: How to send adaptive card in Outlook email

@Tapesh You are right mate...

 

I gave it a try and its not working. You might want to check the blog  https://poszytek.eu/en/microsoft-en/office-365-en/powerautomate-en/adaptive-cards-in-outlook-ultimat...  and try the debugging mentioned (I have not tried) or just ask Microsoft support if they have changed anything. 

Highlighted
Responsive Resident
Responsive Resident

Re: How to send adaptive card in Outlook email

hi @CFernandes 

 

I you need the solution try this one it will  work now as this worked for me. Thanks Please accept and give kudos if you find it useful thanks 

<script type="application/adaptivecard+json">
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "<s>Flight KL0605 to San Fransisco has been delayed.</s><s>It will not leave until 10:10 AM.</s>",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "size": "Small",
                            "url": "add user image here ",
                            "id": "userImage_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Petty Cash Application Status",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "id": "titlestatus_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "size": "Large",
                            "color": "Good",
                            "id": "status_id"
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Employee Name ",
                                            "id": "empname_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Tapesh patel",
                                            "id": "empvalue_id",
                                            "color": "Dark"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Application ID ",
                                            "id": "Application_id",
                                            "color": "Dark",
                                            "weight": "Bolder"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "1",
                                            "id": "appvlaue_id"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Unit Name",
                                            "color": "Dark",
                                            "weight": "Bolder",
                                            "id": "Unitname_id"
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "Kare",
                                            "id": "unitvalue_id"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Description",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "Descdetails_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Description 1",
                            "spacing": "Small",
                            "id": "description1_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Amount",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "amount_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Aamount 1",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "id": "amount1_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved By ",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "id": "approver_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approver name ",
                            "spacing": "Small",
                            "id": "approvername_id",
                            "color": "Warning"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved on",
                            "isSubtle": true,
                            "horizontalAlignment": "Center",
                            "weight": "Bolder",
                            "id": "approvedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "approved time",
                            "color": "Warning",
                            "weight": "Bolder",
                            "horizontalAlignment": "Center",
                            "spacing": "Small",
                            "id": "approvedtime_id"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Submitted On ",
                            "isSubtle": true,
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "id": "Submittedon_id"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Submit Time",
                            "color": "Warning",
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "spacing": "Small",
                            "id": "submittime_id"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Send",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Accent"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/fluent/2x/send-mass-email.png",
                            "size": "Medium"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Verified",
                            "size": "Medium",
                            "weight": "Bolder",
                            "color": "Warning",
                            "horizontalAlignment": "Center"
                        },
                        {
                            "type": "Image",
                            "size": "Medium",
                            "url": "https://img.icons8.com/dusk/2x/unverified-account.png",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Approved",
                            "weight": "Bolder",
                            "size": "Medium",
                            "color": "Good",
                            "horizontalAlignment": "Right"
                        },
                        {
                            "type": "Image",
                            "url": "https://img.icons8.com/flat_round/2x/checkmark.png",
                            "size": "Medium",
                            "horizontalAlignment": "Right"
                        }
                    ]
                }
            ],
            "horizontalAlignment": "Center",
            "style": "emphasis"
        }
    ]
}

</script>

View solution in original post

Helpful resources

Announcements
Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

Upcoming Events

Experience what’s next for Power Automate

See the latest Power Automate innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Top Solution Authors
Users online (7,839)