microsoft / microsoft/AdaptiveCards
[Feature Request] Allow card authors to specify if an image can be be expanded (previewed)
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
Problem Statement
Images in Adaptive Cards are sometimes for presentation only (icons, small profile pictures) and sometimes are thumbnail of larger images. The below card illustrates this:
{
"type": "AdaptiveCard",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "https://maxcdn.icons8.com/Share/icon/Arrows/right_filled1600.png",
"size": "Small",
"width": "24px",
"height": "24px"
}
],
"width": "auto",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"verticalContentAlignment": "Center",
"items": [
{
"type": "TextBlock",
"spacing": "None",
"text": "The image on the left is an icon and exists for presentation only. There is no point in allowing the user to preview it in a larger viewer.",
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "The images below are thumbnails, and there should be a way to preview them in a larger viewer:",
"wrap": true
},
{
"type": "ImageSet",
"images": [
{
"type": "Image",
"size": "Medium",
"url": "https://wallup.net/wp-content/uploads/2017/11/23/524292-landscape-nature-Italy-trees-mountains-house-reflection-lake.jpg"
},
{
"type": "Image",
"size": "Medium",
"url": "https://wallup.net/wp-content/uploads/2019/09/529824-landscape-nature-mountains-lake-forest-reflection-sunset-mount-hood-oregon-usa-volcano.jpg"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
As rendered:

The problem is, there is no way to distinguish between images that should be expandable vs those that shouldn't. Not only that, but there is no way for a host to be notified that an image has been clicked aside from hooking into the generated UI elements (the DOM with the JS SDK).
To solve this problem, Teams has introduced a Teams-specific property that allows card authors to mark certain images as expandable:
{
"type": "Image",
"size": "Medium",
"url": "https://...",
"msTeams": {
"allowExpand": true
}
}
Proposed solution: Action.Preview
We will introduce a new Action.Preview action type that can be set as an image's selectAction:
{
"type": "Image",
"size": "Medium",
"url": "https://LowResImage.jpg",
"selectAction": {
"type": "Action.Preview",
"url": "https://HighResImage.png"
}
}
Hosts will be notified they need to handle an Action.Preview the exact same way they are notified to handle all other types of actions in our various SDKs. For example, in JS, it will be via the onExecuteAction event:
function myOnExecuteActionHandler(action: Action) {
if (action instanceof PreviewAction) {
// Handle the preview. The host decides how that's done; it could be by opening
// the image in a built-in, embedded viewer, or by opening it in a browser window
}
}
Notes:
- If a host doesn't handle an Action.Preview action, nothing happens (the SDK will not have built-in default handling logic).
- Action.Preview will only be valid as the
selectActionproperty of an Image element. It will not be usable anywhere else.
Schema
The schema for Action.Preview will be the same as that of Action.OpenURL, with the only difference being the url property will not be required.
| Property | Type | Required | Description |
|---|---|---|---|
| type | "Action.Preview" | Yes | The type of the action. |
| url | uri | No | The optional URL to the image to be previewed. In the absence of this URL, the host should use the parent Image's url property. |
All other properties (title, iconUrl, style, fallback and requires are inherited common to all other action types)
Accessibility
The role of an Image with an Action.Preview as its selectAction will tentatively be "link" unless we hear otherwise from the accessibility team.
Action.Preview will have the same accessibility behavior as all other actions. We could add a way on top of that for the host application to impose a default tooltip when the title property of the Action.Preview isn't defined. If we want to do that, then it would materialize as a new actions.preview.defaultTooltip property in HostConfig:
{
...
"actions": {
"maxActions": 5,
...
"showCard": {
...
},
"preview": {
"defaultTooltip": "Preview"
},
...
}
...
Note it is the responsibility of the host to localize this value.
Backwards compatibility in Teams
Teams will implement server-side logic that dynamically appends "msTeams.allowExpand": true to any Image element that happens to have its selectAction set to an Action.Preview, unless the msTeams.allowExpand property is already explicitly present in the payload. This will ensure that all cards using the new model are still compatible with older Teams desktop clients that only understand the msTeams.allowExpand property.
Other options considered
No change to the AC schema or SDKs. Require card authors use Action.OpenUrl as the Image's selectAction
This option doesn't really work because the action's URL might point to a document or some site that needs to be opened, rather than an image to preview.
New Boolean allowExpand property on Image
This model mimics what Teams has done so far. While it works, we are not favoring it because:
- Using the existing action model seems a better fit for this feature
- It seems that allowing an Image to be both previewable and also be associated with say an Action.Execute is not necessary nor desirable
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the existing Action.OpenURL schema and Image selectAction handling across the SDKs. Compare those paths with the proposed Action.Preview properties and host notification behavior; done means the new action is represented consistently and is restricted to Image selectAction as specified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp, typescript
- Domain
- api, developer-experience
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100