Forum Discussion

Tatsiana1808's avatar
Tatsiana1808
Copper Contributor
Jun 25, 2024

Adaptive card 'Toggle visibility' function stopped working in the New MS Teams

Toggle visibility function in adaptive cards stopped working in the new version of MS Teams.

The issue is not reproducible in the older version of MS Teams.

It can be reproduced in developer portal with the following card structure example:

{
    "type""AdaptiveCard",
    "version""1.4",
    "body": [
        {
            "type""Container",
            "items": [
                {
                    "type""TextBlock",
                    "text""Request",
                    "size""Large",
                    "wrap"true,
                    "weight""Bolder",
                    "spacing""Small",
                    "horizontalAlignment""Center"
                },
                {
                    "type""TextBlock",
                    "text""Please provide your contact information",
                    "wrap"true,
                    "spacing""Medium"
                },
                {
                    "type""Container",
                    "items": [
                        {
                            "type""ColumnSet",
                            "columns": [
                                {
                                    "type""Column",
                                    "width""stretch",
                                    "items": [
                                        {
                                            "type""TextBlock",
                                            "text""Contact Data",
                                            "wrap"true,
                                            "style""default",
                                            "fontType""Default",
                                            "size""Medium",
                                            "weight""Bolder"
                                        }
                                    ]
                                },
                                {
                                    "type""Column",
                                    "width""20px",
                                    "items": [
                                        {
                                            "type""Image",
                                            "url""https://adaptivecards.io/content/up.png",
                                            "id""chevronUp1"
                                        },
                                        {
                                            "type""Image",
                                            "url""https://adaptivecards.io/content/down.png",
                                            "id""chevronDown1",
                                            "isVisible"false
                                        }
                                    ],
                                    "selectAction": {
                                        "type""Action.ToggleVisibility",
                                        "targetElements": [
                                            "contactData",
                                            "chevronDown1",
                                            "chevronUp1"
                                        ]
                                    }
                                }
                            ]
                        },
                        {
                            "type""Container",
                            "items": [
                                {
                                    "type""Input.Text",
                                    "id""rt_user_first_name",
                                    "errorMessage""Please input contact person first name",
                                    "label""First Name",
                                    "spacing""Small",
                                    "value""{{memory.rt_user_first_name}}",
                                    "isRequired"true
                                },
                                {
                                    "type""Input.Text",
                                    "label""Last Name",
                                    "id""rt_user_last_name",
                                    "errorMessage""Please input contact person last name",
                                    "spacing""Small",
                                    "value""{{memory.rt_user_last_name}}",
                                    "isRequired"true
                                },
                                {
                                    "spacing""Small",
                                    "regex""^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$",
                                    "isRequired"true,
                                    "value""{{memory.rt_user_email}}",
                                    "placeholder""email address removed for privacy reasons",
                                    "label""Email",
                                    "type""Input.Text",
                                    "id""rt_user_email",
                                    "errorMessage""Please provide the contact person email"
                                },
                                {
                                    "spacing""Small",
                                    "regex""^[+][0-9]{10,12}$",
                                    "maxLength"13,
                                    "value""{{memory.rt_user_phone_number}}",
                                    "placeholder""+1",
                                    "label""Phone Number",
                                    "type""Input.Text",
                                    "id""rt_user_phone_number",
                                    "errorMessage""Asking you to kindly enter the phone number in the international format, starting with +, then the country code, operator code and your local number."
                                }
                            ],
                            "id""contactData",
                            "spacing""Small"
                        }
                    ]
                }
            ]
        },
        {
            "type""Container",
            "items": [
                {
                    "type""ActionSet",
                    "actions": [
                        {
                            "type""Action.Submit",
                            "title""Submit"
                        }
                    ]
                }
            ]
        }
    ]
}
  • Tatsiana1808 - 

     

    In the given Adaptive Card JSON, the Toggle Visibility action is not correctly implemented.

    PFB the correct Card JSON:

    {
        "type": "AdaptiveCard",
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.5",
        "body": [
            {
                "type": "Container",
                "items": [
    			    {
                        "type": "TextBlock",
                        "text": "Request",
                        "size": "Large",
                        "wrap": true,
                        "weight": "Bolder",
                        "spacing": "Small",
                        "horizontalAlignment": "Center"
                    },
                    {
                        "type": "TextBlock",
                        "text": "Please provide your contact information",
                        "wrap": true,
                        "spacing": "Medium"
                    },
                    {
                        "type": "Container",
                        "items": [
                            {
                                "type": "ColumnSet",
                                "columns": [
                                    {
                                        "type": "Column",
                                        "width": "stretch",
                                        "items": [
                                            {
                                                "type": "TextBlock",
                                                "text": "Contact Data",
                                                "wrap": true,
                                                "style": "default",
                                                "fontType": "Default",
                                                "size": "Medium",
                                                "weight": "Bolder"
                                            }
                                        ]
                                    },
                                    {
                                        "type": "Column",
                                        "width": "20px",
                                        "items": [
                                            {
                                                "type": "Image",
                                                "url": "https://adaptivecards.io/content/up.png",
                                                "id": "chevronUp1",
                                                "selectAction": {
                                                    "type": "Action.ToggleVisibility",
                                                    "targetElements": [
                                                        {
                                                            "elementId": "chevronDown1",
                                                            "isVisible": true
                                                        },
                                                        {
                                                            "elementId": "chevronUp1",
                                                            "isVisible": false
                                                        },
                                                        {
                                                            "elementId": "contactData",
                                                            "isVisible": false
                                                        }
                                                    ]
                                                }
                                            },
                                            {
                                                "type": "Image",
                                                "url": "https://adaptivecards.io/content/down.png",
                                                "id": "chevronDown1",
                                                "isVisible": false,
                                                "selectAction": {
                                                    "type": "Action.ToggleVisibility",
                                                    "targetElements": [
                                                        {
                                                            "elementId": "chevronDown1",
                                                            "isVisible": false
                                                        },
                                                        {
                                                            "elementId": "chevronUp1",
                                                            "isVisible": true
                                                        },
                                                        {
                                                            "elementId": "contactData",
                                                            "isVisible": true
                                                        }
                                                    ]
                                                }
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "type": "Container",
                                "items": [
                                    {
                                        "type": "Input.Text",
                                        "id": "rt_user_first_name",
                                        "errorMessage": "Please input contact person first name",
                                        "label": "First Name",
                                        "spacing": "Small",
                                        "value": "{{memory.rt_user_first_name}}",
                                        "isRequired": true
                                    },
                                    {
                                        "type": "Input.Text",
                                        "label": "Last Name",
                                        "id": "rt_user_last_name",
                                        "errorMessage": "Please input contact person last name",
                                        "spacing": "Small",
                                        "value": "{{memory.rt_user_last_name}}",
                                        "isRequired": true
                                    },
                                    {
                                        "spacing": "Small",
                                        "regex": "^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$",
                                        "isRequired": true,
                                        "value": "{{memory.rt_user_email}}",
                                        "placeholder": "email address removed for privacy reasons",
                                        "label": "Email",
                                        "type": "Input.Text",
                                        "id": "rt_user_email",
                                        "errorMessage": "Please provide the contact person email"
                                    },
                                    {
                                        "spacing": "Small",
                                        "regex": "^[+][0-9]{10,12}$",
                                        "maxLength": 13,
                                        "value": "{{memory.rt_user_phone_number}}",
                                        "placeholder": "+1",
                                        "label": "Phone Number",
                                        "type": "Input.Text",
                                        "id": "rt_user_phone_number",
                                        "errorMessage": "Asking you to kindly enter the phone number in the international format, starting with +, then the country code, operator code and your local number."
                                    }
                                ],
                                "id": "contactData",
                                "spacing": "Small"
                            }
                        ]
                    }
                ]
            },
    		        {
                "type": "Container",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Submit"
                            }
                        ]
                    }
                ]
            }
        ]
    }

     

     

    Thanks, 

    Prasad Das

    ------------------------------------------------------------------------------------------ 

    If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

    • Tatsiana1808's avatar
      Tatsiana1808
      Copper Contributor

      Prasad_Das-MSFT 

      Hi Prasad,

      Thanks for reply.
      Our realization is based on the official documentation and examples for adaptive cards development framework.

      https://adaptivecards.io/explorer/Action.ToggleVisibility.html

      https://adaptivecards.io/samples/ExpenseReport.html

       

       

      And it worked as is a week ago. Also it still works in the older version of MS Teams.
      Functionality is implemented and used in many productive scenarios of our customers and rework as per your example will consume a lot of efforts. Therefore, we would appreciate if the functionality could be restored to work as per official Microsoft documentation.


      Thank you,
      Best regards,
      Tatsiana

    • Tatsiana1808's avatar
      Tatsiana1808
      Copper Contributor

      Prasad_Das-MSFT 

      We have a lot of cases implemented according to the documentation, where toggle visibility stopped working. Kindly advise, will the function be restored to work as per documentation?

      Or the way you are showing - is the only one supported from now onwards? 

      Thank you,

      Kind regards, Tatsiana

       

      • Prasad_Das-MSFT's avatar
        Prasad_Das-MSFT
        Icon for Microsoft rankMicrosoft

        Tatsiana1808 - We have shared this feedback with engineering team. Once we get any further info, we will notify you in this thread. Thanks!

Resources