问题
I'm using an adaptive card to display dynamic content in a table using the, adaptive-cards templating package.
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);
});
},
回答1:
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"
}
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
- Columnset1 -> Table Headers
- Columnset2-N -> Table Rows
- Columnset3 -> Table footers if you need any
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.
回答2:
I have verified that using rows instead of columns will fix your problem. This means instead of one column set with many elements in each column, you will have many column sets with one element in each column. Each column set will serve as a row and they'll all be stacked on top of each other.
I've written a function that converts columns to rows for you. You can use this or you can make the changes to your card manually. Here's the code:
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);
来源：https://stackoverflow.com/questions/63122062/is-there-a-way-i-can-give-column-padding-to-an-adaptive-card-adaptive-ms-bot