microsoft / microsoft/AdaptiveCards

[Feature Request] Allow card authors to specify if an image can be be expanded (previewed)

Open
#6,315 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Request
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:
image

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 selectAction property 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.