Support for inline actions

Implementation status

• TypeScript (host apps can handle the onAnchorClicked event)
• UWP
• .NET
• iOS
• Android
• Documentation

Problem

There are quite a few scenarios where it makes sense to have an action displayed as a link on a part of the text in a TextBlock. As an example, GitHub is showing this as I write this issue:

In that screenshot, contributing is just a link, but in the context of Adaptive, card authors may want to hook it to a Submit or ShowCard action (or even Http action in Outlook.)

Asks

• Microsoft Teams
• Outlook

Solution

To support this, the proposal is to use standard markdown markup to make the text a link and use a special “protocol” name (namely action) in the URL part. The host would be responsible for handling the “action” protocol and fall back to system processing if the protocol isn’t “action”. This capability would be exposed by renderers through, for example, an event.

ALT: [aleader] Shouldn’t the renderer handle the “action” protocol itself? With the option for the host to override it? This should work by default when installing the SDK, rather than requiring the host to add code to support this.

By using markdown as the solution, any markdown-enabled string in Adaptive can now embed actions.

Of course this requires that the action referenced in markup be defined as a card-wide resource, as it would not really practical to fully specify an action within a string. The proposal is to add a resources property to the AdaptiveCard type, and in that resources property add an actions collection. We can add more resource types in the future.

Example

So let’s say the above screen grab is done with Adaptive and clicking “contributing” triggers a Submit action. The payload for such a card would be this:

{
	"type": "AdaptiveCard",
	"body": [
		{
			"type": "TextBlock",
			"text": "Before you open an issue please review the [contributing](action:contributeAction) guidelines for this repository."
		}
	],
	"resources": {
		"actions": [
			{
				"type": "Action.Submit",
				"id": "contributeAction",
				...
			}
		]
	}
}

Alternate solution 2

[Andrew Leader] Mimick what XAML does with RichTextBlock… This wouldn’t require the addition of a resources array of actions to be referenced.

{
  "type": "RichTextBlock",
  "wrap": 2,
  "paragraphs": [
    {
      "inlines": [
        {
          "type": "TextRun",
          "text": "Before you open an issue please review the "
        },
        {
          "type": "TextRun",
          "text": "contributing",
          "selectAction": {
            "type": "Action.Submit",
            …
          }
        },
        {
          "type": "TextRun",
          "text": " guidelines for this repository."
        }
      ]
    }
  ]
}

This could also be our solution for inline colors, #1079, and inline advanced emojis #1645, and inline text highlighting #1885

[andrewleader]

Oh I missed that, seems like the documentation was never updated, the schema explorer is still missing the id property.

In that case, I agree with the proposal (the array)!

[dclaux]

@andrewleader yes we can totally have the renderer automatically handle the action, there is indeed no need to require that the host implements the logic.

As to the actions collection being keyed by Id, that is definitely a possibility but the reason I am proposing the other model is because actions already have an Id property, as per https://github.com/Microsoft/AdaptiveCards/issues/493