Search code examples
microsoft-teamsadaptive-cards

How to right-align Icon for an adaptive card's action?


I'm trying to work out how to align icon to the right in my Action.OprnUrl's text preview

In https://www.adaptivecards.io/designer/ with card layout:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Publish Adaptive Card Schema"
        },
        {
            "type": "TextBlock",
            "text": "Description",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View",
            "url": "https://adaptivecards.io",
            "iconUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAEoSURBVDhPpZNNioNAEIWfOgjB6DLXMKusgu4jrsQcILgxp4pIwHiAuPPnGi68gRtFyK4nrTVJZsaYCfNBQ7/q7lfw6BLYFfyD3iCOYyRJAkEQqPya+XwO13UHg/P5jKIo6OhvnE4nbLfbwYBqb+H7PhRFgUj6bS6XC0RRxAdpTOWgaRpkWYZlWTBNk6oDNwMeymKxIHVHVVWEYYiyLPv9U4PNZtOvn/CAj8cjVqsVxuKazOBwOMC2bURRhPV6jbZt6eTOU4MgCOB5HrIsg67rqOt6NJ9RA955t9shTVMYhtHXnn2yXwaPnb8eT/HNYKzzK24G/PFUZx5g13WkHqBZYJIkses8cDkKv5PnOSnGHMdh+/2e9bNQVRWapsFyuSTb1/BfO5vN8AmAXKcYkYfiaAAAAABJRU5ErkJggg=="
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

sample data:

{
    "title": "Publish Adaptive Card Schema",
    "description": "Description",
    "viewUrl": "https://adaptivecards.io"
}

According to MS Teams Store guidelines, it is possible MicrosoftExample


Solution

  • We got an update from engineering team that if we use "iconUrl" property, we do not have any way to align the icon to the right side.

    As an alternative solution, I have tested the way suggested by Hilton and it is working fine for me with below JSON:

     {
        "type": "AdaptiveCard",
        "body": [
            {
                "type": "TextBlock",
                "size": "Medium",
                "weight": "Bolder",
                "text": "Publish Adaptive Card Schema"
            },
            {
                "type": "TextBlock",
                "text": "Description",
                "wrap": true
            }
        ],
        "actions": [
            {
                "type": "Action.OpenUrl",
                "title": "View 🡵",
                "url": "https://adaptivecards.io",
            }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.4"
    }
    

    enter image description here