web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / create an adaptive car...
Power Automate
Answered

create an adaptive card to an Outlook e-mail

(0) ShareShare
ReportReport
Posted on by 58

1.PNGHello all, 

I'm building a flow when after all, if something goes wrong I set a "run after" that send an email to the administrator to inform him that the flow failed,

 

I create an adaptive card using this website https://adaptivecards.io/designer/

I pasted the JSON code in the Body texc, when I ran the flow, the e-mail doesn't appear like the adaptive card designer,

 

why? where's the error?

 

thanks to all who help me

 

 
Categories:
I have the same question (0)
  • fchopo Profile Picture
    8,003 Moderator on at

    Hello @Alice_italy 

    Try to include a <script> tag with the adapative card json code inside it. Have a look at this document: https://docs.microsoft.com/en-us/outlook/actionable-messages/send-via-email

    Your code should look like this:

     

     

    <script type="application/adaptivecard+json">{
     "type": "AdaptiveCard",
     "version": "1.0",
     "hideOriginalBody": true,
     "body": [
     {
     "type": "TextBlock",
     "text": "Visit the Outlook Dev Portal",
     "size": "large"
     },
     {
     "type": "TextBlock",
     "text": "Click **Learn More** to learn more about Actionable Messages!"
     },
     {
     "type": "Input.Text",
     "id": "feedbackText",
     "placeholder": "Let us know what you think about Actionable Messages"
     }
     ],
     "actions": [
     {
     "type": "Action.Http",
     "title": "Send Feedback",
     "method": "POST",
     "url": "https://...",
     "body": "{{feedbackText.value}}"
     },
     {
     "type": "Action.OpenUrl",
     "title": "Learn More",
     "url": "https://docs.microsoft.com/outlook/actionable-messages"
     }
     ]
    }
    </script>

    Hope it helps!

    Ferran

  • Verified answer
    v-litu-msft Profile Picture
    Microsoft Employee on at

    Hi @Alice_italy,

     

    Just like @fchopo said, the adaptive card should wrap by <script> tag, and it should be input in the HTML format, for example, the following is an adaptive card could send directly in Outlook, the green part in the middle is adaptive card code:

    <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.2",
     "speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
     "body": [
     {
     "type": "Container",
     "items": [
     {
     "type": "ColumnSet",
     "columns": [
     {
     "type": "Column",
     "width": "auto",
     "items": [
     {
     "type": "Image",
     "url": "https://adaptivecards.io/content/cats/3.png",
     "size": "Medium"
     },
     {
     "type": "TextBlock",
     "text": "SHADES",
     "horizontalAlignment": "Center",
     "weight": "Bolder"
     }
     ]
     },
     {
     "type": "Column",
     "width": "stretch",
     "separator": true,
     "spacing": "Medium",
     "items": [
     {
     "type": "TextBlock",
     "text": "{{DATE(${string(start_date)}, SHORT)}}",
     "horizontalAlignment": "Center"
     },
     {
     "type": "TextBlock",
     "text": "Final",
     "spacing": "None",
     "horizontalAlignment": "Center"
     },
     {
     "type": "TextBlock",
     "text": "${home_points} - ${away_points}",
     "size": "ExtraLarge",
     "horizontalAlignment": "Center"
     }
     ]
     },
     {
     "type": "Column",
     "width": "auto",
     "separator": true,
     "spacing": "Medium",
     "items": [
     {
     "type": "Image",
     "url": "https://adaptivecards.io/content/cats/2.png",
     "size": "Medium",
     "horizontalAlignment": "Center"
     },
     {
     "type": "TextBlock",
     "text": "SKINS",
     "horizontalAlignment": "Center",
     "weight": "Bolder"
     }
     ]
     }
     ]
     }
     ]
     }
     ]
    }
     </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>

     

    If it not appear, please check your Outlook version or check the email in the Outlook online:

    https://docs.microsoft.com/en-us/outlook/actionable-messages/#outlook-version-requirements-for-actionable-messages

     

    Best Regards,
    Community Support Team _ Lin Tu
    If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Automate

#1
Vish WR Profile Picture

Vish WR 976

#2
Valantis Profile Picture

Valantis 863

#3
Haque Profile Picture

Haque 547

Last 30 days Overall leaderboard