使用 Microsoft Bot Framework 动态创建具有不同内容的自适应卡片答案

【问题标题】：Dynamically create adaptive cards with different content using Microsoft Bot Framework使用 Microsoft Bot Framework 动态创建具有不同内容的自适应卡片
【发布时间】：2019-07-26 03:30:22
【问题描述】：

我正在尝试为我的 Azure 聊天机器人创建一个自适应卡片轮播。

我有一个对象列表，我想为这个列表中的每个项目创建一个新的自适应卡片。

这里是我发送卡片轮播的地方：

await step.context.sendActivity({
            text: "I've found the following job positions:",
            attachments: this.createCards(positions),
            attachmentLayout: AttachmentLayoutTypes.Carousel
        });

这里是createCards：

const JobCard = require('../../resources/jobCard.json');
createCards(positions) {
    let cards = [];         
    positions.forEach(function(position) {
        let cardJson = JobCard;
        cardJson.body[0].columns[0].items[0].text = position.name;
        cardJson.body[0].columns[0].items[1].text = position.activities;  
        let adaptativeCard = CardFactory.adaptiveCard(cardJson);
        cards.push(adaptativeCard)
    })
    return cards;}

问题是：所有卡片都显示相同的内容。显示的卡片数量与positions的数量相对应，但所有卡片都显示positions的第一个position的position.name和position.activities。

问题：我尝试动态创建卡片的方式有什么问题？我怎样才能成功地做到这一点？

感觉我在这里遗漏了一些非常简单的东西，但我找不到导致问题的原因。

【问题讨论】：

标签： javascript botframework

【解决方案1】：

您的所有卡片引用都指向同一个对象，因此当您修改其中一个时，您最终会更改所有这些。为防止出现这种情况，请在每次制作新卡片时创建一张卡片副本。您可以使用 JSON.parse(JSON.stringify(JobCard)) 创建 JSON 对象的深层副本。这是您的代码的外观。

createCards(positions) {
    let cards = [];         
    positions.forEach(function(position) {
        let cardJson = JSON.parse(JSON.stringify(JobCard));
        cardJson.body[0].columns[0].items[0].text = position.name;
        cardJson.body[0].columns[0].items[1].text = position.activities;  
        let adaptativeCard = CardFactory.adaptiveCard(cardJson);
        cards.push(adaptativeCard)
    })
    return cards;
}

希望这会有所帮助！

【讨论】：

【解决方案2】：

除了在 JSON 文件中指定 JobCard，您还可以在 JavaScript 文件中指定它并导出一个函数，该函数将位置作为参数并返回 JobCard。这是一个例子：

// JobCard.js
function JobCard(position) {
  return {
    $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
    type: 'AdaptiveCard',
    version: '1.0',
    body: [
      {
        type: 'Container',
        items: [
          {
            type: 'TextBlock',
            text: 'Your Job',
            weight: 'bolder',
            size: 'medium',
          },
        ],
      },
      {
        type: 'Container',
        items: [
          {
            type: 'FactSet',
            facts: [
              {
                title: 'Activity:',
                value: position.activity,
              },
              {
                title: 'Name:',
                value: position.name,
              },
            ],
          },
        ],
      },
    ],
  }
}

module.exports = JobCard

// createCards.js
const { CardFactory } = require('botbuilder')
const JobCard = require('./JobCard')

function createCards(positions) {
  return positions.map(position => CardFactory.adaptiveCard(JobCard(position)))
}

module.exports = createCards

【讨论】：