有没有一种方法可以为自适应卡提供列填充 - Adaptive MS BOT
Is there a way I can give column padding to an adaptive card- Adaptive MS BOT
我正在使用自适应卡片在 table 中使用自适应卡片模板包显示动态内容。
我已经去定制了，但是有一个栏目仍然不肯到位，该栏目总是比其他栏目内容更多。所以它脱离了行，因此扩大了 table 并使其看起来很丑陋。[![在此处输入图片描述][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: "admin@doe.com",
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);
要在 AdaptiveCards 中创建 table 风格的方法，您需要使用 columnSets。然而，列集就是它的本质，只有一组列，即一行数据。
要获得 table，您需要每行添加一个列集，幸运的是模板可以轻松地为我们做到这一点。
您无需手动创建任何行，只需将数据绑定到正确的位置即可。看看这个：
{
"schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"weight": "Bolder",
"size": "Medium",
"text": "Account Details",
"horizontalAlignment": "left",
"separator": true
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"columns": [
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
]
},
{
"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"
}
],
"width": "stretch"
},
{
"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": "${DomicileBranch}"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"weight": "Bolder",
"size": "Medium",
"text": "Last Five Transactions",
"horizontalAlignment": "left",
"spacing": "ExtraLarge",
"separator": true
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"columns": [
{
"type": "Column",
"separator": true,
"width": 20,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Amount",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 10,
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Type",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"horizontalAlignment": "Center",
"text": "Currency"
}
]
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"text": "Date",
"weight": "Bolder",
"horizontalAlignment": "Center",
"wrap": true
}
],
"width": 20
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Remarks",
"horizontalAlignment": "Center"
}
],
"width": 30
}
]
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"$data": "${lastFiveTrans}",
"columns": [
{
"type": "Column",
"separator": true,
"width": 20,
"items": [
{
"type": "TextBlock",
"separator": true,
"text": "${Amount}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 10,
"separator": true,
"items": [
{
"type": "TextBlock",
"separator": true,
"text": "${TransactionType}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${Currency}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${TransactionDate}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 30,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${Remarks}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
这应该可以满足您的要求。你也有各种小问题。
使用 $data 属性 时，您需要确保在要重复的元素上只使用一次。在您的情况下，您在同一列中一遍又一遍地重复数据。填充、自动间距等只有在列的大小与其他元素成比例时才能正常工作。
简而言之：
构建一个包含多个列集的 table
- 列集 1 -> Table Headers
- Columnset2-N -> Table 行
- Columnset3 -> Table 页脚（如果需要）
为了使它看起来正确 table 你需要确保从 header 到数据的所有列都具有相同的宽度，这最容易通过像素宽度或加权来完成。
我正在使用自适应卡片在 table 中使用自适应卡片模板包显示动态内容。
我已经去定制了，但是有一个栏目仍然不肯到位，该栏目总是比其他栏目内容更多。所以它脱离了行，因此扩大了 table 并使其看起来很丑陋。[![在此处输入图片描述][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: "admin@doe.com",
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);
要在 AdaptiveCards 中创建 table 风格的方法，您需要使用 columnSets。然而，列集就是它的本质，只有一组列，即一行数据。
要获得 table，您需要每行添加一个列集，幸运的是模板可以轻松地为我们做到这一点。
您无需手动创建任何行，只需将数据绑定到正确的位置即可。看看这个：
{
"schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"weight": "Bolder",
"size": "Medium",
"text": "Account Details",
"horizontalAlignment": "left",
"separator": true
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"columns": [
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
],
"width": "stretch"
},
{
"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"
}
]
},
{
"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"
}
],
"width": "stretch"
},
{
"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": "${DomicileBranch}"
}
],
"width": "stretch"
}
]
},
{
"type": "TextBlock",
"weight": "Bolder",
"size": "Medium",
"text": "Last Five Transactions",
"horizontalAlignment": "left",
"spacing": "ExtraLarge",
"separator": true
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"columns": [
{
"type": "Column",
"separator": true,
"width": 20,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Amount",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 10,
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Type",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"horizontalAlignment": "Center",
"text": "Currency"
}
]
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"text": "Date",
"weight": "Bolder",
"horizontalAlignment": "Center",
"wrap": true
}
],
"width": 20
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"size": "Small",
"weight": "Bolder",
"text": "Remarks",
"horizontalAlignment": "Center"
}
],
"width": 30
}
]
},
{
"type": "ColumnSet",
"separator": true,
"bleed": true,
"spacing": "Padding",
"$data": "${lastFiveTrans}",
"columns": [
{
"type": "Column",
"separator": true,
"width": 20,
"items": [
{
"type": "TextBlock",
"separator": true,
"text": "${Amount}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 10,
"separator": true,
"items": [
{
"type": "TextBlock",
"separator": true,
"text": "${TransactionType}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${Currency}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 20,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${TransactionDate}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
},
{
"type": "Column",
"width": 30,
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "${Remarks}",
"size": "Small",
"horizontalAlignment": "Center",
"spacing": "ExtraLarge"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
这应该可以满足您的要求。你也有各种小问题。 使用 $data 属性 时，您需要确保在要重复的元素上只使用一次。在您的情况下，您在同一列中一遍又一遍地重复数据。填充、自动间距等只有在列的大小与其他元素成比例时才能正常工作。
简而言之： 构建一个包含多个列集的 table
- 列集 1 -> Table Headers
- Columnset2-N -> Table 行
- Columnset3 -> Table 页脚（如果需要）
为了使它看起来正确 table 你需要确保从 header 到数据的所有列都具有相同的宽度，这最容易通过像素宽度或加权来完成。