2

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

Mira Pautz
  • 31
  • 2
  • Is `dynamicGallery.json` the name of either the "layout code" or the "data JSON", or some other schema? Could you include the filenames for both of those JSON snippets? – Sean Sutherland Apr 06 '22 at 16:33

2 Answers2

1

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.)

Sean Sutherland
  • 377
  • 2
  • 14
0

The render method takes in the data as argument. Define the data like so:

const data = {"name": "Cute Name"};

then pass it

const card = AdaptiveCards.declare(rawDynamicGalleryCard).render(data);
joe
  • 1