Forward Adaptive Card

Copper Contributor

How can we forward adaptive cards in teams. Is there any easy way out?
One method which I found was using Graph API. Following the below link with Example 3 : Send a message containing cards :-
https://learn.microsoft.com/en-us/graph/api/chatmessage-post?view=graph-rest-1.0&tabs=javascript#exa...
But it has html content, how to add json content to it. Please can anyone help with this?

8 Replies
Hello @Janhvi - Thanks for raising your query.
If you are trying to send the message only in Teams channel, you can also use Incoming webhook via which you can directly send the Adaptive Card as Json:
Reference doc link: https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incomin...

Please let us know if you need any further help here.

Hi @Janhvi - Could you please let us know if you have any further queries?

@Prasad_Das-MSFT 
This webhook seems to be compatible only with channels. But our requirement is to forward adaptive card in a personal chat.

@Janhvi - As you have already mentioned using this API we can send adaptive card to personal chat/group chat or channel.

POST https://graph.microsoft.com/v1.0/chats/{chat-id}/messages

{
    "subject": null,
    "body": {
        "contentType": "html",
        "content": "<attachment id=\"74d20c7f34aa4a7fb74e2b30004247c5\"></attachment>"
    },
    "attachments": [
        {
            "id": "74d20c7f34aa4a7fb74e2b30004247c5",
            "contentType": "application/vnd.microsoft.card.thumbnail",
            "contentUrl": null,
            "content": "{\r\n  \"title\": \"This is an example of posting a card\",\r\n  \"subtitle\": \"<h3>This is the subtitle</h3>\",\r\n  \"text\": \"Here is some body text. <br>\\r\\nAnd a <a href=\\\"http://microsoft.com/\\\">hyperlink</a>. <br>\\r\\nAnd below that is some buttons:\",\r\n  \"buttons\": [\r\n    {\r\n      \"type\": \"messageBack\",\r\n      \"title\": \"Login to FakeBot\",\r\n      \"text\": \"login\",\r\n      \"displayText\": \"login\",\r\n      \"value\": \"login\"\r\n    }\r\n  ]\r\n}",
            "name": null,
            "thumbnailUrl": null
        }
    ]
}

Prasad_DasMSFT_0-1701178213310.png

In the above example the request body is already in JSON format. However, it seems like the "content" field in the "attachments" array is a stringified JSON.

As it has html content, you are interested in something easier. So, you can use Power Automate/Flow to send adaptive card in personal chat or channel following below document.

Create flows that post adaptive cards to Microsoft Teams - Power Automate | Microsoft Learn

 

 

 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

 

 

