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"
}
]
},
