本文介绍了自适应卡:在下拉菜单中动态显示卡,单击自适应卡:Bot Builder的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我必须创建一个具有名称城市且每个城市都有不同假日列表的自适应卡.我必须在下拉列表中显示城市名称,在选择每个城市时,我必须显示包含假日列表的子卡.

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.

推荐答案

您可以使用 Input.ChoiceSet 元素,并将style设置为"compact".请注意,紧凑型样式是Teams中的默认样式.

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.

仅当您使用Web聊天时才可以扩展自适应卡功能,因此您将无法响应此下拉列表中的事件,并且在用户填写卡时将无法对其进行修改.您需要让用户选择一个城市,然后单击提交"按钮.尽管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.

这篇关于自适应卡:在下拉菜单中动态显示卡,单击自适应卡:Bot Builder的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 04:54
查看更多