{
    "body": {
        "contentType": "html",
        "content": "<attachment id=\"74d20c7f34aa4a7fb74e2b30004247c5\"></attachment>"
    },
    "attachments": [
        {
            "id": "74d20c7f34aa4a7fb74e2b30004247c5",
            "contentType": "application/vnd.microsoft.card.adaptive",
            "contentUrl": null,
            "content": "{ \"type\": \"AdaptiveCard\", \"body\": [ { \"type\": \"Container\", \"items\": [ { \"type\": \"Image\", \"url\": \"data&colon;image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAYgMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAwQFBgcIAgH/xABEEAABAwMCAgUJBAcGBwAAAAABAgMEAAUREiEGMRMiQVFhBxQyQlJxgZGhIzOx8BVDYmOCwdEkJnKSotIXdIOTssLi/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECBAMF/8QAIhEAAgICAQUBAQEAAAAAAAAAAAECEQMhEhMiMUFRYXEE/9oADAMBAAIRAxEAPwDaQNIKUHKT6Su6jA06D6HtUDGMo9D1hRtpyfuewUAHrYC9gn0fGjJJ1qGFjknvoOBjpOXqAfn3UHIPXP2g5HsAoBpdLnDs8NydPfQy2nY6u09wHMnwqhueVBSn1CFaVGP7bzuFH4AbfM1Q+NeJXOIr6670ivM2VFEdGdgketjvPOkWX2WoeoKQ2oDYk4rPPI7qJrx4VVyNDn+VOOzFabi29apJyXW3V4CR3ggb5+lTHDXH1svikRZP9ik8kpWrKVnwVisKXNDs9IdUFdQpCknx7a8reMdzZ3IBzy2qVkd7IlijWjqU9bClbKHId9BJzrA6/s1SfJjxMq82zzSasqmRwOjUT6SOz3kGrtvnA+97TXfyZmqdAOqSUb6vS8KNgkpScoPNXdQMkno+Y9Px/O9G2Mp+69YUIDSn2vrRRlHYDiigDOrrAadPqY50Z/Wd/qUHJIKxhY9EUb6sj73uoA9Hc9bV2ezVb8odyctHCE95okurSGULHq6yE/gTVkG2dG5Ppju/O9Zx5Y79b2LAqzodC5L7iFlI30JSc5PxAFRJ0i0FckYm/J83aBAyrsHjV64N8m4vEVu48RSXSFjKI7Z0gDx/oKzzPSTmypGtCPtFJzzAGavCQ/FmNCZbI7OyXHmojykuITzytKcA+I3rJNSS7TbGm+40NjgfheHHU2m1MOA81OjUR7j2VQONeFrOlp56xJS3JaBUW23dWR7s7VL8cXGNOYitRyzMkEnSlt3OnI31YPL31WLa7LjGNIS1DeiLWpsebHBCgMlOCBvjOOzY1zwxk+5svklGPaK+Sq7OMcRwE68JdWEZ8Dtj54rovHqZx+3XL/AKmkcSw0qUEoRObIz7BWCK6gOMYP3Xf41vR58g9LYHTp/1UZyNeMafU76DvjpNgPRx2/nagkk5Vs56oqSoav3dfaMr7QM0UB8OxCVnKz6J7qBnOn9Z2qo2SNIOpJ5q7qMbaPV9ugIniadcYFrck2eIJLzZ+0bJwdO+49xrmW9vzHp7si4Id6Z1ZWQtGkE5511Pc4xnwJEXX0RW2UJXnt765b4+hPwOJJcF2Y5Jcax0ji1E5PPAzvtyqkkdISoT4NLb/EGqU2XIyQelAGeqdj7617+7kYrnpmomTnW+jbbbKVPvbbJwNz79vHtrNfJ5BMqJPbZU0iWHEFrpTgLwDlGezIJq/WqU9AfKVQ0w5KRktraALnhq/mM1hzyqWj0MEOUFYxY4XYsSrVO6JReQ2TPDGVnf1gn1gDsQOyl3F2bU0i1LEpwr+ybTshBPMnAAHiTvzx3U2enNxppkQogjPKSUnrOYRnngKGPlTQruFxdzb2VHPVM1xISlA7VZ7T3AdtISdptl8kErpGbNuuwbs/oVqU26UnTtqAOM/TNdA+THjdV9YRAnpccfbbJDpT6QHtePj21hfGsVEHiV1tnKfs0E591a75AltvQLg9rC5LZQhTZTuAc4Ofp8K3o8t/DWThIBXuD6PhQcghKt1nkqj0d09bVzHdRgJBQDlJ5q7qsUPulfar60UaE+19aKAY3GSWmy1GOlS0nrd1LQnhKgsPkYbdbSvHcSM4pneiAlp0DSMlJ/GvPDjubcpKjqDLy0ae4Z1J+hFCfRKn95y9TH591ZP5TPJ8Jr792TcGo4wt37VHI+koFWeWyiPiO0Vq+ydz1tXIezWV+XJFxdZgRkvFFvGVOn23DskH89tRLwTDyYmESWFrVEdyUrIBTnC8duO6tP4AvVw4gbkWy6tJcajNay6rOpB5DB79jVNsVnkOTdDyiln0vFWK0nzVHCnCM6WrPnMgFRON8YwBt+dzWTPTjXs2YHLna8EBwup28cSPRLhJ85YihZbQvADpBwM0hxjebilTjPShotkpCUo2QAewfWq1w3c3Lddok8K6iXPtVfsnY/jn4Vf+OuHzLksXaKpXQupDclA5Z9VXx3B9yanFGEctSXrQyzlLHcX/TMY/D9yvkhbjD/AJ3IO5DhwpXgCdvwrdPIrZ4Vt4ZW/Ed6SdIcxJB2LSk7aCOzG9V3hy3sR28spAKCM1f+GbGi33S4TIpcQ1OIeWFYx0h9Ip8D49ua16e0YvGmWTf9Xz9f8/OjbHV+69b8/KvOoK1BJ0lHpeNIxJseap7zVYUGFhDiUnPWKQrHvwRtQgcdTsziikvO4/tJ+dFAMOJs/od51eymtKwPDOD9Car/AArODkqY1rI1BDgx37g/gmmlz44VJt8lh6wzPtWlI1dK3tkEZ51ULDfl2t8y1Nqew0UqbSdzuP6VSUk0dIxaNmi5TnTuFcyapHEEpF4hu2S5tjpokv7YEj7RvHUcHLYg/MGkGfKK60ApVimaM4JKkik+M5barzb5rLQbdXCHSJzkKSo5AV34/nVJOoWXhFOVMhbfbWInF1utcNahCcirlutg6g4pJASc88DJ5V48qN0SGW4qVbHs/PvrzaAmFKjSGiSuHAMNrV7GpPPxqrcZPOS7+hK/uwkaCDkGuMYOeRS9HZy6eNr2MbJa0PS2IzoPRujpCnvO/wDStcsDiX7YYckBYQC2tPems9iqRHvNuIOBox+NW62zA3cwkHqup7O8VGdNq15Q/wA7SdPwxWw2t+2OT40lfSkulxtz22yeqflsfEGr+2289b2HIrobdbGU6vRX+yrwPeNx9DXHJUdCQJC8EciBkgHmD4VY7E8lUTTq1t8wR2iteFuULZlzJKVJkBxbPZft7aSsxnJjyLfMaWrCktHKnCcdqWwtQVywSe6mXBDyrxZ30xVLbNwmyJcp5B0lDS3CENpPMKUhI5bpTvsSnNS8qNkcmeUJXm6HCp+2tvHo05OAtST2jsCaluD709wtaBBTZpb69RUp4pAJPuzVtfSm2jVkDQhKEp0pSMBI5AUVRv8AiC/22WZ8qKa+oU/hnc927wmx5xLkYPtIbUKZWl5and1YWVY1YGxO2frT68W2I0+2243Jihwnr6C60n3ns+ZqJTGft7p6VTOhR+zU2RhXbnFZIzjONxNkouLplodmtOR20rk3R4rOyQylAPx0ivl4W83clxpBV0kQJYwpZUQEgDn9fjUvbeI7QGksqsyrm8yBrJdCynIB3R2D4VEcW3A3W6pmQLFPYUtADw6MkKUNgfDbb4V1nFcNHLG+/Ygl3SDg8xj8P6VQpEomcpxas4Vtv2VbkLm4wbVP32yY52pizwC5LV0iprzYPMKjKSR88VOCknYz7aohVXYmdGVj0MdtTUK6ynpjfQ532Ok7keFSLXk6jdIg+eTHVj1W2071JxuD4tukNur/AEgkpOQF9GnPzrpHhezi+VaHEKSp9rqDGDupzsPu/rU9Y7yqIt4Py+jaDJSHDjqKwSDvt4fCqzdIlyXd5MqAlkR3iFBDr6ElJwAe3tO/xpWBBipacdv7qVkEDomVhYH+Ig5+FRyUb2W4uVaLGt1m5pGbszJGcjKWVfyr5+j14+xmDb2Rj/xIqrS4vBL68tXBiEvuc1IBP8WPxr03w8w8nNuvsZwYwND5P/sayU/pp0fXZF2Q6tPn52UR6J/3UU3PBM0knz5G/wC9NFTf6OJLOy+FYGETkyW+4urS4fmlRNNJKeA7qlLa5SgEnIJ6VKgfA4qtNzUI2YtjSfEuBP8AKkVXa8W49I1FT0AOdCorUhGPiFEfDFTGCIa4rQ8vHDdrhSDMsdyUtk4Cx5y4HMduSMbfGp2Bwem4JBjKuTgIznppAT8yoCoa3eV64QToNut2lJ/VQtBHyWPwq3cNeWGFdJqYc6Kph1Y6i050kgZxg8vnVpRl9KKS+EvbPJ3ZVxh59CuCXk7K13F0pV4jC/oakhwHw10ZbVbDpI5mU8T89dJu8bwkDq7mo2X5RYjGclpH+JQH41XkxwLVYrLCsEEQ7UhTbWoqUVqK1qJPao7nu91SC8OIKHUpWg80qGQfgazZ7j6ZIGIkd0hQwFoaVgfHGKbWu98ZRQtbym5rSk7B7co/aCkjPwOfhU8mtjgTPEUvgm13Uw51ijLmJbS6S3ETgBWcb9+x7KrF2uFjeQv9GR1MJPWLbYUkqV2ZPd3jtpS4RrrOlql/2YurSlKlBzXqCc4B1IPeaamBdB6cWEv+HB/lXKWTl5NWPHGCIYrU76RQM9hQgUxlWePKJUpEcudiklCSPkasiocsenaEK8UPBP402kNIjtLdkWuUhCRlSkOIVgfOkWl4LNL2VNVkeBIDzuP+Z/8AqirILlZ8fdS/8if60V1uRyrH8NIk+Su0lpWZszOOalIAHyTWe37hCJZ33VRb+wptA6x6UtnVzCQrJyfh3e6ugyAoYIBB7DTM2m3GWuYYMYyV41PdEnWrHLJxk1ocV6Mam/Zz+xYp8hpCn2fO0FIUfOWg06jKQoZJAzsochSlj4OXdfOH4MOS2Iz3RF1ooXpOkEjGNQOCOw860/jDyfu8QXDzqFdGLYFICXdFvS444RyJWVDbG2MUnE4E4gix0R2+OprTKBpSiPBaaSkeAFU4F+ovSK1C4VtsUarnaZkpY7H57idX8C0oFP4lxgW9ZasvA8wKBxqajJKT/G0F/M1Mq4Cu7n33HnEH/TWlH4Cp3hvh1+yNlD1+utzBJP8AbngsjPjjP1p0v0jqfhUZV84xLS1x+FvNGUJKi8+8gAfNWf8ATVWncZPRlLXxBNjbgaY6CtRHjoCsH/LW6FIUMEAjuNM3rTbn89NBjLzz1NA0eJBZGjKwhi/W2PcrCm2Okj7uUwNKgOaQoYUg16/Q0S5LHSG7WKZtrSy8pTJP7JwpGPgD4VoqOFbI0VmNb2oxWcq82y1qPeQnAJrw5wvAWnSXJISeaQ5jPxxn61TpMssqooh4Wfjg/wB6JhA7FtNq/BNMZ9sX0K2n77raWkpVqjtJyPepYx8q0hHB1iQcqhFzvDr7iwfgVYpdjhiwR162bJbUL9sRUavnjNOj7J62qMOPD9oyf7yIHh00f/fRXQAgxAMCKx/2xRV+m/pTqfg4ooorqcgooooAooooAooooAooooAooooAooooD//Z\", \"size\": \"medium\", \"height\": \"auto\" }, { \"type\": \"TextBlock\", \"text\": \"Welcome to Adaptive Cards!\", \"size\": \"large\", \"weight\": \"bolder\" }, { \"type\": \"TextBlock\", \"text\": \"Click the button below for more information.\", \"wrap\": true } ] }, { \"type\": \"ActionSet\", \"actions\": [ { \"type\": \"Action.OpenUrl\", \"title\": \"Learn More\", \"url\": \"https://adaptivecards.io\" } ] } ], \"speak\": \"Welcome to Adaptive Cards! Click the button below for more information.\", \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"version\": \"1.2\"}",
            "name": null,
            "thumbnailUrl": null
        }
    ]
}

