Handling HeroCards responses In Microsoft Bot Framework v4 for NodeJS - node.js

Question

I am using NodeJs API of Microsoft Bot Framework v4. And my dialogs are not hardcoded in the ActivityHandler, I just call from there. I am using Waterfall dialogs. So when I try to show Carousel card on messenger (which is HeroCard on Microsoft bot framework), it shows up successfully but when I click any button on cards, there is no response for next dialog.
I tried to handle on onMessage hook but, it just tries to validate the response and throw errors.
....
ListItems extends ComponentDialog {
constructor(userProfileState, conversionStateAccessor) {
super(LIST_ITEMS);
this.userState = userProfileState;
this.conversionState = conversionStateAccessor;
this.addDialog(new WaterfallDialog(LIST_ITEMS_DIALOG, [
this.sendItems.bind(this),
this.handleItems.bind(this)
]
));
this.initialDialogId = LIST_ITEMS_DIALOG;
}
async sendItems(step) {
.......
await step.context.sendActivity({ attachments: cards }); // this line is working
}
async handleItems(step) {
console.log(step.result) // the response is not in 'step.result.value' if i click a button on cards
}
Thanks for your help
---- I added more detail -----
I am using this template to create cards
const card = CardFactory.heroCard('title', 'subtitle', ['imagelink'], [
{ type: ActionTypes.PostBack,
title: 'product 1',
value: 'product_1'
},
{ type: ActionTypes.PostBack,
title: 'product 1',
value: 'product_1'
},
]);
await context.sendActivity({ attachments: [card] });
Cars can be created successfully but the problem is, after that, I send a prompt to let the user turn the main menu if the user wants.
so I send them like that
await context.sendActivity({ attachments: [card] });
await step.prompt(LIST_ITEMS_MENU_PROMPT, menuPromptPayload);
And if the user clicks a button on cards, an error is thrown because I think the framework waits for prompt's answers. Couldn't catch the card's button's payload/

Answer 1

You need to instruct your bot to wait for and return a response following the sendActivity in sendItems. Similarly, you will encounter an error in the handleItems if you don't tell the bot to continue on since there is nothing happening other than console logging.
async sendItems(step) {
.......
await step.context.sendActivity({ attachments: cards });
// Tells the bot to wait. Normally, on `sendActivity`, it continues on to the next step.
// "DialogTurnStatus" can be found in the `botbuilder-dialogs` package.
return { status: DialogTurnStatus.waiting };
}
async handleItems(step) {
console.log(step.result);
return step.next(); // Tells the bot to continue to the next step.
}
Hope of help!