如何在网聊的自适应卡1.2版中将输入文本作为必填字段 [英] How do I make Input text a required field in adaptive card version 1.2 for webchat

问题描述

我正在使用BotFramework WebChat 4.9.1 和自适应卡 1.2 ，并且我只需要几个字段即可.以下是我尝试过的卡，但是它不起作用.理想情况下，提交时，应使用红色文本突出显示如果文本框为空，则必须输入名字.

I am using BotFramework WebChat 4.9.1 and adaptive card 1.2 and I need few fields to be mandatory. Following is the card I have tried but it does not work. Ideally on submit it should highlight with red text that First name is required if the text box is empty.

{
  "$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*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "firstName",
                  "placeholder": "First Name",
                  "Required": true,
                  "requiredMessage": "First Name is required"
                },
                {
                  "type": "TextBlock",
                  "text": "Last Name*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "lastName",
                  "placeholder": "Last Name",
                  "Required": true,
                  "requiredMessage": "Last Name is required"
                },
                {
                  "type": "TextBlock",
                  "text": "Email*",
                  "weight": "Bolder",
                  "style": "email",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "email",
                  "placeholder": "Your Email",
                  "Required": true,
                  "requiredMessage": "email is required"
                },
                {
                  "type": "TextBlock",
                  "text": "DOB*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Date",
                  "id": "dob",
                  "value": "2017-09-20",
                  "Required": true,
                  "requiredMessage": "Please select you date of birth"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "result": "submit"
      }
    }
  ]
}

上面的Json可以在面向WebChat的自适应卡是否可以实现，还是我必须在前端实现?

The Json above you can try in Is it possible with adaptive card targeted for WebChat or this I'll have to achieve in front end?

推荐答案

在检查版本1.2.6的源代码时，我遇到了一些秘密的必需输入代码，该代码可能仅用于测试目的，但实际上在网络聊天.原始模式看起来像这样:

While examining the source code for version 1.2.6, I came across some secret required-input code that was probably just meant for testing purposes but actually does work in Web Chat. That proto-schema looks like this:

{
  "type": "Input.Text",
  "id": "firstName",
  "placeholder": "First Name",
  "validation": {
    "necessity": "Required",
    "errorMessage": "First Name is required"
  }
}

如果这对您有用，那么很好，但是如果您想获得更多控制权，或者您恰巧使用的是Adaptive Card的早期版本，那么您将需要此答案的其余部分.

If that works for you then great, but if you want more control or if you happen to be using an even earlier version of Adaptive Cards then you'll need the rest of this answer.

当您谈论将输入字段设为必填"时，单击提交动作并且该字段为空时，您似乎想要这两种行为:

When you talk about making an input field "required" it seems like you want these two behaviors when a submit action is clicked and the field is empty:

1. 您希望不处理提交操作
2. 您希望显示错误消息

Web Chat为它创建的每个Adaptive Card指定一个动作处理程序，没有简单的方法可以覆盖它，因此对于行为#1，最好的选择是让机器人检查传入的输入并在需要时缩短其逻辑输入丢失.

Web Chat specifies an action handler for each Adaptive Card it creates and there's no easy way to override that, so for behavior #1 your best option is to have your bot check the incoming inputs and short-circuit its logic if a required input is missing.

对于行为2，您还可以在机器人方面进行处理，方法是让机器人将消息发送回Web聊天，让用户知道自适应卡中缺少哪些输入.另外，您可以发送一张新卡，在第一个卡中未填充的每个输入字段旁边，附加一个文本块.

For behavior #2, you could also handle that on the bot side by having the bot send a message back to Web Chat that lets the user know which inputs are missing from the Adaptive Card. Alternatively, you could send a new card with an additional text block next to each input field that wasn't populated in the first card.

如果您真的想在Web聊天端切换这些文本块，那么实际上可能有一种方法可以做到这一点.即使您无法覆盖Web Chat的提交动作行为，也可以通过为每个动作提供一个 onExecute 处理程序来添加到该行为中.您必须阅读此答案，以获取有关如何在Web聊天中应用特殊的Adaptive Card功能的解释:

If you really want to toggle those text blocks on the Web Chat side then there may actually be a way to do that. Even if you can't override Web Chat's submit action behavior, you can add to the behavior by providing an onExecute handler for each action. You'll have to read this answer for an explanation of how to apply special Adaptive Card functionality in Web Chat: BotFramework-WebChat - Adaptive Card

这篇关于如何在网聊的自适应卡1.2版中将输入文本作为必填字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！