Bot Framework 4.0+Node.js：Teams Bot自适应卡片无按钮自动提交方案问询

核心方案：利用自适应卡片onChange动作触发自动提交 #

自适应卡片的Input.ChoiceSet组件原生支持onChange属性，可直接绑定Action.Submit动作，用户选择选项时会自动向Bot发送提交请求，完全无需依赖额外按钮。

1. 配置自适应卡片的选择输入与自动提交逻辑 #

在卡片JSON中，为每个需要触发自动提交的选择组添加onChange动作，同时通过isVisible控制后续选项组的初始隐藏状态：

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "firstChoice",
      "label": "第一组选项",
      "choices": [
        {"title": "选项1", "value": "opt1"},
        {"title": "选项2", "value": "opt2"}
      ],
      "onChange": {
        "type": "Action.Submit",
        "data": {"action": "loadSecondChoices"}
      }
    },
    {
      "type": "Input.ChoiceSet",
      "id": "secondChoice",
      "label": "第二组选项",
      "choices": [],
      "isVisible": false,
      "onChange": {
        "type": "Action.Submit",
        "data": {"action": "loadThirdChoices"}
      }
    },
    {
      "type": "Input.ChoiceSet",
      "id": "thirdChoice",
      "label": "第三组选项",
      "choices": [],
      "isVisible": false
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

2. Bot端处理提交请求并动态更新卡片 #

在Node.js的Bot逻辑中，监听消息提交的payload，根据动作类型生成对应下一级的选项，再通过消息更新机制替换原卡片：

const { ActivityTypes, CardFactory } = require('botbuilder');

async function onTurn(context) {
    if (context.activity.type === ActivityTypes.Message) {
        const payload = context.activity.value;
        if (payload && payload.action) {
            const originalCard = context.activity.attachments[0].content;
            let updatedCard = {...originalCard};

            switch (payload.action) {
                case 'loadSecondChoices':
                    // 根据第一组选择生成第二组选项
                    updatedCard.body[1].choices = payload.firstChoice === 'opt1'
                        ? [{"title": "子选项1-1", "value": "sub11"}, {"title": "子选项1-2", "value": "sub12"}]
                        : [{"title": "子选项2-1", "value": "sub21"}, {"title": "子选项2-2", "value": "sub22"}];
                    updatedCard.body[1].isVisible = true;
                    break;
                
                case 'loadThirdChoices':
                    // 根据第二组选择生成第三组选项
                    updatedCard.body[2].choices = payload.secondChoice === 'sub11'
                        ? [{"title": "孙选项1-1-1", "value": "subsub111"}, {"title": "孙选项1-1-2", "value": "subsub112"}]
                        : [{"title": "孙选项2-1-1", "value": "subsub211"}, {"title": "孙选项2-1-2", "value": "subsub212"}];
                    updatedCard.body[2].isVisible = true;
                    break;
            }

            // 更新原消息中的卡片
            await context.updateActivity({
                id: context.activity.replyToId,
                type: ActivityTypes.Message,
                attachments: [CardFactory.adaptiveCard(updatedCard)]
            });
        } else {
            // 首次发送初始卡片
            const initialCard = require('./path/to/your/card.json');
            await context.sendActivity({
                attachments: [CardFactory.adaptiveCard(initialCard)]
            });
        }
    }
}

3. 关键注意事项 #

• 自适应卡片版本建议使用1.4及以上，保证onChange动作在Teams中的兼容性。
• 消息更新时必须正确使用context.activity.replyToId指向原消息ID，确保卡片替换生效。
• 可根据业务需求扩展payload数据，比如携带用户ID、会话ID等信息，避免状态丢失。

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