Action.ToggleVisibility #1729

dclaux · 2018-07-20T01:42:09Z

Release	Renderer status	Tasks status
1.2	✔️ .NET (#2209) ✔️ Android (#2208) ✔️ iOS (#2207) ✔️ TS (#2415) ✔️ UWP (#2206)	✔️ Shared (#2205) 🔄 Designer (#2503)

Solves requests

Support dynamically showing/hiding a portion of a card after user interaction (Request: Support dynamically showing/hiding a portion of a card after user interaction #2029)

Examples

Needed

Possible design

Action.ToggleVisibility

Introduce a new Action.ToggleVisibility action type that makes it possible to dynamically show/hide a set of elements in a card as the user clicks on the associated button/UI element. The action is defined as follows:

{
	"type": "Action.ToggleVisibility",
	"id": "abc",
	"targetElements": [
		"id1",
		"id2",
		{ "elementId": "id3", "isVisible": "true" },
		{ "elementId": "id4", "isVisible": "false" }
	]
}

Items in the targetElements array can either be:
- A string, in which case the items represents the id of an element,
- An object with elementId: string and isVisible: boolean properties

When executed, the above action will:
- Toggle the visibility of the elements with Ids "id1" and "id2"
- Make element with Id "id3" visible (even if it already is)
- Make element with Id "id4" invisible (even if it already is)

Action.ToggleVisibility works in conjunction with the isVisible property (see below.)
lly touch the left and right edges of the card, which is not desirable. To compensate, its "padding" property is set to "default."

Open Question: What if an author has two Action.ToggleVisibility actions, and they're each toggling different elements, but they don't want both of their elements shown at once? The author would have to make sure their action hides the elements that the other action showed? Maybe not important though? Tough to know without knowing common use cases.

isVisible property

All element types would support an isVisible property that would make it possible to design cards with elements that are initially hidden. Used in conjunction with the Action.ToggleVisibility action type, it makes it possible to support scenarios where portions of a card can be expanded/collapsed.

Host Config

No changes.

Down-level impact (authors)

High. Down-level clients will display all elements, including ones that should be hidden, leading to potentially unusable cards.

Host burden

No impact. Works for free.

Renderer Requirements

Needed

Auto-generated task status

The text was updated successfully, but these errors were encountered:

andrewleader · 2018-07-20T04:48:39Z

If you're proposing adding Action.ToggleVisibility as an element that card authors can use, that's actually not what Windows wants.

Hosts on Windows want to control the expand/collapse content themselves so they can achieve consistency - they don't want the authors controlling that (other than the ShowCard action).

For example, in notifications, the collapsed view is always just the title/subtitle, and then expanded view adds the hero image, body, and actions. The card author has zero control over this. The host has all the control.

andrewleader · 2018-09-11T23:57:52Z

Hey @dclaux can you share some visual examples of this? Since Outlook has this, just grab some screenshots of an example of how it's being used, that'll help for discussing this! Thanks!

dclaux · 2018-09-12T00:42:36Z

Here is a sample card. It initially renders like this:

The first leg of the trip is clickable. When clicked, the card expands:

Try for yourself by pasting the below payload in Outlook's Card Playground.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Container",
            "selectAction": {
                "type": "Action.ToggleVisibility",
                "targetElements": [
                    "leg1Details"
                ]
            },
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "width": "24px",
                            "items": [
                                {
                                    "type": "Image",
                                    "style": "person",
                                    "backgroundColor": "#0078D7",
                                    "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane_white.png"
                                }
                            ]
                        },
                        {
                            "width": "stretch",
                            "spacing": "small",
                            "verticalContentAlignment": "center",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "**Depart:** Delta Air Lines flight 8471 to Paris"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "ColumnSet",
                    "spacing": "none",
                    "columns": [
                        {
                            "width": "24px",
                            "items": [
                                {
                                    "type": "Image",
                                    "horizontalAlignment": "center",
                                    "width": "1px",
                                    "height": "20px",
                                    "url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png"
                                }
                            ]
                        },
                        {
                            "width": "stretch",
                            "spacing": "small",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Bengaluru, Sun 11/12/2017 1:55 AM, 10 hours 41 minutes",
                                    "isSubtle": true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "id": "leg1Details",
            "isVisible": false,
            "spacing": "none",
            "columns": [
                {
                    "width": "24px",
                    "padding": "none",
                    "backgroundImage": {
                        "url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png",
                        "mode": "repeatVertically",
                        "horizontalAlignment": "center"
                    }
                },
                {
                    "width": "stretch",
                    "spacing": "small",
                    "items": [
                        {
                            "type": "Container",
                            "padding": {
                                "top": "default"
                            },
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "width": 45,
                                            "items": [
                                                {
                                                    "type": "Container",
                                                    "padding": "none",
                                                    "backgroundImage": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
                                                    "items": [
                                                        {
                                                            "type": "Image",
                                                            "horizontalAlignment": "center",
                                                            "url": "http://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "type": "Container",
                                                    "style": "emphasis",
                                                    "spacing": "none",
                                                    "items": [
                                                        {
                                                            "type": "TextBlock",
                                                            "text": "Flight to Paris",
                                                            "wrap": true,
                                                            "size": "extraLarge",
                                                            "weight": "lighter",
                                                            "color": "accent"
                                                        },
                                                        {
                                                            "type": "TextBlock",
                                                            "text": "Delta Air Lines flight 8471",
                                                            "wrap": true,
                                                            "size": "medium",
                                                            "spacing": "small"
                                                        },
                                                        {
                                                            "type": "TextBlock",
                                                            "wrap": true,
                                                            "text": "Confirmation code: ABCDEF",
                                                            "size": "medium",
                                                            "spacing": "none"
                                                        },
                                                        {
                                                            "type": "TextBlock",
                                                            "wrap": true,
                                                            "text": "10 hours 45 minutes",
                                                            "size": "medium",
                                                            "spacing": "none"
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        {
                                            "width": 55,
                                            "spacing": "none",
                                            "padding": "default",
                                            "items": [
                                                {
                                                    "type": "Container",
                                                    "height": "stretch",
                                                    "items": [
                                                        {
                                                            "type": "ColumnSet",
                                                            "columns": [
                                                                {
                                                                    "width": "auto",
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "text": "BLR",
                                                                            "weight": "lighter",
                                                                            "size": "extraLarge"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": "stretch",
                                                                    "verticalContentAlignment": "center",
                                                                    "items": [
                                                                        {
                                                                            "type": "Image",
                                                                            "height": "2px",
                                                                            "width": "10000px",
                                                                            "url": "http://messagecardplayground.azurewebsites.net/assets/graydot2x2.png"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": "auto",
                                                                    "spacing": "small",
                                                                    "verticalContentAlignment": "center",
                                                                    "items": [
                                                                        {
                                                                            "type": "Image",
                                                                            "height": "16px",
                                                                            "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": "auto",
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "text": "CDG",
                                                                            "weight": "lighter",
                                                                            "horizontalAlignment": "right",
                                                                            "size": "extraLarge"
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "type": "ColumnSet",
                                                            "columns": [
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "text": "1:55 AM",
                                                                            "size": "medium"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "text": "8:10 AM",
                                                                            "horizontalAlignment": "right",
                                                                            "size": "medium"
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "type": "ColumnSet",
                                                            "spacing": "none",
                                                            "columns": [
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "isSubtle": true,
                                                                            "wrap": true,
                                                                            "text": "November 12, 2017"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "isSubtle": true,
                                                                            "wrap": true,
                                                                            "text": "November 12, 2017",
                                                                            "horizontalAlignment": "right"
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "type": "ColumnSet",
                                                            "spacing": "none",
                                                            "columns": [
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "isSubtle": true,
                                                                            "text": "Bengaluru"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "width": 1,
                                                                    "items": [
                                                                        {
                                                                            "type": "TextBlock",
                                                                            "isSubtle": true,
                                                                            "text": "Paris",
                                                                            "horizontalAlignment": "right"
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "type": "ColumnSet",
                                                    "horizontalAlignment": "right",
                                                    "separator": true,
                                                    "spacing": "large",
                                                    "columns": [
                                                        {
                                                            "width": "auto",
                                                            "selectAction": {
                                                                "type": "Action.OpenUrl",
                                                                "url": "http://www.microsoft.com"
                                                            },
                                                            "items": [
                                                                {
                                                                    "type": "ColumnSet",
                                                                    "columns": [
                                                                        {
                                                                            "width": "auto",
                                                                            "verticalContentyAlignment": "center",
                                                                            "items": [
                                                                                {
                                                                                    "type": "Image",
                                                                                    "height": "16px",
                                                                                    "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane.png"
                                                                                }
                                                                            ]
                                                                        },
                                                                        {
                                                                            "width": "auto",
                                                                            "spacing": "small",
                                                                            "items": [
                                                                                {
                                                                                    "type": "TextBlock",
                                                                                    "text": "Check in"
                                                                                }
                                                                            ]
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "width": "auto",
                                                            "spacing": "large",
                                                            "selectAction": {
                                                                "type": "Action.OpenUrl",
                                                                "url": "http://www.microsoft.com"
                                                            },
                                                            "items": [
                                                                {
                                                                    "type": "ColumnSet",
                                                                    "columns": [
                                                                        {
                                                                            "width": "auto",
                                                                            "verticalContentyAlignment": "center",
                                                                            "items": [
                                                                                {
                                                                                    "type": "Image",
                                                                                    "height": "16px",
                                                                                    "url": "http://messagecardplayground.azurewebsites.net/assets/calendaricon.png"
                                                                                }
                                                                            ]
                                                                        },
                                                                        {
                                                                            "width": "auto",
                                                                            "spacing": "small",
                                                                            "items": [
                                                                                {
                                                                                    "type": "TextBlock",
                                                                                    "text": "View in Calendar"
                                                                                }
                                                                            ]
                                                                        }
                                                                    ]
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "none",
            "columns": [
                {
                    "width": "24px",
                    "items": [
                        {
                            "type": "Image",
                            "height": "20px",
                            "width": "1px",
                            "horizontalAlignment": "center",
                            "url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "none",
            "columns": [
                {
                    "width": "24px",
                    "items": [
                        {
                            "type": "Image",
                            "style": "person",
                            "backgroundColor": "#0078D7",
                            "url": "http://messagecardplayground.azurewebsites.net/assets/smallairplane_white.png"
                        }
                    ]
                },
                {
                    "width": "stretch",
                    "spacing": "small",
                    "verticalContentAlignment": "center",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "**Depart:** Delta Air Lines flight 8471 to Paris"
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "none",
            "columns": [
                {
                    "width": "24px",
                    "items": [
                        {
                            "type": "Image",
                            "horizontalAlignment": "center",
                            "width": "1px",
                            "height": "20px",
                            "url": "http://messagecardplayground.azurewebsites.net/assets/palebluedot1x1.png"
                        }
                    ]
                },
                {
                    "width": "stretch",
                    "spacing": "small",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Bengaluru, Sun 11/12/2017 1:55 AM, 10 hours 41 minutes",
                            "isSubtle": true
                        }
                    ]
                }
            ]
        }
    ]
}

manuelschlegel · 2019-02-22T16:49:05Z

Is it possible to use the property isVisible in an Action.HTTP request for Actionable Messages? E.g. adding {{element.isVisible}} to the body of the request?

dclaux · 2019-02-22T17:25:09Z

@manuelschlegel no that is currently not possible.

shalinijoshi19 · 2019-04-26T17:09:52Z

Closing. Documentation is being tracked separately.

Spec #1729

karun19 · 2023-07-21T07:58:05Z

Can you please check this issue related to this feature,

I have Power Virtual Agent bot running on Teams. Images are not being displayed(rather displayed as hyperlinks) under accordion in adaptive card. Same content displays images if it is rendered through simple message.

Content containing image rendered through accordion,

Content containing images rendered through simple message,

Adaptive card JSON with accordion is as below,

{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 1",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto",
"isVisible": false
},
{
"type": "Column",
"id": "chevronUp1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
}
},
{
"type": "Container",
"id": "cardContent1",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 1 View Article \n\n### Introduction\n\nA pivot table is a table of grouped values that aggregates the individual items of a more extensive table within one or more discrete categories.\n\n### Instructions\n\n## How to create a PivotTable in Excel for Windows\n\n1. Select the cells you want to create a PivotTable from.\n\n 1. Note: Your data shouldn't have any empty rows or columns. It must have only a single-row heading.\n2. Select Insert > PivotTable.\n3. ](https://support.content.office.net/en-us/media/d9736d3a-65b2-40d4-8715-3c814bdf464b.png)/)n4. Under Choose the data that you want to analyze, select Select a table or range. \n5. ](https://support.content.office.net/en-us/media/04bea9cf-04a3-403d-8a37-793241c177d2.png)/)n6. In Table/Range, verify the cell range.\n7. Under Choose where you want the PivotTable report to be placed, select New worksheet to place the PivotTable in a new worksheet or Existing worksheet and then select the location you want the PivotTable to appear.\n8. Select OK.",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 2",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown2",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp2",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
}
},
{
"type": "Container",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 2",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 3",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown3",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp3",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
}
},
{
"type": "Container",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 3",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}

dclaux added Area-Schema Area-Renderers Status-Ready for Review labels Jul 20, 2018

andrewleader changed the title ~~Support dynamically showing/hiding a portion of a card as the user clicks on a UI affordance~~ Support dynamically showing/hiding a portion of a card after user interaction Sep 18, 2018

dclaux mentioned this issue Sep 19, 2018

Add support for expanding/collapsing a card by clicking "See all"/" See lees" #737

Closed

andrewleader added Epic Proposal-Approved and removed Proposal-Ready for Review labels Sep 19, 2018

andrewleader added the Spec-Needed label Oct 1, 2018

andrewleader changed the title ~~Support dynamically showing/hiding a portion of a card after user interaction~~ Spec draft: Action.ToggleVisibility Oct 11, 2018

andrewleader added the Spec label Oct 12, 2018

andrewleader mentioned this issue Feb 20, 2019

Document 1.2 features #2407

Closed

13 tasks

andrewleader changed the title ~~Spec draft: Action.ToggleVisibility~~ Action.ToggleVisibility Feb 20, 2019

This was referenced Feb 20, 2019

[Shared] Action.ToggleVisibility #2205

Closed

[.NET] Action.ToggleVisibility #2209

Closed

[Android] Action.ToggleVisibility #2208

Closed

[iOS] Action.ToggleVisibility #2207

Closed

[UWP] Action.ToggleVisibility #2206

Closed

andrewleader added the zTools-NeedsRendererSubtasks label Feb 20, 2019

andrewleader mentioned this issue Feb 20, 2019

[TS] Action.ToggleVisibility #2415

Closed

andrewleader removed the zTools-NeedsRendererSubtasks label Feb 20, 2019

matthidinger mentioned this issue Feb 21, 2019

🎁 1.2 Feature List (Shipped June 2019) #2444

Closed

andrewleader added the zTools-NeedsRendererSubtasks label Mar 5, 2019

andrewleader mentioned this issue Mar 5, 2019

[Designer] Action.ToggleVisibility #2503

Closed

andrewleader removed the zTools-NeedsRendererSubtasks label Mar 5, 2019

shalinijoshi19 removed the Spec-Needed label Apr 26, 2019

shalinijoshi19 closed this as completed Apr 26, 2019

paulcam206 added a commit that referenced this issue May 29, 2019

[Schema] Add Action.ToggleVisibility

74a04e2

Spec #1729

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Action.ToggleVisibility #1729

Action.ToggleVisibility #1729

dclaux commented Jul 20, 2018 •

edited by btam

Loading

andrewleader commented Jul 20, 2018

andrewleader commented Sep 11, 2018

dclaux commented Sep 12, 2018 •

edited

Loading

manuelschlegel commented Feb 22, 2019 •

edited

Loading

dclaux commented Feb 22, 2019

shalinijoshi19 commented Apr 26, 2019

karun19 commented Jul 21, 2023 •

edited

Loading

Action.ToggleVisibility #1729

Action.ToggleVisibility #1729

Comments

dclaux commented Jul 20, 2018 • edited by btam Loading

Solves requests

Examples

Possible design

Action.ToggleVisibility

isVisible property

Host Config

Down-level impact (authors)

Host burden

Renderer Requirements

Auto-generated task status

andrewleader commented Jul 20, 2018

andrewleader commented Sep 11, 2018

dclaux commented Sep 12, 2018 • edited Loading

manuelschlegel commented Feb 22, 2019 • edited Loading

dclaux commented Feb 22, 2019

shalinijoshi19 commented Apr 26, 2019

karun19 commented Jul 21, 2023 • edited Loading

dclaux commented Jul 20, 2018 •

edited by btam

Loading

dclaux commented Sep 12, 2018 •

edited

Loading

manuelschlegel commented Feb 22, 2019 •

edited

Loading

karun19 commented Jul 21, 2023 •

edited

Loading