[Rendering] Action.ToggleVisibility not working with ActionSet

[dennisjsyi]

Target Platforms

NodeJS

SDK Version

2.9.0

Application Name

Viva connections

Problem Description

When Action.ToggleVisibility is defined in ActionSet it is not functional. The card action will not toggle visibility on the target elements. However, I am able to execute Action.ToggleVisibility when it is defined in AdaptiveCard.action.

I have tested this in the designer and can confirm Action.ToggleVisibility in ActionSet will not work.

Screenshots

No response

Card JSON

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "wrap": true,
      "text": "Cards can have action sets in the middle of their body."
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.ToggleVisibility",
          "title": "Toggle!",
          "targetElements": [ "textToToggle", "imageToToggle", "imageToToggle2" ]
        },
        {
          "type": "Action.ToggleVisibility",
          "title": "Show!",
          "targetElements": [
            {
              "elementId": "textToToggle",
              "isVisible": true
            },
            {
              "elementId": "imageToToggle",
              "isVisible": true
            },
            {
              "elementId": "imageToToggle2",
              "isVisible": true
            }
          ]
        },
        {
          "type": "Action.ToggleVisibility",
          "title": "Hide!",
          "targetElements": [
            {
              "elementId": "textToToggle",
              "isVisible": false
            },
            {
              "elementId": "imageToToggle",
              "isVisible": false
            },
            {
              "elementId": "imageToToggle2",
              "isVisible": false
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "wrap": true,
      "text": "There are also still \"actions\" at the bottom of the card"
    }
  ]
}

Sample Code Language

No response

Sample Code

No response

[paulcam206]

Hello @dennisjsyi - the card in this bug isn't quite set up correctly... The items referred to in the various targetElements properties refer to elements that don't exist in the card, so there's not anything to toggle. Adapting the Input.ToggleVisibility sample card to use ActionSet looks something like this (and appears to work correctly):

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Press the buttons to toggle the images!",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Here are some images:",
            "isVisible": false,
            "id": "textToToggle"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "style": "person",
                            "type": "Image",
                            "url": "https://picsum.photos/100/100?image=112",
                            "isVisible": false,
                            "id": "imageToToggle",
                            "altText": "sample image 1",
                            "size": "medium"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://picsum.photos/100/100?image=123",
                            "isVisible": false,
                            "id": "imageToToggle2",
                            "altText": "sample image 2",
                            "size": "medium"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ToggleVisibility",
                    "title": "Toggle!",
                    "targetElements": [
                        "textToToggle",
                        "imageToToggle",
                        "imageToToggle2"
                    ]
                },
                {
                    "type": "Action.ToggleVisibility",
                    "title": "Show!",
                    "targetElements": [
                        {
                            "elementId": "textToToggle",
                            "isVisible": true
                        },
                        {
                            "elementId": "imageToToggle",
                            "isVisible": true
                        },
                        {
                            "elementId": "imageToToggle2",
                            "isVisible": true
                        }
                    ]
                },
                {
                    "type": "Action.ToggleVisibility",
                    "title": "Hide!",
                    "targetElements": [
                        {
                            "elementId": "textToToggle",
                            "isVisible": false
                        },
                        {
                            "elementId": "imageToToggle",
                            "isVisible": false
                        },
                        {
                            "elementId": "imageToToggle2",
                            "isVisible": false
                        }
                    ]
                }
            ]
        }
    ]
}