Adaptive Card show text input block based on choice set value

Question

I have a card with input choice set of options a,b,others

If users selects option as "others" then an extra input text block should come below the choice set. Is this possible with "Only show when" element property

Here is my Adaptive Card JSON

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "choices": [
        {
          "title": "a",
          "value": "a"
        },
        {
          "title": "b",
          "value": "b"
        },
        {
          "title": "c",
          "value": "c"
        },
        {
          "title": "Others",
          "value": "Others"
        }
      ],
      "placeholder": "Select option"
    },
    {
      "type": "Input.Text",
      "placeholder": "Placeholder text",
      "isVisible": false
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

and i'm using html with webchat-es5 javascript library for rendering the bot to a page.

Answer 1

All of the information you need in order to create a self-updating Adaptive Card in Web Chat using Adaptive Card extensibility can be found in this answer: BotFramework-WebChat - Adaptive Card

There are a few differences in your case that justify writing another answer:

1. You're using the CDN instead of the NPM package
2. You're using the ES5 bundle, which I'm assuming means you want this to work on IE11
3. You're trying to toggle visibility instead of change text

Just like in the other case, we need to define a naming schema for ourselves that we can use to identify the card elements our code needs to manipulate. I'm only using one keyword this time: "on."

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "choices": [
        {
          "title": "a",
          "value": "a"
        },
        {
          "title": "b",
          "value": "b"
        },
        {
          "title": "c",
          "value": "c"
        },
        {
          "title": "Others",
          "value": "Others"
        }
      ],
      "placeholder": "Select option",
      "id": "main"
    },
    {
      "type": "Input.Text",
      "placeholder": "Placeholder text",
      "isVisible": false,
      "id": "on_main_Others"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

Consider the choice set input to be our switch and the text input to be our target. The choice set input's ID is just the name we've picked for it (and all inputs should have ID's in order for the card to work anyway even if we're not using our own naming schema). The text input's ID takes the form on_<input>_<value> where <input> is the ID of our switch and <value> is the choice that makes the target visible.

Here's the code you can use to make that work (notice that it accommodates IE11 by not using any arrow functions, etc.):

AdaptiveCards.AdaptiveCard.onParseElement = function (element) {
  const PREFIX_ON = 'on';
  const segments = element.id && element.id.split('_');

  if (segments && segments[0] == PREFIX_ON) {
    const card = element.getRootElement();
    const input = card.getElementById(segments[1]);
    const targetValue = segments[2];
    
    input.onValueChanged = function (sender) {
      // The isVisible setter automatically updates the rendered elements
      element.isVisible = (sender.value == targetValue);
    };
  }
};

Notice that we're accessing Adaptive Cards classes with an AdaptiveCards global variable. You may have guessed that this becomes available when you use the Adaptive Cards CDN. I need to warn you that unfortunately the latest version of the Adaptive Cards CDN is currently incompatible with the latest version of Web Chat. Adaptive Cards 2.x introduced breaking changes (which can be expected for a new major version), and Web Chat is currently using 1.2.6. To make sure your code works you should specify the version of the Adaptive Cards CDN in your HTML, and you might as well specify the version of Web Chat too in case newer versions of Web Chat come out later that break with Adaptive Cards 1.2.6.

<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg.com/adaptivecards@1.2.6/dist/adaptivecards.js" ></script>

While it's unclear if you need to use the adaptiveCardsPackage property in Node, I'm pretty sure you do need to use it with the CDN:

WebChat.renderWebChat(
  {
    adaptiveCardsPackage: AdaptiveCards,
    directLine: window.WebChat.createDirectLine({
      secretOrToken: secretOrToken
    })
  },
  document.getElementById('webchat')
);