You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否在Adaptive Card的Input.ChoiceSet中显示动态数据?如何通过API获取选项值?

在Adaptive Card的Input.ChoiceSet中使用动态数据与API获取选项的方案

完全可以在Input.ChoiceSet组件中展示动态数据,也支持通过调用API获取数据来渲染选项,具体实现方式分两种场景:

后端预生成Card时注入动态选项

如果你的Adaptive Card是由后端服务生成的,可以先调用目标API拿到数据,把数据转换成Input.ChoiceSet要求的choices格式(每个选项包含title和value字段),再嵌入到Card的JSON结构里,最后返回给前端渲染。

示例JSON片段:

{
  "type": "Input.ChoiceSet",
  "id": "dynamicOptions",
  "choices": [
    {"title": "产品A", "value": "prod_a"},
    {"title": "产品B", "value": "prod_b"}
    // 这里的选项由API返回数据动态生成
  ]
}

前端渲染后动态更新选项

如果Card已经在前端完成初始渲染,你可以通过前端代码调用API获取数据,再更新Input.ChoiceSet的选项列表。以JavaScript为例:

// 调用API获取数据源
fetch('https://your-api-endpoint.com/data')
  .then(res => res.json())
  .then(rawData => {
    // 转换为ChoiceSet需要的格式
    const formattedChoices = rawData.map(item => ({
      title: item.name,
      value: item.code
    }));
    // 获取Card容器并找到目标ChoiceSet
    const cardContainer = document.getElementById('adaptive-card');
    const choiceSet = cardContainer.querySelector('[id="dynamicOptions"]');
    // 更新选项并重新渲染
    choiceSet.choices = formattedChoices;
    cardContainer.render();
  });

注意点

  • 无论哪种方式,都要确保API返回的数据能被转换成{title: string, value: string}的结构,这是Input.ChoiceSet的必填选项格式。
  • 如果是在Teams、Bot Framework等特定平台使用,需要遵循平台的Card更新规则,比如通过Bot发送更新活动来修改已发送的Card内容。

内容的提问来源于stack exchange,提问作者Naina

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 22:37:21