ChoicePrompt with buttons in Teams

When you use ChoicePrompt as described in samples and docs Teams channel doesn't display buttons.
April 1, 2019
bot-framework teams

Microsoft’s Bot Framework SDK in it’s latest iteration (v4) continues with the tradition of providing developers with useful pre-made dialogs which handle most common user inputs (Date, Choice, Text…). While the framework tries to present dialogs in the best possible way for given channel, sometimes it just doesn’t. In this case the issue is with ChoicePrompt’s fallback to text options in Microsoft Teams channel.

When you use ChoicePrompt as described in samples and docs in the Web Chat or Facebook Messenger, you will get nice buttons that disappear when clicked.

That’s not the case in Teams:

ChoicePrompt with plain text suggestions

ChoicePropmpt uses Suggested Actions which are not supported in Teams, so let’s work around this using HeroCard.

ChoicePrompt with buttons as suggestions

When adding the ChoicePrompt dialog into your dialog set, supress the default behavior of displaying available choices:

_dialogSet.Add(new ChoicePrompt("MainMenuPrompt") { Style = ListStyle.None });

Then construct HeroCard with buttons and use it as dialog’s prompt:

var choices = new[] { "Navigate", "Band Search", "Etc." };

var card = new HeroCard
{
    Text = "Please choose an option.",
    Buttons = choices.Select(choice => new CardAction(ActionTypes.ImBack, choice, value: choice)).ToList(),
};

return await stepContext.PromptAsync("MainMenuPrompt", new PromptOptions
{
    Prompt = (Activity)MessageFactory.Attachment(card.ToAttachment()),
    Choices = ChoiceFactory.ToChoices(choices),
}, cancellationToken);

Obviously the difference here is that when user clicks one of the buttons, the card does not disappear and is still visible. I didn’t handle this, but if it was a requirement, I would experiment with message updates in Teams.

comments powered by Disqus