Adaptive Card: Dynamically show Card on dropdown click in Adaptive Card : Bot Builder

Question

I have to create a adaptive card which have city of name and each city have different holiday list. I have to show city name in dropdown list and on selection of each city i have to show child card which contains Holiday list.

I have develop below code:

private async Task<DialogTurnResult> ShowCard(WaterfallStepContext stepContext, CancellationToken cancellationToken)
{
    List<string> city = new List<string>() { "Delhi", "Bangalore", "Mumbai" };
    List<string> date = new List<string>() { "1-Jan", "26-Jan", "15-Aug" };
    List<string> des = new List<string>() { "New Year", "Republic Day", "Independence Day" };

    List<string> date1 = new List<string>() { "1-Jan", "26-Jan", "15-Aug", "25-Dec" };
    List<string> des1 = new List<string>() { "New Year", "Republic Day", "Independence Day", "Christmas Day" };

    List<string> date2 = new List<string>() { "1-Jan", "25-Dec" };
    List<string> des2 = new List<string>() { "New Year", "Christmas Day" };

    List<AdaptiveCard> cards = new List<AdaptiveCard>();
    cards.Add(HolidayListAdaptiveCard(date, des));
    cards.Add(HolidayListAdaptiveCard(date1, des1));
    cards.Add(HolidayListAdaptiveCard(date2, des2));

    var mainCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
    var column3 = new AdaptiveColumn();
    column3.Items.Add(new AdaptiveTextBlock() { Text = "Holiday City", Weight = AdaptiveTextWeight.Bolder });
    var columnSet1 = new AdaptiveColumnSet();
    columnSet1.Columns.Add(column3);
    var container1 = new AdaptiveContainer();
    container1.Style = AdaptiveContainerStyle.Emphasis;
    container1.Items.Add(columnSet1);
    mainCard.Body.Add(container1);

    List<AdaptiveShowCardAction> adaptiveShowCardActions = new List<AdaptiveShowCardAction>();
    for (int i = 0; i < city.Count; i++)
    {
        mainCard.Actions.Add(new AdaptiveShowCardAction() { Title = city[i], Card = cards[i] });
    }

    var attachment = new Attachment
    {
        ContentType = AdaptiveCard.ContentType,
        Content = mainCard
    };
    var reply = MessageFactory.Attachment(attachment);
    await stepContext.Context.SendActivityAsync(reply);
    return new DialogTurnResult(DialogTurnStatus.Waiting);
}

private AdaptiveCard HolidayListAdaptiveCard(List<string> date, List<string> description)
{
    var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
    List<AdaptiveColumn> columns = new List<AdaptiveColumn>();
    var column = new AdaptiveColumn();
    var column1 = new AdaptiveColumn();
    var column2 = new AdaptiveColumn();

    var textBlock = new AdaptiveTextBlock();
    textBlock.Text = "Sr. No";
    textBlock.Weight = AdaptiveTextWeight.Bolder;
    textBlock.Size = AdaptiveTextSize.Large;
    textBlock.Color = AdaptiveTextColor.Accent;
    column.Items.Add(textBlock);

    var textBlock1 = new AdaptiveTextBlock();
    textBlock1.Text = "Date";
    textBlock1.Weight = AdaptiveTextWeight.Bolder;
    textBlock1.Size = AdaptiveTextSize.Large;
    textBlock1.Color = AdaptiveTextColor.Good;
    column1.Items.Add(textBlock1);

    var textBlock2 = new AdaptiveTextBlock();
    textBlock2.Text = "Description";
    textBlock2.Weight = AdaptiveTextWeight.Bolder;
    textBlock2.Size = AdaptiveTextSize.Large;
    textBlock2.Color = AdaptiveTextColor.Dark;
    column2.Items.Add(textBlock2);

    for (int i = 0; i < date.Count; i++)
    {
        column.Items.Add(new AdaptiveTextBlock() { Text = (i + 1).ToString() });
        column1.Items.Add(new AdaptiveTextBlock() { Text = date[i] });
        column2.Items.Add(new AdaptiveTextBlock() { Text = description[i] });
    }

    var columnSet = new AdaptiveColumnSet();
    columnSet.Columns.Add(column);
    columnSet.Columns.Add(column1);
    columnSet.Columns.Add(column2);
    var container = new AdaptiveContainer();
    container.Style = AdaptiveContainerStyle.Emphasis;
    container.Items.Add(columnSet);
    card.Body.Add(container);
    return card;
}

O/P:

Issue: City name coming as separate button but i need city name in dropdown list.

Answer 1

You can create a dropdown menu in an Adaptive Card by using an Input.ChoiceSet element and setting style to "compact" . Note that the compact style is the default in Teams.

You can only extend Adaptive Card functionality if you're using Web Chat so you won't be able to respond to events from this dropdown and you won't be able to modify the card as the user is filling it out. You'll need to have the user select a city and then click the submit button. While Teams does allow message updates and so you could update the card in response to the submit action, it's probably better and easier just to send a whole new card with the holiday list.

Answer 2

@Kyle Delaney, how can i make the dropdown options to cover the entire space below the dropdown