如何在Microsoft Teams自适应卡片Input.ChoiceSet中添加动态选项？

核心方案：后端注入动态选项（最可靠） #

自适应卡片本身对choices.data的动态数据绑定支持有限（Teams客户端兼容性不足），最稳妥的方式是在后端构建卡片JSON时，直接将API返回的动态数据转换为ChoiceSet所需的choices数组并注入。

示例（JavaScript）：

// 1. 从API获取动态数据
const apiResponse = await fetch("your-api-endpoint").then(res => res.json());

// 2. 转换为ChoiceSet要求的选项格式
const dynamicChoices = apiResponse.map(item => ({
  title: item.name, // 显示给用户的文本
  value: item.id    // 提交时传递的实际值
}));

// 3. 构建完整的自适应卡片
const adaptiveCard = {
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "selectedOptions",
      "isMultiSelect": true, // 开启多选
      "label": "请选择需要操作的选项",
      "choices": dynamicChoices // 直接注入动态生成的选项
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "执行操作"
    }
  ]
};

// 4. 将卡片发送到Teams（根据你的Bot/应用逻辑实现）
// 示例：Bot Framework中发送卡片
await context.sendActivity({ attachments: [CardFactory.adaptiveCard(adaptiveCard)] });

备选：使用自适应卡片数据绑定（需Teams版本支持） #

如果希望采用模板化方式，可使用自适应卡片的数据绑定语法，但需确保Teams客户端版本支持choices.data特性：

1. 定义卡片模板：

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.4",
  "$data": {
    "options": [] // 预留数据源位置
  },
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "selectedOptions",
      "isMultiSelect": true,
      "label": "请选择需要操作的选项",
      "choices": [
        {
          "title": "${option.name}",
          "value": "${option.id}"
        }
      ],
      "choices.data": {
        "path": "$.options" // 绑定到$data中的options数组
      }
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "执行操作"
    }
  ]
}

2. 填充数据源并发送：

const apiResponse = await fetch("your-api-endpoint").then(res => res.json());
const cardTemplate = // 上述模板JSON

// 填充$data中的options数组
cardTemplate.$data.options = apiResponse.map(item => ({
  name: item.name,
  id: item.id
}));

// 发送卡片到Teams
await context.sendActivity({ attachments: [CardFactory.adaptiveCard(cardTemplate)] });

常见问题排查 #

• choices.data无效：大概率是Teams客户端版本不支持该特性，优先使用第一种后端直接注入的方案。
• 多选不生效：确保isMultiSelect属性设为true。
• 选项显示异常：检查API返回数据的映射逻辑，确保title和value字段正确赋值。

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