有没有办法可以为自适应卡提供列填充-自适应 MS BOT

我正在使用自适应卡来使用自适应卡模板包在表格中显示动态内容。

我已经对其进行了自定义，但有一列仍然拒绝到位，该列总是比其他列有更多的内容。因此它超出了行数，因此扩大了表格并使其看起来很难看。[![在此处输入图像描述][1]][1]

async testTableData(context) {
var tablePayLoad = {
  $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "weight": "bolder",
      "size": "Medium",
      "text": "Details",
      "horizontalAlignment": "left",
      "separator": true,
    },
    //Databody
    {
      "type": "ColumnSet",
      "separator": true,
      "bleed": true,
      "spacing": "Padding",
      "columns": [
        //Name
        {
          "type": "Column",
          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "Name",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              "wrap": true,
              "text": "${Name}",
              "size": "small",
              "horizontalAlignment": "center",
            },
          ],
        },
        //Mobile NO
        {
          "type": "Column",
          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "Mobile No",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              "wrap": true,
              "text": "${MobileNo}",
              "size": "small",
              "horizontalAlignment": "center",
            },
          ],
        },
        //Email Address
        {
          "type": "Column",
          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "Email",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              "wrap": true,
              "text": "${Email}",
              "size": "small",
              "horizontalAlignment": "center",
            },
          ],
        },
        //DOB
        {
          "type": "Column",
          "separator": true,
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "D.O.B",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              "wrap": true,
              "text": "${DOB}",
              "size": "small",
              "horizontalAlignment": "center",
            },
          ],
        },

        //House Address
        {
          "type": "Column",
          "separator": true,

          "bleed": true,
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "Address",
              horizontalAlignment: "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              wrap: true,
              "size": "small",
              "text": "${HouseAddress}",
              horizontalAlignment: "center",
            },
          ],
        },
        //Location
        {
          "type": "Column",
          "separator": true,

          "bleed": true,
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "size": "small",
              "text": "Branch",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              "separator": true,
              "wrap": true,
              "size": "small",
              "horizontalAlignment": "center",
              "text": "${Location}",
            },
          ],
        },
      ],
    },

    {
      "type": "TextBlock",
      "weight": "bolder",
      "size": "Medium",
      "text": "Trans.",
      "horizontalAlignment": "left",
      "spacing": "extraLarge",
      "separator": true,
    },

    //Trans.
    {
      "type": "ColumnSet",
      "separator": true,
      "bleed": true,
      "spacing": "Padding",
      "columns": [
        //Amount
        {
          "type": "Column",
          "separator": true,
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "size": "small",
              "weight": "bolder",
              "text": "Amount",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              $data: "${Trans}",
              "separator": true,
              "text": "${Amount}",
              "size": "small",
              "horizontalAlignment": "center",
              "spacing": "ExtraLarge",
            },
          ],
        },
        //Type
        {
          "type": "Column",
          "width": "auto",
          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "size": "small",
              "weight": "bolder",
              "text": "Type",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              $data: "${Trans}",
              "separator": true,
              "text": "${Type}",
              "size": "small",
              "horizontalAlignment": "center",
              "spacing": "ExtraLarge",
            },
          ],
        },
        //Currency
        {
          "type": "Column",
          "width": "auto",
          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "size": "small",
              "weight": "bolder",
              "horizontalAlignment": "center",
              "text": "Currency",
            },
            {
              "type": "TextBlock",
              $data: "${Trans}",
              "separator": true,
              "size": "small",
              "wrap": true,
              "text": "${Currency}",
              "horizontalAlignment": "center",
              "spacing": "ExtraLarge",
            },
          ],
        },
        //Date
        {
          "type": "Column",
          //   "bleed": true,
          //   width: "auto",

          "separator": true,

          "items": [
            {
              "type": "TextBlock",
              "size": "small",
              "text": "Date",
              "weight": "bolder",
              "horizontalAlignment": "center",
              "wrap": true,
            },
            {
              "type": "TextBlock",
              $data: "${Trans}",
              "separator": true,
              "wrap": true,
              "text": "${Date}",
              "horizontalAlignment": "center",
              "size": "small",
              "spacing": "ExtraLarge",
            },
          ],
        },

        //Comment
        {
          "type": "Column",
          //   width: "stretch",
          "separator": true,
          //   "bleed": true,
          "items": [
            {
              "type": "TextBlock",
              "size": "small",
              "weight": "bolder",
              "text": "Comment",
              "horizontalAlignment": "center",
            },
            {
              "type": "TextBlock",
              $data: "${Trans}",
              "separator": true,
              "size": "small",
              "wrap": true,
              "text": "${Comments}",
              "spacing": "ExtraLarge",
              "horizontalAlignment": "center",
            },
          ],
        },
      ],
    },
  ],
};

// Create a Template instance from the table payload
var template = new ACData.Template(tablePayLoad);

// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload

var data = [
  {
    Amount: "6000",
    Type: "C",
    Currency: "NGN",
    Date: "2019-07-19T00:00:00Z",
    Comments: "Just a regular comment here",
  },
  {
    Amount: "6000",
    Type: "C",
    Currency: "NGN",
    Date: "2019-07-19T00:00:00Z",
    Comments: "Just another Comment here",
  },
];
var dob = new Date("1990-05-29T00:00:00Z");

var tableCardPayload = template.expand({
  $root: {
    Name: "JOHN DOE",
    MobileNo: "2349082182323",
    Email: "[email protected] /cdn-cgi/l/email-protection",
    DOB: dob.toLocaleDateString(),
    HouseAddress: "16, Lagos Street, Lagos",
    Location: "Universe",
    Trans: data,
  },
});

const cardToLoad = CardFactory.adaptiveCard(tableCardPayload);

await context
  .sendActivity({ attachments: [cardToLoad] })
  .then()
  .catch((err) => {
    console.log(err);
  });

},

我已经验证使用行而不是列可以解决您的问题。这意味着您将拥有许多每列中有一个元素的列集，而不是每列中有多个元素的一个列集。每个列集将充当一行，并且它们将全部堆叠在彼此的顶部。

我已经为您编写了一个将列转换为行的函数。您可以使用此功能，也可以手动更改您的卡。这是代码：

async function sendCard(card) {
    await turnContext.sendActivity(
        MessageFactory.attachment(CardFactory.adaptiveCard(card))
    );
}

function makeRows(columnSet) {
    const rows = [];

    if (columnSet.columns.length) {
        const numRows = columnSet.columns[0].items.length;
        for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
            const row = Object.assign({}, columnSet);
            row.columns = [];

            for (const column of columnSet.columns) {
                const item = column.items[rowIndex];
                const rowColumn = Object.assign({}, column);
                //item.wrap = true;
                rowColumn.items = [item];
                row.columns.push(rowColumn);
            }

            rows.push(row);
        }
    } else {
        rows.push(columnSet);
    }

    return rows;
}

function replaceColumnsWithRows(body) {
    for (let index = body.length - 1; index > -1; index--) {
        const element = body[index];
        if (element.type == "ColumnSet") {
            const rows = makeRows(element);
            body.splice(index, 1, ...rows);
        }
    }
}

var tablePayLoad = {
    $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
    type: "AdaptiveCard",
    // Your template
};

// Create a Template instance from the table payload
var template = new ACData.Template(tablePayLoad);

// Expand the template with your `$root` data object.
// This binds it to the data and produces the final Adaptive Card payload

var tableCardPayload = template.expand({
    $root: {
        // Your data
    },
});

await sendCard(tableCardPayload);

replaceColumnsWithRows(tableCardPayload.body);

await sendCard(tableCardPayload);