如何在 WebChat 中自定义自适应卡片？答案

【问题标题】：How to customize Adaptive-Cards in WebChat?如何在 WebChat 中自定义自适应卡片？
【发布时间】：2019-12-16 18:00:50
【问题描述】：

这个问题是我之前问题的延伸。 (How can I put "AdaptiveActionSet" in "AdaptiveColumn"?)

当时，我对自适应卡片的自定义和WebChat.html文件了解不多。

上图是我想要的自适应卡片的布局。右侧的 Reserve 按钮是 Action.OpenUrl 按钮。

要放置这样的按钮，我需要在列中放置一个 ActionSet。但是，典型的自适应卡片不会在列中显示操作集，如上图所示。内容类型如下所示。 ContentType = "application/vnd.microsoft.card.adaptive" （在网络聊天中）

为了解决这个问题，我必须自定义自适应卡片，但我不确定如何。

（惭愧，我参考了下面的链接，但我仍然无法自定义卡片。

Bot Connector service is not using latest Adaptive Cards #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 的错误。

【问题讨论】：

你能更新你的图片吗？链接好像坏了。
@tdurnford - 抱歉，你现在看到图片了吗？
您能否右键单击该网页并查看页面源代码以验证您使用的是您认为正在使用的代码吗？
@Kyle Delaney webchat image 它存在但状态不正确。
存在什么？那个截图是什么？看起来卡片正在呈现而没有您在问题中显示的错误

标签： c# json botframework adaptive-cards web-chat

【解决方案1】：

使用 AdaptiveColumn 的 SelectAction 解决了这个问题。通过同时使用 AdaptiveTextBlock 和 SelectAction 并指定 Width 来实现。

例如）

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"

【讨论】：