如何将“AdaptiveActionSet”放在“AdaptiveColumn”中？

SLock 发表于 Dev

锁

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

如何添加操作按钮？也许这是adaptivecards版本的问题？我的自适应卡的版本是 1.1（也可以使用 1.0）。我想请教解决办法。

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

C#代码

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

日志

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

凯尔·德莱尼

您可以在架构中看到 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例如，如果您将内容类型设置为，您可以在网络聊天的附件中间件中将附件转换回自适应卡片：

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

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