How to implement the button click functionality in bots with respective cards

Question

Hi I am working on Bot in that I have a requirement like when an user click the button I want to display the related content in next card like this below.

Can anyone please tell me how to implement the above scenario in bots by using any cards like adaptive cards, rich cards or Thumbnail cards?

Answer 1

With Adaptive Cards, you can use AdaptiveSubmitAction for that:

new AdaptiveSubmitAction()
{
    Data = "show me the next card"
};

This produces a new incoming message with message.Text being the value of Data and you can process it the same way as a regular message from user.

You can achieve the same with other rich cards / Thumbnail cards, using ImBack and PostBack actions:

new CardAction()
{
    Type = ActionTypes.ImBack,
    Value = "show me the next card"
}

The AdaptiveSubmitAction also has DataJson property that you can use instead of Data (the DataJson has no effect if you use both). You can put a json structure there, that will end up in message.Value of the incoming message, while message.Text will be null in that case.

This can be handy when you need to pass more details, e.g. DataJson = "{ \"CardName\": \"City\", \"Name\": \"New York\" }" could mean you want to open some City card for New York. Then you can retrieve the structure like this:

protected override async Task MessageReceived(IDialogContext context, IAwaitable<IMessageActivity> item)
    {
        var message = await item;
        if (string.IsNullOrEmpty(message.Text))
        {
            dynamic value = message.Value;
            if (value == null)
            {
                // empty message - show help, error etc.
            }
            dynamic cardName = value.CardName;
            // check the name, respond with the wanted card ...
        }
        else
        {
            // process as usual
            await base.MessageReceived(context, item);
        }
    }

Here is a sample project that uses the json approach.