自适应卡根据选择设置值显示文本输入块

问题描述

我有一张卡片，上面有输入选项a，b，others

如果用户将选项选择为“其他”，则额外的输入文本块应位于选项集下方。使用“仅在何时显示”元素属性可以做到这一点

这是我的自适应卡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"
        }
      ]
    }
  ]
}

并且我正在将HTML与webchat-es5 JavaScript库一起使用，以将bot呈现到页面上。

解决方法

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

您的情况有一些不同，可以写出另一个答案：

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

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

{
  "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时此功能可用。我需要警告您，不幸的是，最新版本的Adaptive Cards CDN当前与最新版本的Web Chat不兼容。 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')
);