Search code examples
adaptive-cards

Action.ShowCard open by default

I reviewed various resources on git for adaptive cards as well as reviewing the documentation and this was not obvious.

I would like to have a card that is expanded by default vs it being closed to be toggled open.

I have to leverage only 1.0 and 1.1 capabilities due to support in platform developing on.

Solution

  • You cannot do this in < 1.2.

    Once you're able to use 1.2, you can use Action.ToggleVisibility. Here's an example card:

    {
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Everything in the blue container will stay when the button is clicked.",
                    "wrap": true
                }
            ],
            "spacing": "ExtraLarge",
            "separator": true,
            "style": "accent"
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Everything in the green container will hide when the button is clicked",
                    "wrap": true
                },
                {
                    "type": "Image",
                    "altText": "",
                    "url": "https://docs.botframework.com/static/devportal/client/images/bot-framework-default.png"
                }
            ],
            "spacing": "None",
            "horizontalAlignment": "Center",
            "style": "good",
            "selectAction": {
                "type": "Action.ToggleVisibility",
                "targetElements": [
                    "hide"
                ]
            },
            "id": "hide"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.ToggleVisibility",
                    "title": "Hide the Green Section",
                    "targetElements": [
                        "hide"
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

    You can paste that JSON into the "Card Payload Editor" of Designer, then click "Preview Mode" to try it.

    Note that it's up to the client to support this feature and not just the card schema.

    As you cannot use 1.2, an alternative might be to:

    1. Create a card with a Submit action
    2. When the Submit action is clicked, have the client replace the card with one that does not contain the section you want hidden.

    In Bot Framework, you'd use UpdateActivity() to accomplish #2 on channels that support it (any in which a regular user can edit a message, generally).

    This isn't ideal, but it's about all you can do with < 1.2.