Search code examples
microsoft-teamsadaptive-cards

AdaptiveCard: Action.ToggleVisibility for Action


Is it possible to toggle the visibility of an Adaptivecard action? The following does not work:

{
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "Press the buttons to toggle the button!",
      "wrap": true
    }
  ],
  "actions": [
    {
      "id": "btnShow",
      "type": "Action.ToggleVisibility",
      "title": "Show!",
      "targetElements": [
        {
          "elementId": "btnHide",
          "isVisible": true
        },
        {
          "elementId": "btnShow",
          "isVisible": false
        }
      ]
    },
    {
      "id": "btnHide",
      "type": "Action.ToggleVisibility",
      "title": "Hide!",
      "targetElements": [
        {
          "elementId": "btnHide",
          "isVisible": false
        },
        {
          "elementId": "btnShow",
          "isVisible": true
        }
      ],
      "isVisible": false
    }
  ]
}


Solution

  • Actions alone cannot be hidden/shown. They need to be nested in a container within body, which supports that feature. This one is an alternative:

    {
      "type": "AdaptiveCard",
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.2",
      "body": [
        {
          "type": "TextBlock",
          "text": "Press the buttons to toggle the button!",
          "wrap": true
        },
    
        {
          "id": "btnShow",
          "type": "ActionSet",
          "actions": [
            {
              "type": "Action.ToggleVisibility",
              "title": "Show!",
              "targetElements": [
                {
                  "elementId": "btnHide",
                  "isVisible": true
                },
                {
                  "elementId": "btnShow",
                  "isVisible": false
                }
              ]
            }
          ]
        },
    
    
        {
          "id": "btnHide",
          "type": "ActionSet",
          "actions": [
            {
              "type": "Action.ToggleVisibility",
              "title": "Hide!",
              "targetElements": [
                {
                  "elementId": "btnHide",
                  "isVisible": false
                },
                {
                  "elementId": "btnShow",
                  "isVisible": true
                }
              ]
            }
          ],
          "isVisible": false
        }
      ],
    
      "actions": []
    }