dclaux commented 6 years ago

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 (#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

[x] Shared
[ ] Designer
[x] .NET
[x] Android
[x] iOS
[x] TS
[x] UWP

andrewleader commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

@manuelschlegel no that is currently not possible.

shalinijoshi19 commented 5 years ago

Closing. Documentation is being tracked separately.

karun19 commented 1 year ago

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,

Capture

Content containing images rendered through simple message,

Capture

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. Pivot Table ](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." }

microsoft / AdaptiveCards

Action.ToggleVisibility #1729

Solves requests

Examples

Possible design

Action.ToggleVisibility

isVisible property

Host Config

Down-level impact (authors)

Host burden

Renderer Requirements

Auto-generated task status