Handling HeroCards responses In Microsoft Bot Framework v4 for NodeJS

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/

Can you provide your code for the cards, as well? And, what is the interaction from the user in this? What result are you looking to find in value? — Steven Kanberg
Accepting / upvoting an answer serves the greater Stack Overflow community and anyone with a similar question. If you feel my answer was sufficient, please "accept" and upvote it. If not, let me know how else I can help! — Steven Kanberg
Hey Steven! I updated the answer and the added more information! Thanks! — Fatih Doğru

Steven Kanberg Steven Kanberg · Accepted Answer · 2019-09-06T22:50:16

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!

Handling HeroCards responses In Microsoft Bot Framework v4 for NodeJS

1 Answers