POST /chats/{chat-id}/messages

@Prasad_Das-MSFT 

ray2408_0-1701199491655.png

ON using the above API we are able to forward this type of adaptive card to a particular user.
But the content is not exactly the same format we use for adaptive card. Can you please tell how to create this format out of normal adaptive cards json data?



@ray2408 - There is no tool available for this type of conversion. We have to manually do that.
For example, if this is your adaptive card JSON:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "speak": "Welcome to Adaptive Cards! Click the button below for more information.",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Welcome to Adaptive Cards!",
                    "size": "large",
                    "weight": "bolder"
                },
                {
                    "type": "TextBlock",
                    "text": "Click the button below for more information.",
                    "wrap": true
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.OpenUrl",
                    "title": "Learn More",
                    "url": "https://adaptivecards.io"
                }
            ]
        }
    ]
}

the converted format would be as below:

{\"type\": \"AdaptiveCard\", \"body\": [ { \"type\": \"Container\", \"items\": [ { \"type\": \"TextBlock\", \"text\": \"Welcome to Adaptive Cards!\", \"size\": \"large\", \"weight\": \"bolder\" }, { \"type\": \"TextBlock\", \"text\": \"Click the button below for more information.\", \"wrap\": true } ] }, { \"type\": \"ActionSet\", \"actions\": [ { \"type\": \"Action.OpenUrl\", \"title\": \"Learn More\", \"url\": \"
https://adaptivecards.io\"
} ] } ], \"speak\": \"Welcome to Adaptive Cards! Click the button below for more information.\", \"$schema\": \"
http://adaptivecards.io/schemas/adaptive-card.json\"
, \"version\": \"1.2\"}

 

@Prasad_Das-MSFT
Can you tell us a better way of forwarding an adaptive card from one chat to another?

@ray2408 - There isn't any way to forward an adaptive card from one chat to another.
However, you can send adaptive card in chat or channel using bot.
Adaptive Cards for Bot Developers - Adaptive Cards | Microsoft Learn
Sample ref: Microsoft-Teams-Samples/samples/bot-adaptive-card-actions at main · OfficeDev/Microsoft-Teams-Sample...
as well as via Power Automate as mentioned in earlier conversations.
Create flows that post adaptive cards to Microsoft Teams - Power Automate | Microsoft Learn