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 e below the choice set. Is this possible with "Only show when" element property

Here is my Adaptive Card JSON

{
  "type": "AdaptiveCard",
  "$schema": ".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.

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 e 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.

• javascript
• json
• botframework
• adaptive-cards
• web-chat

Share Improve this question Follow edited Aug 18, 2020 at 23:28 Kyle Delaney 12.3k66 gold badges4545 silver badges7272 bronze badges asked Aug 13, 2020 at 11:00 User96User96 5311 silver badge88 bronze badges 6

• I can see that you've used the web-chat tag but there's no mention of host/renderer in your question. Are you using Web Chat as your channel client? – Kyle Delaney Commented Aug 13, 2020 at 18:02
• @Kyle Yes, I'm using web chat as channel client. – User96 Commented Aug 14, 2020 at 3:56
• 1 Sadly no, this is not possible today. The "Only show when" option is for specific data entries when using templating. You could say only show when creator = 'xxx' but can't reference other controls. Showing / Hiding elements based on a control state is not possible today but a highly requested feature that might be released quite soon. As you're using web chat you might be able to build that functionality yourself tho. – Tim Cadenbach Commented Aug 14, 2020 at 9:14
• @User96 - I can show you how to do this based on this answer, but I need some more information from you. Please show us your Adaptive Card JSON and your Web Chat code. – Kyle Delaney Commented Aug 15, 2020 at 0:02
• @Kyle - I have updated this question with my Adaptive card JSON. – User96 Commented Aug 18, 2020 at 11:29

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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 acmodates 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 bees 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 inpatible 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 e out later that break with Adaptive Cards 1.2.6.

<script crossorigin="anonymous" src="https://cdn.botframework./botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg./[email protected]/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')
);