问题描述
我正在使用BotFramework WebChat 4.9.1
和自适应卡1.2
,并且我只需要几个字段即可。以下是我尝试过的卡,但是它不起作用。理想情况下,提交时,应使用红色文本突出显示如果文本框为空,则必须输入名字。
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json","type": "AdaptiveCard","version": "1.2","body": [
{
"type": "ColumnSet","columns": [
{
"type": "Column","width": 2,"items": [
{
"type": "TextBlock","text": "Email Sign Up Form","weight": "Bolder","size": "Medium"
},{
"type": "TextBlock","text": "You'll get timely email notification","isSubtle": true,"wrap": true
},{
"type": "Container","$data": "properties","items": [
{
"type": "TextBlock","text": "First Name*","wrap": true
},{
"type": "Input.Text","id": "firstName","placeholder": "First Name","required": true,"requiredMessage": "First Name is required"
},{
"type": "TextBlock","text": "Last Name*","id": "lastName","placeholder": "Last Name","requiredMessage": "Last Name is required"
},"text": "Email*","style": "email","id": "email","placeholder": "Your Email","requiredMessage": "email is required"
},"text": "dob*",{
"type": "Input.Date","id": "dob","value": "2017-09-20","requiredMessage": "Please select you date of birth"
}
]
}
]
}
]
}
],"actions": [
{
"type": "Action.Submit","title": "Submit","data": {
"result": "submit"
}
}
]
}
您可以在Design You Adaptive Card Here中尝试的上述Json,请从设计器工具中选择主机应用和目标版本。请帮助。 使用针对WebChat的自适应卡还是可以在前端实现的?
解决方法
在检查版本1.2.6的源代码时,我遇到了一些秘密的必需输入代码,该代码可能仅用于测试目的,但实际上可以在Web Chat中使用。原始模式看起来像这样:
{
"type": "Input.Text","id": "firstName","placeholder": "First Name","validation": {
"necessity": "Required","errorMessage": "First Name is required"
}
}
如果这对您有用,那就太好了,但是如果您想要更多的控制权,或者如果您恰巧使用的是自适应卡的早期版本,那么您将需要此答案的其余部分。
当您谈论将输入字段设置为“必填”时,当您单击提交操作且该字段为空时,您似乎想要这两种行为:
- 您希望不处理提交操作
- 您希望显示错误消息
Web Chat为它创建的每个Adaptive Card指定一个动作处理程序,没有简单的方法可以覆盖它,因此对于行为1,最好的选择是让您的机器人检查传入的输入并在需要时短路其逻辑输入丢失。
对于行为2,您还可以通过使机器人将消息发送回Web聊天,从而使机器人知道自适应卡中缺少哪些输入,从而在机器人端进行处理。另外,您可以发送一张新卡,在第一个卡中未填充的每个输入字段旁边,附加一个文本块。
如果您真的想在Web聊天端切换这些文本块,那么实际上可能有一种方法。即使您无法覆盖Web Chat的提交动作行为,也可以通过为每个动作提供一个onExecute
处理函数来添加到该行为中。您必须阅读以下答案,以获取有关如何在网络聊天中应用特殊的自适应卡功能的说明:BotFramework-WebChat - Adaptive Card