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: "[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);
});
},
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
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.