Adaptive Cards: Visibility of element depending on value of a ChoiceSet

Question

I am trying to show TextBlock elements on my adaptive card depending in the value selected in a ChoiceSet (radio buttons). And I am not getting it to work properly.

The ChoiceSet does not have an ActionSet integrated, so I cannot call a ToggleVisibility action on selection. Then I tried to use the selectAction Property, but neither the Input.ChoiceSet nor Input.Choice support this property. The last approach was to use the "$when" property on the element I want to toggle and bind it to the value of the ChoiceSet. Depending on which value it has, the element should be shown or hidden. But I do not get it to work, I tried "$when": "{damagepart=2}" but it seems that only works with some kind of data binding?!

I am not able to find a proper example of that in the decumentation or in the samples of adaptivecards.io...

Does anyone have an example or some hints on how to get this task solved?

Answer 1

While this can theoretically be done in Web Chat using the extensibility features of Adaptive Cards, you may also not that this feature is in the Adaptive Cards roadmap: https://portal.productboard.com/adaptivecards/1-adaptive-cards-features/c/25-client-side-update-card-upon-input-changes-or-button-presses

Answer 2

I made this example that might be useful for you.

The column section that contain a text box and a action hyperlink will hide and show depending on the condition or the value of the variable.

card payload editor

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "This line will visible when the condition meet:",
                            "wrap": true
                        },
                        {
                            "type": "ActionSet",
                            "actions": [
                                {
                                    "type": "Action.OpenUrl",
                                    "title": "Any button you want to show"
                                }
                            ]
                        }
                    ]
                }
            ],
            "$when": "${$root.MatchVariableValue == \"yes\"}"
        }
    ]
}

use the following sample on Data editor to see how the section appear and hide depending on your input/value.

{"MatchVariableValue":"yes"}

or use

"$when": "${$root.MatchVariableValue}"

if your data is as simple as

{"MatchVariableValue":true}