c# - 如何在 WebChat 中自定义自适应卡片?
问题描述
这个问题是我之前问题的延伸。(如何将“AdaptiveActionSet”放入“AdaptiveColumn”?)
当时,我对自适应卡片的定制和WebChat.html文件了解不多。
上图是我想要的自适应卡的布局。右侧的 Reserve 按钮是 Action.OpenUrl 按钮。
要放置这样的按钮,我需要在列中放置一个 ActionSet。但是,典型的自适应卡片不会在列中显示操作集,如上图所示。内容类型如下所示。
ContentType = "application/vnd.microsoft.card.adaptive"
(在网络聊天中)
为了解决这个问题,我必须自定义自适应卡片,但我不确定如何。
(惭愧,我参考了下面的链接,但我仍然无法自定义卡片。
你能告诉我解决这个问题的方法或展示一个简单的定制卡片示例吗?请。
下面是我写的代码。
我的自适应卡代码:
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 的错误。
解决方案
使用 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"
推荐阅读
- python - 在 Python 中按文件名将照片排序到文件夹中
- javascript - 换行文本的 JavaScript 正则表达式
- javascript - JavaScript 仅在运算结果 < 100 时运行运算
- python - 如何在 ID 行后跟值行的文件中按 ID 对行进行分组?
- android - 如何在 Android 中以编程方式(无布局)获取 camera2 预览帧?
- laravel - Auth::check() 在自定义中间件中返回 false,怎么了?
- math - 为什么在执行 PCA 时计算特征向量和特征值如此有效?
- bash - 在 CLion 中导入 ROS 项目和工作区时出错
- arrays - 数组可以在 C 中的单个索引中存储多个值吗?
- flutter - Flutter:StreamProvider 的奇怪行为,使用不完整数据重建的小部件