Tanmayee
Tanmayee

Reputation: 57

Display a message after user selects a button in bot chat window

I have a conversation flow in the bot such that upon receiving user message, we display a relevant answer from QnAMaker and then ask user to select a category. In the bot chat window, after user selects a button, I should be able to display YOU HAVE SELECTED XYZ and then continue with the flow. The existing flow displays the selected option since I am using 'imback' in cardactions.

Code:

private List<CardAction> CreateButtons(out List<string> ids)
{
    var ds = new List<string> { "operating group", "geo", "technology", "themes" };

    ids = new List<string>();

    List<CardAction> cardButtons = new List<CardAction>();
    foreach (var keyword in ds)
    {
        ids.Add(keyword);
        CardAction CardButton = new CardAction()
        {                    
            Type = "imBack",
            Title = keyword,
            Value = keyword
        };
        cardButtons.Add(CardButton);
    }
    return cardButtons;
}

INVOKING:

var replyMessage = context.MakeMessage();               

List<string> ids = new List<string>();
List<CardAction> cardButtons = CreateCategoryButtons(out ids);

var GeoCard = new HeroCard(text: "Are you interested in searching through the file? Please select the Category you would like to refine Credentials for:")
{
    Buttons = cardButtons
};

replyMessage.Attachments.Add(GeoCard.ToAttachment());
replyMessage.AttachmentLayout = AttachmentLayoutTypes.List;
context.PrivateConversationData.SetValue<List<string>>("ids", ids);
await context.PostAsync(replyMessage);
context.Wait(CategoryValidate);
//  context.Wait(optionCategoryValidate);
context.Done(true);

Upvotes: 0

Views: 869

Answers (1)

tdurnford
tdurnford

Reputation: 3712

Instead of waiting for the user to select an item after you sent the card, you can add a flag to the card actions' value attribute to notify the bot when the user has made a selection and respond to the user in the onTurnAsync method with their choice. I would recommend setting the value for the card actions to something like 'selected: option' and have that value sent as a postBack so the flag remains hidden to the user. Then when the onTurnAsync method is called and the activity is a message, you can check the message for your flag send an activity to the user with their choice. See the code snippet below.

Screenshot

enter image description here

Bot Code - C#

public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
    {
        if (turnContext.Activity.Type == ActivityTypes.Message) {

            // Check for selected flag
            if (turnContext.Activity.Text.Split(' ')[0] == "selected:") {
                await turnContext.SendActivityAsync($"You {turnContext.Activity.Text}");
            } else {
                var reply = turnContext.Activity.CreateReply();

                reply.Attachments = new List<Attachment>();
                reply.Attachments.Add(GetHeroCard().ToAttachment());

                await turnContext.SendActivityAsync(reply, cancellationToken);
            }
        }
    }

    private static HeroCard GetHeroCard()
    {
        var buttons = new List<CardAction>();
        buttons.Add(new CardAction(ActionTypes.PostBack, "operating group", value: "selected: operating group"));
        buttons.Add(new CardAction(ActionTypes.PostBack, "geo", value: "selected: geo"));
        buttons.Add(new CardAction(ActionTypes.PostBack, "technology", value: "selected: technology"));
        buttons.Add(new CardAction(ActionTypes.PostBack, "themes", value: "selected: themes"));


        var heroCard = new HeroCard
        {
            Title = "BotFramework Hero Card",
            Subtitle = "Microsoft Bot Framework",
            Images = new List<CardImage> {},
            Buttons = buttons,
        };

        return heroCard;
    }  
}

Note, the PostBack card action is not supported by every channel.

Hope this helps!

Upvotes: 1

Related Questions