Multiple buttons in HeroCard
I want to have multiple buttons on HeroCard and be able to press all buttons one by one but when I press the button the click
program goes to the next function in the waterfall and waits for the next action instead of the button action again, what should I do in this case?
bot.dialog("/showCards", [
(session) => {
const msg = new Message(session)
.textFormat(TextFormat.xml)
.attachmentLayout(AttachmentLayout.carousel)
.attachments([{
title: "title",
url: "https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png"
}].map(obj =>
new HeroCard(session)
.title(obj.title)
.images([
CardImage.create(session, obj.url)
.tap(CardAction.showImage(session, obj.url)),
])
.buttons([
CardAction.openUrl(session, obj.url),
CardAction.imBack(session, `click`, "Click"),
CardAction.imBack(session, `clack`, "Clack")
])
));
Prompts.choice(session, msg, ["click", "clack"]);
},
(session, results) => {
// todo use results.response.entity
}
]);
source to share
You can also use CardAction.dialogAction and bind each button to beginDialogAction.
let card = new builder.HeroCard(session)
.title(title)
.subtitle(subtitle)
.buttons([builder.CardAction.dialogAction(session, 'dialogAAction', 'dataYouNeedInDialogA', 'ButtonTitleA'), builder.CardAction.dialogAction(session, 'dialogBAction', 'dataYouNeedInDialogA', 'ButtonTitleB')]);
let msg = new builder.Message(session)
.attachments([card])
session.endDialog(msg);
// use one of these two to either end the dialog and start a new one or to stay in the current dialog and wait for user input
session.send(msg);
// don't forget to add the dialogs to your bot / library later in your code (outside your current dialog)
bot.dialog('dialogA', dialogA); // initialized somewhere in your code
bot.dialog('dialogB', dialogB);
bot.beginDialogAction('dialogAAction', 'dialogA');
bot.beginDialogAction('dialogBAction', 'dialogB', {
onSelectAction: (session, args, next) => {
// you might want to clear the dialogStack if the button is pressed. Otherwise, if the button is pressed multiple times, instances of dialogB are pilled up on the dialog stack.
session.clearDialogStack();
next();
}
});
In my opinion this is the best way to achieve the behavior you described. All buttons work whenever the user presses them, even if they scroll back in the conversation and press the same button again. The only tradeoff is that you have to pass data to the new dialog and cannot use dialogData throughout the entire stream. However, I think it's worth it because it provides a consistent UX while using the bot.
Hope this helps. You can create click and clack dialogs, bind them to actions, and pass the data you want. The user could press the click button, click, click and the bot would still work. :)
source to share