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