【发布时间】：2020-11-17 04:22:04
【问题描述】：
我正在使用自适应卡片来使用自适应卡片模板包在表格中显示动态内容。
我一直在定制它，但有一栏仍然拒绝到位，该栏总是比其他栏有更多的内容。所以它掉出了行，因此扩大了表格并使其看起来很丑。[![在此处输入图像描述][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);
});
},
【问题讨论】：
-
如果编辑历史记录包含某人的真实联系信息，那么您应该要求 Stack Overflow 为您编辑它。他们已经拒绝了我的请求，因为他们没有看到联系信息是真实的证据。
标签： javascript botframework microsoft-teams adaptive-cards web-chat