Update already posted Adaptive Card in Bot Framework v4 in javascript

Question

I am new to botframework and microsoft teams. I am trying to build a bot that will post an adaptive card. On submit of the card i want to perform some action and update the existing card.

I was able to create post an adaptive card in microsoft teams and when a user submit's an action, I am able to capture the data. The place where i am stuck in not able to get the update the existing card with a new card.

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

const {
    TurnContext,
    MessageFactory,
    TeamsInfo,
    TeamsActivityHandler,
    CardFactory,
    ActionTypes
} = require('botbuilder');

const TextEncoder = require('util').TextEncoder;


const WELCOME_TEXT = 'This bot will introduce you to Adaptive Cards. Type anything to see an Adaptive Card.';

var replyToID = "";

class AdaptiveCardsBot extends TeamsActivityHandler {
    constructor() {
        super();
        // See https://aka.ms/about-bot-activity-message to learn more about the message and other activity types.
        this.onMessage(async (context, next) => {
            // const replyText = `Echo: ${ context.activity.text }`;
            var txt = context.activity.text;
            var val = context.activity.value;
            

            if (!txt && val) {
                await this.sendUpdatedCard(context);
            } else
            {
                const sampleCard = require('./resources/adaptiveSample.json');
                console.log (JSON.stringify(context.activity));
                console.log ("---------------------");
                console.log ("---------------------");
                //console.log("Core ID" + context.activity.replyToId);
                var reply = await context.sendActivity(
                    {
                        text: 'Here is an Adaptive Card:',
                        attachments: [CardFactory.adaptiveCard(sampleCard)]
                    });
                
                console.log (JSON.stringify(reply));
                console.log ("---------------------");
                console.log ("---------------------");
                replyToID = reply.id;
                var reference = TurnContext.getReplyConversationReference(context.activity, reply)
                replyToID = reference.activityId;       
                
            }
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });

        this.onMembersAdded(async (context, next) => {
            const membersAdded = context.activity.membersAdded;
            for (let cnt = 0; cnt < membersAdded.length; ++cnt) {
                if (membersAdded[cnt].id !== context.activity.recipient.id) {
                    await context.sendActivity(`Welcome to Adaptive Cards Bot  ${ membersAdded[cnt].name }. ${ WELCOME_TEXT }`);
                }
            }
            // By calling next() you ensure that the next BotHandler is run.
            await next();
        });
    }
    async sendUpdatedCard(context)
        {
            const data = context.activity.value;
            console.log("Call Submit to Asana");
            console.log (JSON.stringify(context.activity));
            console.log ("---------------------");
            console.log ("---------------------");
            console.log ("replyToID :" + replyToID);
            const returnCard = require('./resources/returnSample.json');

            const card2 = CardFactory.adaptiveCard(returnCard);
            card2.id = replyToID;
            const newActivity = MessageFactory.attachment(card2);
            newActivity.id = replyToID;
            newActivity.type = "message";
            await context.updateActivity(newActivity);
        }
}


// await context.sendActivity({
//     text: 'Here is a return card',
//     attachments: [CardFactory.adaptiveCard(returnCard)]
// });
//const newActivity = MessageFactory.attachment(CardFactory.adaptiveCard(returnCard));
module.exports.AdaptiveCardsBot = AdaptiveCardsBot;

Any help would be greatly appreciated.

Attached image of the emulator

Gousia Begum Gousia Begum · Accepted Answer · 2020-08-21T05:33:16

@Pawan Please go through Updating Bot Messages. Here is a sample code in Node to update an already existing card with a new card on button click.

Update already posted Adaptive Card in Bot Framework v4 in javascript

1 Answers