能否在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
相关产品推荐
相关产品推荐

