如何在 WebChat 中自定義自適應卡片？

Question

這個問題是我之前問題的延伸。 （ 如何將“AdaptiveActionSet”放入“AdaptiveColumn”？ ）

當時我對自適應卡片和WebChat.html文件的定制了解不多。

上圖是我想要的自適應卡的布局。 右側的 Reserve 按鈕是 Action.OpenUrl 按鈕。

要放置這樣的按鈕，我需要在列中放置一個 ActionSet。 但是，典型的自適應卡片不會像上圖那樣在列中顯示 ActionSet。 內容類型如下所示。 ContentType = "application/vnd.microsoft.card.adaptive" （在網絡聊天中）

為了解決這個問題，我必須自定義自適應卡片，但我不確定如何。

（慚愧，我參考了下面的鏈接，但仍然無法自定義卡片。

Bot Connector 服務未使用最新的自適應卡 #87

你能告訴我解決這個問題的方法或展示一個簡單的自定義卡片示例嗎？ 請。

下面是我寫的代碼。

我的自適應卡片代碼：

card.Body.Add(new AdaptiveColumnSet()
{
    Columns = new List<AdaptiveColumn>()
    {
        new AdaptiveColumn()
        {
            //(~Date, No problem)
        },
        new AdaptiveColumn()
        {
            //(~Price, No problem)
        },
        new AdaptiveColumn()
        {
            Items =
            {
                new AdaptiveActionSet()
                {
                    Actions =
                    {
                        new AdaptiveOpenUrlAction()
                        {
                            Url = new Uri("https://www.SomeUrl.com"),
                            Title = "Reserve",
                            Style = "positive",
                        }
                    }
                }
            },
            Width = "auto",
        }
    },
});

var reply = turnContext.Activity.CreateReply();
reply.Attachments = new List<Attachment>
{
    new Attachment()
    {
        ContentType = "application/vnd.microsoft.card.custom",
        Content = card
    }
};

我的 webChat.html ：

const attachmentMiddleware = () => next => card => {
  if (card.attachment.contentype === 'application/vnd.microsoft.card.custom'){
    card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
  }
  return next(card)
};

window.WebChat.renderWebChat({
    directLine: botConnection,
    styleOptions,
    adaptiveCardHostConfig,
    attachmentMiddleware
}, document.getElementById('webchat'));

document.querySelector('#webchat > *').focus();

如上， ContentType = "application/vnd.microsoft.card.custom"

如果我將自定義分配給 contentType，

我收到一個名為 No renderer 的錯誤。

Answer 1

使用 AdaptiveColumn 的 SelectAction 解決了這個問題。 它通過一起使用 AdaptiveTextBlock 和 SelectAction 並指定寬度。

前任）

Items =
    {
        new AdaptiveTextBlock()
        {
            HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
            Color = AdaptiveTextColor.Light,
            Text = "Reserve",
            Weight = AdaptiveTextWeight.Bolder,
         }
    },
    SelectAction = new AdaptiveOpenUrlAction()
    {
        Url = new Uri($"{someurl}"),
        Title = "rsv",
        Id = "bb" + cnt,
    },
    Width = "50px"