how dynamically add rows to adaptive card?

Question

How do I create an adaptive card which will create a table for the bot answer, But that bot has a number of rows depend on rows fetched from the data source, it will fetch name and id from the data source, how to create data and bind that data in UI for an adaptive card here below bot code, I am not getting how dynamically add rows and bind data.

public class EchoBot : ActivityHandler
{
    private const string WelcomeText = @"This bot will introduce you to AdaptiveCards.
                                        Type anything to see an AdaptiveCard.";

    // This array contains the file location of our adaptive cards
    private readonly string[] _cards =
    {
        //Path.Combine(".", "Resources", "FlightItineraryCard.json"),
        //Path.Combine(".", "Resources", "ImageGalleryCard.json"),
        //Path.Combine(".", "Resources", "LargeWeatherCard.json"),
        //Path.Combine(".", "Resources", "RestaurantCard.json"),
       // Path.Combine(".", "Resources", "SolitaireCard.json"),
        Path.Combine(".", "Resources", "School.json"),
    };

    protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
    {
        await SendWelcomeMessageAsync(turnContext, cancellationToken);
    }

    protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
    {

        // Random r = new Random();
        var fileRead = System.IO.File.ReadAllText("School.json");
        var item = (JObject)JsonConvert.DeserializeObject(fileRead);
        string classData = item["$data"].ToString();

        AdaptiveTransformer transformer = new AdaptiveTransformer();
        string cardJson = transformer.Transform(fileRead, classData);

        Microsoft.Bot.Schema.Attachment attachment = new Microsoft.Bot.Schema.Attachment();
        attachment.ContentType = "application/vnd.microsoft.card.adaptive";
        attachment.Content = JsonConvert.DeserializeObject(cardJson);
        var attachments = new List<Microsoft.Bot.Schema.Attachment>();

        //var reply = MessageFactory.Attachment(attachments);
        //reply.Attachments.Add(attachment);
        //return reply;

        // var cardAttachment = CreateAdaptiveCardAttachment(_cards[r.Next(_cards.Length)]);

        //turnContext.Activity.Attachments = new List<Attachment>() { cardAttachment };
        await turnContext.SendActivityAsync(MessageFactory.Attachment(attachments), cancellationToken);
        await turnContext.SendActivityAsync(MessageFactory.Text("Please enter any text to see another card."), cancellationToken);
    }

    private static async Task SendWelcomeMessageAsync(ITurnContext turnContext, CancellationToken cancellationToken)
    {
        foreach (var member in turnContext.Activity.MembersAdded)
        {
            if (member.Id != turnContext.Activity.Recipient.Id)
            {
                await turnContext.SendActivityAsync(
                    $"Welcome to Adaptive Cards Bot {member.Name}. {WelcomeText}",
                    cancellationToken: cancellationToken);
            }
        }
    }

    private static Microsoft.Bot.Schema.Attachment CreateAdaptiveCardAttachment(string filePath)
    {
        var adaptiveCardJson = System.IO.File.ReadAllText(filePath);
        var adaptiveCardAttachment = new Microsoft.Bot.Schema.Attachment()
        {
            ContentType = "application/vnd.microsoft.card.adaptive",
            Content = JsonConvert.DeserializeObject(adaptiveCardJson),
        };
        return adaptiveCardAttachment;
    }

(Since there are multiple people in this thread, you will have to @ mention me if you want me to see your reply.) Can you explain how these questions are different? [How do dynamically bind data to adaptive card?](https://stackoverflow.com/questions/59943893/how-do-dynamically-bind-data-to-adaptive-card) — Kyle Delaney, Jan 28 '20 at 19:18

score 0 · Answer 1 · answered Apr 15 '20 at 21:33

Instead of getting static file from path, and putting it in attachment you need to separate template and data.

Check the following:

https://learn.microsoft.com/en-us/adaptive-cards/templating/language

Also, this one has an example of how to separate template and data,

How to map JSON Array with Adaptive Card Row - Using Designer to Create Template

After you do that you will need to use templating API and render the card using code.

how dynamically add rows to adaptive card?

1 Answers1