CODEWITHSUNDEEP
javascriptjsondynamicadaptive-cards
Mira Pautz
Mira Pautz

Reputation: 51

How do I pass data into an Adaptive Card?

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

Upvotes: 4

Views: 3380

Answers (2)

joe
joe

Reputation: 29

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

Upvotes: -1

Sean Sutherland
Sean Sutherland

Reputation: 461

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

Upvotes: 2

Related Questions