有没有一种方法可以为自适应卡提供列填充 - 自适应 MS BOT [英] Is there a way I can give column padding to an adaptive card- Adaptive MS BOT
本文介绍了有没有一种方法可以为自适应卡提供列填充 - 自适应 MS BOT的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用自适应卡片在使用自适应卡片模板包的表格中显示动态内容.
I'm using an adaptive card to display dynamic content in a table using the, adaptive-cards templating package.
我一直在定制它，但其中一栏仍然拒绝就位，该栏的内容总是比其他栏多.所以它掉出了行，因此扩大了表格并使它看起来很难看.[![在此处输入图像描述][1]][1]
I have been to customize it but one column is still refusing to fall in place, the column would always have more content than others. So it's falling out of rows, therefore expanding the table and making it look ugly.[![enter image description here][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);
});
},
推荐答案
要在 AdaptiveCards 中创建表格样式方法，您需要使用 columnSets.然而，列集就是它的本质，只是一组列，即一行数据.
To create a table style approach in AdaptiveCards you need to use columnSets. However a columnset is what it is, just one set of columns ie one row of data.
要拥有一个表格，您需要为每行添加一个列集，幸运的是模板可以为我们轻松做到这一点.
To have a table you need to add one columnset per row, luckily templating can do that for us easily.
您不需要手动创建任何行，您只需要将数据绑定到正确的位置.看看这个:
You do not need to create any rows manually, you just need to bind the data on the correct place. Have a look at this:
{
"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 属性时，您需要确保仅在要重复的元素上使用它一次.在您的情况下，您在同一列中一遍又一遍地重复数据.只有当列的大小与其他元素成比例时，填充、自动间距等才能正常工作.
This should do what you want. You had various smaller issues as well. When using the $data property you need to make sure to use it only once on the element you want to have repeated. In your case you repeated the data over and over again in the same column. Padding, auto spacing etc only works properly when the columns keep their size proportionally to the other elements.
简而言之:构建具有多个列集的表
In short: Build a table with multiple columnsets
- 列集 1 ->表头
- Columnset2-N ->表格行
- Columnset3 ->如果您需要任何表页脚
要使其成为一个外观合适的表格，您需要确保从标题到数据的所有列都具有相同的宽度，这最容易使用像素宽度或加权完成.
to make it a proper looking table you need to make sure that all columns from header to data have the same width which is done easiest with either pixel width or weighted.
这篇关于有没有一种方法可以为自适应卡提供列填充 - 自适应 MS BOT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
