[英]Adaptive Card: Dynamically show Card on dropdown click in Adaptive Card : Bot Builder
我必須創建一個自適應卡,其中包含城市名稱,每個城市都有不同的假期列表。 我必須在下拉列表中顯示城市名稱,並且在選擇每個城市時我必須顯示包含假期列表的子卡。
我開發了以下代碼:
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;
}
訂單:
問題:城市名稱作為單獨的按鈕出現,但我需要下拉列表中的城市名稱。
您可以通過使用Input.ChoiceSet
元素並將style
設置為"compact"
在自適應卡片中創建下拉菜單。 請注意,緊湊樣式是 Teams 中的默認樣式。
如果您使用 Web 聊天,則只能擴展自適應卡片功能,因此您將無法響應此下拉列表中的事件,並且您將無法在用戶填寫卡片時修改卡片。 您需要讓用戶 select 成為一個城市,然后單擊提交按鈕。 雖然 Teams 確實允許消息更新,因此您可以更新卡片以響應提交操作,但發送帶有假期列表的全新卡片可能會更好、更容易。
@Kyle Delaney,我怎樣才能使下拉選項覆蓋下拉菜單下方的整個空間
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.