How can I put "AdaptiveActionSet" in "AdaptiveColumn"?

Question

I would like to put "AdaptiveOpenUrlAction" in "AdaptiveColumnSet" for a better layout of adaptivecards. However, my bot emulator does not display the OpenUrl button.

How do I add an action button? Perhaps this is a problem with the version of adaptivecards? The version of my adaptivecards is 1.1 (1.0 is also available). I would like to ask for a solution.

Below is the code I wrote and the json log I created in the emulator. The Json Log in the ActionSet is written to the emulator, but the buttons in the ActionSet are not displayed on the card.

C# Code

new AdaptiveColumn()
{
    Items =
    {
        new AdaptiveActionSet()
        {
            Actions =
            {
                new AdaptiveOpenUrlAction()
                {
                    Url = new Uri("https://www.someurl.com"),
                    Title = "Reserve",
                    Style = "positive",
                }
            }
        }
    },
    Width = "auto",
}

JsonLog

"items": [
  {
    "actions": [
      {
        "style": "positive",
        "title": "Reserve",
        "type": "Action.OpenUrl",
        "url": "https://www.someurl.com"
      }
    ],
    "type": "ActionSet"
  }
],
"type": "Column",
"width": "auto"

Below is the layout of the adaptivecards I created from 'https://adaptivecards.io/designer/' I want.

{
    "type": "ColumnSet",
    "columns": [
        {
            "type": "Column",
            "width": "stretch",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "2019-09-10",
                    "spacing": "None",
                    "horizontalAlignment": "Center",
                    "color": "Good",
                    "size": "Medium",
                    "weight": "Bolder"
                }
            ],
            "verticalContentAlignment": "Center",
            "horizontalAlignment": "Center",
            "spacing": "None",
            "style": "emphasis",
            "bleed": true
        },
        {
            "type": "Column",
            "width": "stretch",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "USD 100.00",
                    "spacing": "None",
                    "horizontalAlignment": "Center",
                    "size": "Large",
                    "color": "Warning",
                    "weight": "Bolder"
                }
            ],
            "verticalContentAlignment": "Center",
            "bleed": true,
            "style": "emphasis",
            "spacing": "None"
        },
        {
            "type": "Column",
            "width": "auto",
            "items": [
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "Reserve",
                            "style": "positive",
                            "url": "https://www.someurl.com"
                        }
                    ],
                    "spacing": "None"
                }
            ],
            "horizontalAlignment": "Center",
            "spacing": "None",
            "bleed": true,
            "style": "emphasis"
        }
    ],
    "spacing": "None",
    "separator": true
}

Answer 1

You can see in the schema that action sets were introduced in Adaptive Cards 1.2: https://adaptivecards.io/explorer/ActionSet.html

The only official chat client that currently supports Adaptive Cards 1.2 is Web Chat, but Web Chat uses the Direct Line channel and Direct Line strips out elements it doesn't recognize: https://github.com/microsoft/BotFramework-Services/issues/87

In that GitHub issue, you will find a workaround where you use a custom content type instead of application/vnd.microsoft.card.adaptive. If you set the content type to application/vnd.microsoft.card.custom for example, you can convert the attachment back into an Adaptive Card in Web Chat's attachment middleware:

const attachmentMiddleware = () => next => card => {
  if (card.attachment.contentType === 'application/vnd.microsoft.card.custom'){
    card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
  }
  return next(card)
};

window.WebChat.renderWebChat({
  directLine,
  attachmentMiddleware
}, document.getElementById('webchat'));

Using the workaround described in that issue, I was able to render your column set successfully: