I have a Microsoft Teams bot that sends out Adaptive Cards. I want to dynamically fill those with data (for example pictures). To do so I have 2 different JSON files. One with the layout of the card and one with the data. How can I link those 2 files? How does the layout file know where to get the data from? I'm new to this and a bit lost ^^'
This is the layout code:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Hello ${name}!"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4"
}
This is my code for the data JSON:
{
"name": "Cute Name"
}
This is how I render the card:
const rawDynamicGalleryCard = require("./adaptiveCards/dynamicGallery.json");
//show dynamic gallery card
switch (txt) {
case "dynamic": {
const card = cardTools.AdaptiveCards.declare(rawDynamicGalleryCard).render();
await context.sendActivity({
attachments: [CardFactory.adaptiveCard(card)],
});
}
If I run the bot and type the keyword I get this: Bot Answer
The documentation suggests the adaptivecards-templating package:
const ACData = require("adaptivecards-templating");
const dynamicGalleryTemplate = require("./adaptiveCards/dynamicGallery.json");
const dynamicGalleryData = require("./adaptiveCards/data.json");
const template = new ACData.Template(dynamicGalleryTemplate);
const card = template.expand({
$root: dynamicGalleryData
});
// Now you have an AdaptiveCard ready to render!
(This assumes that dynamicGallery.json is your "layout code" above, and I made a total guess as to where your data json is.)