【问题标题】:Adaptive Card: Dynamically show Card on dropdown click in Adaptive Card : Bot Builder自适应卡片:在自适应卡片的下拉点击中动态显示卡片:Bot Builder
【发布时间】:2020-07-29 11:43:11
【问题描述】:

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

我已经开发了以下代码:

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:

问题:城市名称作为单独的按钮出现,但我需要下拉列表中的城市名称。

【问题讨论】:

  • adaptivecards.io/designer 我看到一个 Input.ChoiceSet 下拉选项,但标准的 WebChat 主机应用程序不再可用(它是旧版本的 webchat)和新版本的“Bot Framework Other Channels” " 似乎不再支持这一点。
  • 我们假设您正在使用网络聊天吗? (由于这个帖子有多个人,如果你想让我看到你的回复,你需要@提及我。)
  • @kyle Delaney 我在微软团队中使用这个聊天机器人。
  • @utkarshsinghal17 你得到这个工作了吗..我也有类似的要求在下拉列表中加载..

标签: c# botframework chatbot microsoft-teams adaptive-cards


【解决方案1】:

您可以通过使用Input.ChoiceSet 元素并将style 设置为"compact" 在自适应卡片中创建下拉菜单。请注意,紧凑样式是 Teams 中的默认样式。

如果您使用网络聊天,则只能扩展自适应卡片功能,因此您将无法响应此下拉列表中的事件,并且您将无法在用户填写卡片时修改卡片。您需要让用户选择一个城市,然后单击提交按钮。虽然 Teams 确实允许更新消息,因此您可以更新卡片以响应提交操作,但发送带有假期列表的全新卡片可能会更好、更容易。

【讨论】:

  • 基于adaptivecards.io/designer,这似乎不适用于当前用于网络聊天的卡片主机,仅适用于较旧的(非双子座)版本。你可否确认?当您将卡片主机从 WebChat 更改为 Other Channel(哪个 Other Channel 与我在新版本的 OOTB 网络聊天和直接网络聊天中看到的匹配)时,它说 ChoiceSets are not supported。
  • @billoverton - 我对你的期望感到很困惑,但我想我有点明白你在说什么。当我从designer 的下拉列表中选择“Bot Framework 其他频道”时,我看到很多元素没有呈现,所以我认为它们指的是第三方频道(它们都不支持自适应卡)。在第三方渠道中,您需要使用 Bot Framework 丰富的卡片,这些卡片都没有任何输入字段。我不知道你为什么认为这是指网络聊天,但无论如何我们在这里讨论的不是这个。
  • 这里与这个问题有关stackoverflow.com/questions/60383301/…。 Adaptivecards.io/designer 上的“Botframework WebChat”卡片主机以“旧”格式呈现卡片,如我的 SO 问题右侧所示,但新的网络聊天(和直线)通道的呈现方式类似于“Botframework 其他通道”左边。也许有一个“Botframework WebChat New”卡片主机在设计器上不可用,但允许在新的网络聊天中使用 ChoiceSet 之类的东西。
  • @KyleDelaney 我想在自适应卡片中使用 ShowCard 的概念,因此无需再次发布到聊天机器人,我想查看与不同城市关联的不同子卡片(假期列表)。
  • 正如您在我的代码中看到的那样,我正在使用 AdaptiveShowCardAction。所以唯一的问题是城市名称作为按钮而不是下拉菜单(Input.Choice)出现,我需要在下拉列表中显示这些城市名称并选择不同的城市我需要在不使用提交操作的情况下显示不同的子自适应卡(意味着没有再次发布)
猜你喜欢
  • 2022-01-08
  • 1970-01-01
  • 2020-07-07
  • 2021-02-06
  • 2021-11-14
  • 1970-01-01
  • 1970-01-01
  • 2020-05-30
  • 2017-12-29
相关资源
最近更新 更多