Power Automate Sending Adaptive Cards - Image Issues

[Wessso]

Hi all,

I'm having an issue with images in adaptive cards, these adaptive cards are sent using Power Automate to a user in Microsoft Teams and it waits for the user's response. 

The sending of the card is all good, everything is fine except images. 

The images in my cards are profile pictures of employees in our organisation and I get these images from SharePoint using: 

http://[organisation].sharepoint.com/_layouts/15/userphoto.aspx?size=S&username=[UPN]

This is all good if I put that URL in the browser, I get the employee's profile picture. 

I added this to an image 'element' in an Adaptive Card where the URL of the image is the URL above. 

The thing is, the image shows if I were to view the Adaptive Card using the browser to access MS Teams.

However if I were to use the Desktop (or Mobile) version of MS Teams, the images do not show.

I suspect this is related to authentication but is there anything I can do to fix this?

When I was testing this Flow, the images were showing on my Desktop (and Mobile) version of MS Teams, so I feel on the Desktop and Mobile version it's hit and miss... 

Any help or insight would be appreciated. Thank you.

Here is the screen shot for reference:

Accessing MS Teams via Desktop app (same with Mobile app)

Accessing MS Teams via Browser

PS: For those interested in my adaptive card, here it is (Note: Anything with @ is Power Automate's reference, and not Adaptive Card templating notation):

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "@{variables('MeetingTitle')}",
            "weight": "Bolder",
            "size": "Large",
            "wrap": true,
            "color": "Good"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Date: ",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{formatDateTime(variables('MeetingStart'),'dd-MMM-yyyy')}",
                            "wrap": true
                        }
                    ]
                }
            ],
            "spacing": "None"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Start Time: ",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{formatDateTime(variables('MeetingStart'),'t')}",
                            "wrap": true
                        }
                    ]
                }
            ],
            "spacing": "None"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Duration: ",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{variables('MeetingDuration')} min",
                            "wrap": true
                        }
                    ]
                }
            ],
            "spacing": "None"
        },
 {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Location: ",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{variables('MeetingLocation')}",
                            "wrap": true
                        }
                    ]
                }
            ],
            "spacing": "None"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Involvement: ",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{variables('MeetingResponse')}",
                            "wrap": true
                        }
                    ]
                }
            ],
            "spacing": "None"
        },

{
            "type": "TextBlock",
            "text": "Attendees",
            "wrap": true,
            "horizontalAlignment": "Center",
            "weight": "Bolder"
        },
        {
            "type": "ColumnSet",
            "columns": [@substring(variables('AdaptiveUserPhoto'),0,sub(length(variables('AdaptiveUserPhoto')),1))}]
        },
        {
            "type": "ColumnSet",
            "columns":[@{substring(variables('AdaptiveUserInfo'),0,sub(length(variables('AdaptiveUserInfo')),1))}]
        },

        {
            "type": "TextBlock",
            "text": "Meeting Notes",
            "wrap": true,
            "horizontalAlignment": "Center",
            "weight": "Bolder",
            "separator": true
        },
        {
            "type": "Input.Text",
            "placeholder": "Type your notes here...",
            "isMultiline": true,
            "separator": true,
            "id": "userNotes"
        },
{
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Add Additional Info",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "TextBlock",
                                "text": "Meeting Topic",
                                "wrap": true,
                                "size": "Small",
                                "isSubtle": true,
                                "spacing": "None"
                            },
                            {
                                "type": "Input.Text",
                                "placeholder": "Add meeting topic here...",
                                "isMultiline": false,
                                "separator": true,
                                "id": "meetingTopic"
                            },
                            {
                                "type": "TextBlock",
                                "text": "Actions",
                                "wrap": true,
                                "size": "Small",
                                "isSubtle": true,
                                "spacing": "Medium"
                            },
                            {
                                "type": "ColumnSet",
                                "columns": [
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "TextBlock",
                                                "text": "Task",
                                                "wrap": true,
                                                "horizontalAlignment": "Center",
                                                "isSubtle": true,
                                                "color": "Good"
                                            }
                                        ],
                                        "horizontalAlignment": "Center"
                                    },
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "TextBlock",
                                                "text": "Due Date",
                                                "wrap": true,
                                                "horizontalAlignment": "Center",
                                                "isSubtle": true,
                                                "color": "Attention"
                                            }
                                        ]
                                    }
                                ],
                                "separator": true
                            },
                            {
                                "type": "ColumnSet",
                                "columns": [
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Text",
                                                "placeholder": "Enter Task",
                                                "id": "task1"
                                            }
                                        ]
                                    },
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Date",
                                                "value": "@{convertFromUtc(utcNow(),'W. Australia Standard Time','yyyy-MM-dd')}",
                                                "id": "due1"
                                            }
                                        ]
                                    }
                                ],
                                "spacing": "small"
                            },
                            {
                                "type": "ColumnSet",
                                "columns": [
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Text",
                                                "placeholder": "Enter Task",
                                                "id": "task2"
                                            }
                                        ]
                                    },
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Date",
                                                "value": "@{convertFromUtc(utcNow(),'W. Australia Standard Time','yyyy-MM-dd')}",
                                                "id": "due2"
                                            }
                                        ]
                                    }
                                ],
                                "spacing": "small"
                            },
                            {
                                "type": "ColumnSet",
                                "columns": [
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Text",
                                                "placeholder": "Enter Task",
                                                "id": "task3"
                                            }
                                        ]
                                    },
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "Input.Date",
                                                "value": "@{convertFromUtc(utcNow(),'W. Australia Standard Time','yyyy-MM-dd')}",
                                                "id": "due3"
                                            }
                                        ]
                                    }
                                ],
                                "spacing": "small"
                            }
                        ]
                    }
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "style": "positive"
        }
    ]
}

The Attendees part is setup with an array (so it can grow/shrink dynamically).

@substring(variables('AdaptiveUserPhoto'),0,sub(length(variables('AdaptiveUserPhoto')),1))}

{
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "Image",
                            "url": "@{variables('UserPhoto')}",
                            "size": "Small",
                            "style": "Person",
                            "horizontalAlignment": "Center"
                        }
                    ]
                },

@substring(variables('AdaptiveUserInfo'),0,sub(length(variables('AdaptiveUserInfo')),1))}

{
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "@{variables('UserInfo')}",
                            "wrap": true,
                            "horizontalAlignment": "Center",
                            "size": "Small",
                            "isSubtle": true,
                            "weight": "Lighter"
                        }
                    ]
                },

[roblom]

Hi, I had the same problem.

Solution: download the binaries for the sharepoint-image by using "Send HTTP request to SharePoint" + compose a base64 encoded value of body + use this in the adaptive card Url.

.....

P.S. In Teams the SP-image-url will actually work if you have a tab showing SP-content and the user visits this tab first (signing in, creating a session in Teams).

/Robert

[Wessso]

This is what I did initially but this would only work for a small number of photos as there’s a size limit to adaptive cards.

In my tests I could only have about 5 photos max, any more and the adaptive card post action will fail with the error of reaching adaptive card size limit. This is why I was wanting to link to the image instead of embedding it. But linking the image is giving me these issues described in my post. 

Thank you for responding! 🙂 Haven’t had anyone else responding. 

[roblom]

Ah, yeah, you have the need for several photos and even you get the small thumbnail the message will eventually get too big as you say. hmm...

If you create a public http endpoint e.g. on an Azure web app you could download the images and store them there before you link to them. Luckily for me I only needed 1 image 😃

[cn]

Having the same issue, is there no action that creates the good SSO/Login to fix this?