在Microsoft Teams Bot Framework中实现Adaptive Card选择集联动显示文本输入块

要实现选择「others」时显示额外文本输入的需求，核心是利用Adaptive Card的可见性规则（Visibility），基于选择集的选中值来控制文本输入框的显示/隐藏。

1. 编写带动态显示规则的Adaptive Card JSON #

直接在卡片JSON里给文本输入框添加可见性条件，仅当选择集选中「others」时才显示：

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "selection",
      "label": "请选择选项",
      "choices": [
        {
          "title": "选项a",
          "value": "a"
        },
        {
          "title": "选项b",
          "value": "b"
        },
        {
          "title": "others",
          "value": "others"
        }
      ]
    },
    {
      "type": "Input.Text",
      "id": "othersInput",
      "label": "请输入其他内容",
      "isVisible": false,
      "visibility": {
        "property": "selection",
        "operator": "==",
        "value": "others"
      }
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "提交"
    }
  ]
}

2. 在Bot Framework中发送该卡片 #

在Bot的代码里，将上述JSON作为附件构造消息，发送给Teams用户。

以C#为例：

var adaptiveCardJson = File.ReadAllText(@"path/to/your/card.json");
var attachment = new Attachment
{
    ContentType = "application/vnd.microsoft.card.adaptive",
    Content = JsonConvert.DeserializeObject(adaptiveCardJson)
};

var reply = MessageFactory.Attachment(attachment);
await turnContext.SendActivityAsync(reply, cancellationToken);

以Node.js为例：

const adaptiveCard = require('./path/to/your/card.json');
const reply = {
    attachments: [
        {
            contentType: 'application/vnd.microsoft.card.adaptive',
            content: adaptiveCard
        }
    ]
};
await context.sendActivity(reply);

注意事项 #

• 确保Adaptive Card版本至少为v1.2（示例用v1.5，Teams完全支持），低版本不支持可见性规则
• 测试时直接在Teams客户端验证，部分模拟器对动态规则的支持可能不全

内容的提问来源于stack exchange，提问作者Samthrusha