Я использую адаптивную карту для отображения динамического содержимого в таблице с помощью пакета шаблонов адаптивных карт.
Мне приходилось настраивать его, но один столбец все еще отказывается встать на место, в столбце всегда будет больше содержимого, чем в других. Таким образом, он выпадает из строк, поэтому таблица расширяется и выглядит некрасиво. [! [Введите здесь описание изображения] [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]",
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);
});
},
