基于选择集值的自适应卡片显示文本输入块

Question

我有一张卡片，其中包含选项 a、b、其他的输入选择集

如果用户将选项选择为“其他”，则额外的输入文本块应位于选项集下方。这可能与“仅显示时间”元素属性有关吗

这是我的自适应卡片 JSON

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "choices": [
        {
          "title": "a",
          "value": "a"
        },
        {
          "title": "b",
          "value": "b"
        },
        {
          "title": "c",
          "value": "c"
        },
        {
          "title": "Others",
          "value": "Others"
        }
      ],
      "placeholder": "Select option"
    },
    {
      "type": "Input.Text",
      "placeholder": "Placeholder text",
      "isVisible": false
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

我正在使用带有 webchat-es5 javascript 库的 html 来将机器人呈现到页面。

Answer 1

使用自适应卡片可扩展性在网络聊天中创建自我更新自适应卡片所需的所有信息都可以在此答案中找到：BotFramework-WebChat - Adaptive Card

你的情况有一些不同之处可以证明写另一个答案是合理的：

1. 您使用的是 CDN 而不是 NPM 包
2. 您正在使用 ES5 捆绑包，我假设这意味着您希望它在 IE11 上工作
3. 您正在尝试切换可见性而不是更改文本

就像在其他情况下一样，我们需要为自己定义一个命名模式，我们可以使用它来识别我们的代码需要操作的卡片元素。这次我只用了一个关键词：“开”。

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "choices": [
        {
          "title": "a",
          "value": "a"
        },
        {
          "title": "b",
          "value": "b"
        },
        {
          "title": "c",
          "value": "c"
        },
        {
          "title": "Others",
          "value": "Others"
        }
      ],
      "placeholder": "Select option",
      "id": "main"
    },
    {
      "type": "Input.Text",
      "placeholder": "Placeholder text",
      "isVisible": false,
      "id": "on_main_Others"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

将选择集输入视为我们的开关，将文本输入视为我们的目标。选择集输入的 ID 就是我们为其选择的名称（所有输入都应该有 ID，以便卡片能够正常工作，即使我们没有使用自己的命名模式）。文本输入的 ID 采用 on_<input>_<value> 的形式，其中 <input> 是我们的开关的 ID，<value> 是使目标可见的选项。

这是您可以用来完成这项工作的代码（请注意，它通过不使用任何箭头函数等来适应 IE11）：

AdaptiveCards.AdaptiveCard.onParseElement = function (element) {
  const PREFIX_ON = 'on';
  const segments = element.id && element.id.split('_');

  if (segments && segments[0] == PREFIX_ON) {
    const card = element.getRootElement();
    const input = card.getElementById(segments[1]);
    const targetValue = segments[2];
    
    input.onValueChanged = function (sender) {
      // The isVisible setter automatically updates the rendered elements
      element.isVisible = (sender.value == targetValue);
    };
  }
};

请注意，我们正在使用 AdaptiveCards 全局变量访问 Adaptive Cards 类。您可能已经猜到，当您使用Adaptive Cards CDN 时，它会变得可用。我需要警告您，不幸的是，最新版本的自适应卡片 CDN 目前与最新版本的网络聊天不兼容。 Adaptive Cards 2.x 引入了重大更改（预计会出现在新的主要版本中），Web Chat 目前使用的是 1.2.6。为确保您的代码正常工作，您应该在 HTML 中指定 Adaptive Cards CDN 的版本，并且您也可以指定 Web Chat 的版本，以防万一较新版本的 Web Chat 出现与 Adaptive Cards 1.2.6 冲突.

<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg.com/adaptivecards@1.2.6/dist/adaptivecards.js" ></script>

虽然不清楚您是否需要在 Node 中使用 adaptiveCardsPackage 属性，但我很确定您确实需要将它与 CDN 一起使用：

WebChat.renderWebChat(
  {
    adaptiveCardsPackage: AdaptiveCards,
    directLine: window.WebChat.createDirectLine({
      secretOrToken: secretOrToken
    })
  },
  document.getElementById('webchat')
);