如何监听Adaptive Card中下拉选择框的选项变更？

1. 修改Adaptive Card配置，添加下拉框变更触发事件 #

在你的Adaptive Card的Input.ChoiceSet控件中，添加onChange属性绑定Action.Submit动作。用户选择下拉选项时，会自动向机器人提交包含当前选择值的请求，无需点击单独的提交按钮。

示例Card JSON片段：

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4",
  "body": [
    {
      "type": "Image",
      "id": "dynamicImage",
      "url": "https://初始图片地址",
      "size": "Medium"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "imageSelector",
      "choices": [
        { "title": "图片1", "value": "img1_url" },
        { "title": "图片2", "value": "img2_url" },
        { "title": "图片3", "value": "img3_url" }
      ],
      "placeholder": "选择图片",
      "onChange": {
        "type": "Action.Submit",
        "data": {
          "action": "updateImage"
        }
      }
    }
  ]
}

其中data.action是自定义标识，用于在机器人端区分该提交请求来自下拉框变更。

2. 在Node.js机器人中处理下拉框变更请求 #

在Bot的消息处理逻辑中，识别下拉框触发的Submit请求，根据选择的选项更新卡片图片，最后通过updateActivity方法替换原卡片。

示例Node.js代码：

const { TeamsActivityHandler } = require('botbuilder');

class MyBot extends TeamsActivityHandler {
    async onMessage(context) {
        const activity = context.activity;
        
        // 判断是否为下拉框触发的Submit请求
        if (activity.value && activity.value.action === 'updateImage') {
            const selectedImageValue = activity.value.imageSelector;
            const newImageUrl = this.getImageUrlByValue(selectedImageValue);
            
            // 复制原卡片并更新图片地址
            const updatedCard = JSON.parse(JSON.stringify(activity.attachments[0].content));
            const imageItem = updatedCard.body.find(item => item.id === 'dynamicImage');
            if (imageItem) imageItem.url = newImageUrl;
            
            // 构建更新消息
            const updateActivity = {
                type: 'message',
                id: activity.replyToId,
                attachments: [
                    {
                        contentType: 'application/vnd.microsoft.card.adaptive',
                        content: updatedCard
                    }
                ]
            };
            
            // 更新原卡片
            await context.updateActivity(updateActivity);
            return;
        }
        
        // 其他消息处理逻辑
        await context.sendActivity('收到其他消息');
    }
    
    getImageUrlByValue(value) {
        const imageMap = {
            'img1_url': 'https://实际图片1地址',
            'img2_url': 'https://实际图片2地址',
            'img3_url': 'https://实际图片3地址'
        };
        return imageMap[value] || 'https://默认图片地址';
    }
}

module.exports.MyBot = MyBot;

注意事项 #

• 确保Adaptive Card版本不低于1.4，onChange属性从该版本开始支持。
• 使用最新版Teams客户端，避免兼容性问题。
• 更新卡片必须使用原卡片的activityId（即activity.replyToId），否则会发送新消息而非替换原卡片。

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