How do I make Input text a required field in adaptive card version 1.2 for webchat

Question

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"
      }
    }
  ]
}

The Json above you can try in Design You Adaptive Card Here Please select the Host app and Target Version from the designer tool. Please help. Is it possible with adaptive card targeted for WebChat or this I'll have to achieve in front end?

Is there a reason your JSON is using properties named `Required` and `requiredMessage` instead of the properties `isRequired` and `errorMessage` like you can see in the schema? https://adaptivecards.io/explorer/Input.Text.html — Kyle Delaney, Sep 09 '20 at 23:39
I have tried `isRequired` and `errorMessage` but there are no reasons for that I have `Required` and `requiredMessage`, I was doing some trials and errors to see if something is going to work. — Satish Patel, Sep 10 '20 at 03:13
Did you notice that `isRequired` was introduced in Adaptive Cards 1.3 and [Web Chat only supports Adaptive Cards 1.2.6](https://learn.microsoft.com/en-us/adaptive-cards/resources/partners#live)? — Kyle Delaney, Sep 10 '20 at 22:22
Yes, I did notice and hence the actual question how do I make an Input text field required in adaptive card version `1.2` because I am using webchat for UI. — Satish Patel, Sep 11 '20 at 03:22

score 1 · Accepted Answer · answered Sep 12 '20 at 00:00

1

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"
  }
}

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:

You want the submit action to not be processed
You want an error message to be displayed

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.

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.

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

answered Sep 12 '20 at 00:00

Kyle Delaney

11,616
6
39
66

So yesterday I already did the second approach and got it somewhat working by sending another card by validating the input from back end. Anyways, I will try what you suggested for version 1.2.6, it will be great if it works. Thanks for the help. – Satish Patel Sep 12 '20 at 07:32
So I tried the above code and it works as expected for empty fields and I was wondering if you found that in the validation where we can bind a function which customizes the validation if not then I would go with the other approach which I have already got it working but I would want to avoid rendering 2 cards for same function. – Satish Patel Sep 14 '20 at 05:36
I am accepting the answer because this works as per question however please let me know If I can get more help for custom validation in this thread as chat. Thanks a lot. – Satish Patel Sep 14 '20 at 11:00
1

There's no builtin way to add custom validation to an Adaptive Card, even if Web Chat supported Adaptive Cards 1.3. You can only mark a field as required, unless you want to write your own solution on the bot side like you've done or you want to use Adaptive Card extensibility. You asked about making a field required so this is outside the scope of your question. – Kyle Delaney Sep 14 '20 at 19:05
completely agree hence accepted the answer, just wanted to know if there are hidden secret which is not documented anywhere like the validation necessity. Thanks again. – Satish Patel Sep 14 '20 at 19:14
I'm afraid it's just the "required" option – Kyle Delaney Sep 14 '20 at 19:20
Hi Kyle, is there a way to make the `errorMessage` in `validation` to be of type `Attnetion` ? – Satish Patel Sep 17 '20 at 17:39
Are you saying you want to style it? Just apply the appropriate CSS – Kyle Delaney Sep 18 '20 at 17:11

How do I make Input text a required field in adaptive card version 1.2 for webchat

1 Answers1

Linked