如何将 "AdaptiveActionSet" 放入 "AdaptiveColumn"？

Question

我想将 "AdaptiveOpenUrlAction" 放在 "AdaptiveColumnSet" 中以获得更好的自适应卡片布局。但是，我的机器人模拟器不显示 OpenUrl 按钮。

如何添加操作按钮？也许这是adaptivecards版本的问题？我的adaptivecards的版本是1.1（1.0也可以）。求解决方法

下面是我写的代码和我在模拟器中创建的json日志。 JsonActionSet中的Log写入模拟器，但ActionSet中的按钮不显示在卡上

C#代码

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

Json日志

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

下面是我根据我想要的“https://adaptivecards.io/designer/”创建的自适应卡片的布局。

{
    "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

您可以在架构中看到 Adaptive Cards 1.2 中引入了操作集：https://adaptivecards.io/explorer/ActionSet.html

目前唯一支持 Adaptive Cards 1.2 的官方聊天客户端是 Web Chat，但是 Web Chat 使用 Direct Line 通道并且 Direct Line 删除了它无法识别的元素：https://github.com/microsoft/BotFramework-Services/issues/87

在那个 GitHub 问题中，您会找到一个使用自定义内容类型而不是 application/vnd.microsoft.card.adaptive 的解决方法。例如，如果将内容类型设置为 application/vnd.microsoft.card.custom，则可以在 Web Chat 的附件中间件中将附件转换回自适应卡片：

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'));

使用该问题中描述的解决方法，我能够成功呈现您的列集：

如何将 "AdaptiveActionSet" 放入 "AdaptiveColumn"？

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

c#

json

botframework

adaptive-cards