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

我有一张带有输入选项集a、b和其他选项的卡片

如果用户像其他人一样选择选项，那么在选项集下面应该有一个额外的输入文本块。仅当元素属性为show when时，这是否可能

这是我的自适应卡

{
  "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和javascript库将机器人呈现到一个页面。

在Web聊天中使用自适应卡扩展功能创建自适应卡所需的所有信息都可以在以下答案中找到：

在您的案例中，有一些差异可以证明您有理由再写一个答案：

您使用的是CDN而不是NPM包 您正在使用ES5捆绑包，我假设这意味着您希望它在IE11上工作 您正在尝试切换可见性而不是更改文本 就像在另一个例子中一样，我们需要为自己定义一个命名模式，我们可以使用它来识别代码需要操作的卡片元素。这次我只使用了一个关键词：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采用_u上的形式，其中是开关的ID，是使目标可见的选项

下面的代码可以让您注意到，它通过不使用任何箭头函数等来适应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全局变量访问AdaptiveCards类。您可能已经猜到，当您使用。我需要提醒您，不幸的是，最新版本的自适应卡CDN目前与最新版本的网络聊天不兼容。AdaptiveCards 2.x引入了突破性的变化，这在新的主要版本中是可以预期的，Web聊天目前使用的是1.2.6。为了确保代码正常工作，您应该在HTML中指定Adaptive Cards CDN的版本，并且您还可以指定Web Chat的版本，以防稍后出现与Adaptive Cards 1.2.6不同的Web Chat新版本

虽然不清楚您是否需要在节点中使用adaptiveCardsPackage属性，但我非常确定您确实需要将其与CDN一起使用：

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

---

使用自适应卡扩展性在网络聊天中创建自适应卡所需的所有信息都可以在以下答案中找到：

在您的案例中，有一些差异可以证明您有理由再写一个答案：

您使用的是CDN而不是NPM包 您正在使用ES5捆绑包，我假设这意味着您希望它在IE11上工作 您正在尝试切换可见性而不是更改文本 就像在另一个例子中一样，我们需要为自己定义一个命名模式，我们可以使用它来识别代码需要操作的卡片元素。这次我只使用了一个关键词：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采用_u上的形式，其中是开关的ID，是使目标可见的选项

下面的代码可以让您注意到，它通过不使用任何箭头函数等来适应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全局变量访问AdaptiveCards类。您可能已经猜到，当您使用。我需要提醒您，不幸的是，最新版本的自适应卡CDN目前与最新版本的网络聊天不兼容。AdaptiveCards 2.x引入了突破性的变化，这在新的主要版本中是可以预期的，Web聊天目前使用的是1.2.6。为了确保代码正常工作，您应该在HTML中指定Adaptive Cards CDN的版本，并且您还可以指定Web Chat的版本，以防稍后出现与Adaptive Cards 1.2.6不同的Web Chat新版本

虽然不清楚您是否需要在节点中使用adaptiveCardsPackage属性，但我非常确定您确实需要将其与CDN一起使用：

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

---

我可以看到您使用了web聊天标签，但在您的问题中没有提到主机/渲染器。你使用网络聊天作为你的频道客户端吗？@Kyle是的，我使用网络聊天作为频道客户端。遗憾的是，这在今天是不可能的。使用模板时，仅当选项用于特定数据项时才显示。您可以说仅当creator='xxx'时显示，但不能引用其他控件。基于控件状态显示/隐藏元素现在是不可能的，但是一个要求很高的特性可能很快就会发布。当您使用网络聊天时，您可能能够自己构建该功能

---

ho.@User96-我可以告诉您如何基于，但我需要您提供更多信息。请向我们展示您的Adaptive Card JSON和Web聊天代码。@Kyle-我已经用Adaptive Card JSON更新了这个问题。我可以看到您使用了Web聊天标记，但您的问题中没有提到主机/渲染器。你使用网络聊天作为你的频道客户端吗？@Kyle是的，我使用网络聊天作为频道客户端。遗憾的是，这在今天是不可能的。使用模板时，仅当选项用于特定数据项时才显示。您可以说仅当creator='xxx'时显示，但不能引用其他控件。基于控件状态显示/隐藏元素现在是不可能的，但是一个要求很高的特性可能很快就会发布。当您使用网络聊天时，您可能能够自己构建该功能。@User96-我可以根据您的需要向您展示如何实现该功能，但我需要您提供更多信息。请向我们展示您的自适应卡JSON和网络聊天代码。@Kyle-我已经用自适应卡JSON更新了这个问题。