How i do replace an adaptive card using bot framework

Question

I have an adaptive card that has a form with inputs the user can interact with, somehow, in my local environment when I interact with the adaptive card the Action.Execute is successful and the card is replaced with another. In the other hand, when I deploy my app the endpoint is hit with the new information but my card never gets replaced. here my code:

const { TeamsActivityHandler, StatusCodes, MessageFactory, CardFactory, ActivityTypes } = require("botbuilder");
const { updateInstanceState } = require("./merlinOperations");
const { successInteractionStatusChange } = require('./adaptiveCards/templates');
const { InvokeResponseFactory } = require("@microsoft/teamsfx");
const { HttpStatusCode } = require("axios");


// An empty teams activity handler.
// You can add your customization code here to extend your bot logic if needed.
class TeamsBot extends TeamsActivityHandler {
  constructor() {
    super();

    this.onMessage(async (context, next) => {

      console.info("llegamos hasta el onMessage ", context.activity);
      if (context.activity.name === "adaptiveCard/action") {

      }
      else {
        await context.sendActivity("Este bot es solo para generar notificaciones desde merlin");
      }

      //This next calls the next event(Middleware) in case we have many of them.
      await next();
    });
  }

  //This action is invoked whenever you interact with an adaptive card
  async onInvokeActivity(context) {
    try {
      //Here we confirm the interaction came from an adaptive card
      if (context.activity.name === "adaptiveCard/action") {
        console.info("Estamos justo antes de ir a merlin");
       //Here we do some internal logic and return the new template to be desplayed
        let successInteractionTemplate = await updateInstanceState(context.activity);


        let invokeResponse = InvokeResponseFactory.adaptiveCard(successInteractionTemplate) 
        
        await context.sendActivity({
          type: ActivityTypes.InvokeResponse,
          value: invokeResponse,
        });

      }
    } catch (error) {
      //If there was any error we go ahead an throw a toaster with saying an erro has occured
      console.info("###ERROR ocurrió en el invoke ", error)
      const cardRes = {
        statusCode: StatusCodes.OK,
        type: 'application/vnd.microsoft.error',
        value: { message: `ha ocurrido un error ${error.message}` }
      };

      const res = {
        status: StatusCodes.OK,
        body: cardRes
      };
      return res;
    }
  };
}

module.exports.TeamsBot = TeamsBot;

I did try this snipped and it works fine locally, but not in the cloud

const cardRes = {
    statusCode: StatusCodes.OK,
    type: 'application/vnd.microsoft.card.adaptive',
    value: successInteractionStatusChange
};

const res = {
    status: StatusCodes.OK,
    type: 'application/vnd.microsoft.card.adaptive',
    body: cardRes
};
return res;

Here is the link to the StackOverflow post:

https://stackoverflow.com/questions/78520148/how-i-do-replace-an-adaptive-card-using-bot-framework?noredirect=1#comment138430054_78520148

Answer 1

To replace an Adaptive Card using the Bot Framework:

Create a New Adaptive Card: Design the new Adaptive Card with the updated content or changes you want to implement.

Update the Conversation: Use the appropriate method in your bot code (such as updateActivity) to replace the existing Adaptive Card with the new one.

Send the Updated Card: Send the updated Adaptive Card to the user or channel where the original card was displayed. If anyone interested to know about Garage door repair Windsor visit here