Actions should allow an image to be displayed in addition to text for the title

[waynehsmith]

Implementation status

• TypeScript ([TS] Icon images in Actions #1071)
• UWP ([UWP] Icon images in Actions #1278)
• WPF ([.NET] Icon images in Actions #1072)
• iOS ([iOS] Icon images in Actions #1279)
• Android ([Android] Icon images in Actions #1280)
• Documentation

Problem

There's no way to display an image in addition to text on an action. Some hosts, like toast notifications, are built around this experience where developers can provide "image buttons" for their actions.

This can NOT be part of the card body. The actions need to be consistently rendered just like actions are today - with the only difference being that an image can be provided.

Card authors should NOT have control over the placement of the image. Otherwise the end user experience would be inconsistent, since some toast notifications would have the image on the left, some on the right, etc.

Spec

Schema changes

We add an iconUrl property to action...

Property	Type	Required	Description
type	IAction	true
title	string	true	Label for button or link that represents this action
speak	Speak	false	Specifies what should be spoken for this entire element. This is simple text or SSML fragment
iconUrl	string	false	Optional icon to be shown on the action in conjunction with the title

"actions": [
  {
    "type": "Action.Submit",
    "title": "Snooze",
    "iconUrl": "ms-appx:///Assets/Snooze.png",
    "data": "snooze"
  },
  {
    "type": "Action.Submit",
    "title": "Dismiss",
    "iconUrl": "ms-appx:///Assets/Dismiss.png",
    "data": "dismiss"
  }

]

Host Config

"actions": {
    "iconPlacement": "aboveTitle|leftOfTitle",
    "iconSize": 30
}

Defaults: aboveTitle and 30

Update 8/3: iconSize was changed from a string "30px" to a number [30], to match the unit conventions throughout host config. Also updated spec to clarify defaults and some behavior.

Renderer Requirements

1. If iconPlacement is aboveTitle then the iconSize should be used as the height of the image, while maintaining aspect ratio. Card Authors should use square images for ideal portability between Hosts.
2. If iconPlacement is leftOfTitle then the image SHOULD BE as close as possible to the height of the text in the action. If that isn't reasonable then iconSize should be used.
3. If iconUrl is null on ANY action within a set, the iconPlacement SHOULD BE leftOfTitle to ensure buttons are all the same height.
4. Per-platform styling (CSS, XAML, etc) MUST ADD a new style with a name that combines "ActionWithIcon" appended by the iconPlacement value. E.g., if HostConfig.actions.iconPlacement is "aboveTitle" then the platform style would be "ActionWithIconAboveTitle". This will allow for fine-grained UI treatment of Actions with icons in various placements.

Downlevel Impact

Medium
On a 1.0 renderer the icon will be dropped.

[danmarshall]

The slippery slope here is that someone will inevitably want it on the right, then the top, bottom, etc., leading to another layout language.

[danmarshall]

Can this be solved with actions on ColumnSets?

[waynehsmith]

That's a bit unclear @danmarshall . The issue I'm trying to solve is a Container ( with a Column Set containing an Image and a TextBlock, as well as an InputBox). I want the "submit" button to submit information from the Image ( a feedback action) as well as the contents of the input box. If I use the selectAction the entire container sends the click without the user being able to enter information as seen here:

{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have define the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"speak": "",
"wrap": true
},
{
"type": "FactSet",
"speak": "It has been assigned to: David Claux",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
}
]
},
{
"type": "Input.Text",
"id": "Improve",
"isMultiline": true,
"placeholder": "How can we improve?"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "Action.Submit",
"data": {
"x": 13
}
}
}

[andrewleader]

Toasts need this too

[matthidinger]

@dclaux at some point we added iconSize in HostConfig but didn't really specify it's behavior. Currently the image size will be the height of the action text, even if it's set to be placed above the title. Does this seem sufficient or do you feel we should include iconSize in this release? We can always add it later since it's a HostConfig option

[waynehsmith]

I think a configurable size is a nice to have but the ability to emulate an "image button" with proper button response (mouse over, mouse out, and click) would be the priority.

…

________________________________ From: Matt Hidinger <notifications@github.com> Sent: Monday, May 21, 2018 2:27:28 PM To: Microsoft/AdaptiveCards Cc: Wayne Smith; Author Subject: Re: [Microsoft/AdaptiveCards] Actions should allow an image to be displayed in addition to text for the title (#389) @dclaux<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdclaux&data=02%7C01%7C%7Cc1311960717f4e518d8308d5bf488239%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636625240491899190&sdata=aeld7nYtaQoDUzVHh6BNjWCC0EG4Cx1XnM840jyKHW4%3D&reserved=0> at some point we added iconSize in HostConfig but didn't really specify it's behavior. Currently the image size will be the height of the action text, even if it's set to be placed above the title. Does this seem sufficient or do you feel we should include iconSize in this release? We can always add it later since it's a HostConfig option — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMicrosoft%2FAdaptiveCards%2Fissues%2F389%23issuecomment-390740858&data=02%7C01%7C%7Cc1311960717f4e518d8308d5bf488239%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636625240491899190&sdata=wWS4g%2FUj5BpXh9D%2BqfuNMzY2JJk2vdAWcWMrYArn8yg%3D&reserved=0>, or mute the thread<https://nam04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAQzdLWYgcs4hvxNqjZ3r1E7yth5HBpJyks5t0wcQgaJpZM4NwGQn&data=02%7C01%7C%7Cc1311960717f4e518d8308d5bf488239%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636625240491899190&sdata=QOomEH6i37W1Mo9hyLQzYTesCYw7xHFrQxKouOEe1pU%3D&reserved=0>.

[dclaux]

@matthidinger from the screenshot at the top of this issue it doesn't look like the image is the same height as the text:

In any case, I think a configurable size is preferable.

[andrewleader]

@matthidinger that doesn't work for toasts. We need the icon to be bigger, and on top of the text, as seen in that screenshot I provided earlier.

[paulcam206]

Documentation is done and in the mahiding/site1.1 branch.

[hari44330]

is it possible to add alt text for icon ?