BotFramework Adaptive Cards - Container Actions are not Rendered

750 views Asked by At

How can I add actions for containers? According to the documentation Container type has an "actions" object, but when testing the card it in the adaptive cards visualizer or in the bot-framework emulator no button is displayed. Attached an example for the kind of card I'm trying to generate.

Thanks for your help.

{
    "type": "AdaptiveCard",
    "body": [
    {

        "style":"normal",
        "type": "Container",
        "separation" : "strong",
        "actions": [
            {
              "type": "Action.OpenUrl",
              "url": "http://foo.bar.com",
              "title": "adaptivecards1"
            }
            ],
        "items": [
            {
                "type": "ColumnSet",
                "separation": "strong",
                "columns": [
                    {
                        "type": "Column",
                        "size":1,
                        "items": [
                            {
                                "type": "TextBlock",
                                "text": "Title",
                                "size": "large",
                                "isSubtle": true
                            },
                            {
                                "type": "TextBlock",
                                "text": "Model: ABC",
                                "size": "small"
                            }
                        ]
                    },
                    {
                        "type": "Column",
                        "size": "1",
                        "items": [
                            {
                                "type": "TextBlock",
                                "text": " "
                            },
                            {
                                "type": "Image",
                                "url": "https://path/to/image.jpg",
                                "size": "large",
                                "horizontalAlignment" :"right"
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {

        "style":"normal",
        "type": "Container",
        "separation" : "strong",
        "actions": [
            {
              "type": "Action. OpenUrl",
              "url": "http://foo.bar.com",
              "title": "adaptivecards2"
            }
            ],
        "items": [
            {
                "type": "ColumnSet",
                "separation": "strong",
                "columns": [
                    {
                        "type": "Column",
                        "size":1,
                        "items": [
                            {
                                "type": "TextBlock",
                                "text": "Another Title",
                                "size": "large",
                                "isSubtle": true
                            },
                            {
                                "type": "TextBlock",
                                "text": "Model: XYZ",
                                "size": "small"
                            }                           ]
                    },
                    {
                        "type": "Column",
                        "size": "1",
                        "items": [
                            {
                                "type": "TextBlock",
                                "text": " "
                            },
                            {
                                "type": "Image",
                                "url": "https://path/to/other/image.jpg",
                                "size": "large",
                                "horizontalAlignment" :"right"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]}
1

There are 1 answers

0
Ezequiel Jadib On BEST ANSWER

Per this GitHub issue, it seems that there is an error in the documentation and that the actions property doesn't exist on Container.

Instead, you should add an item of type ActionSet to your items array, with the list of actions.

Following your sample, it should look like:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "style": "normal",
            "type": "Container",
            "separation": "strong",
            "items": [
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "url": "http://foo.bar.com",
                            "title": "adaptivecards1"
                        }
                    ]
                },
                {
                    "type": "ColumnSet",
                    "separation": "strong",
                    "columns": [
                        {
                            "type": "Column",
                            "size": 1,
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Title",
                                    "size": "large",
                                    "isSubtle": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Model: ABC",
                                    "size": "small"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "size": "1",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": " "
                                },
                                {
                                    "type": "Image",
                                    "url": "https://path/to/image.jpg",
                                    "size": "large",
                                    "horizontalAlignment": "right"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "style": "normal",
            "type": "Container",
            "separation": "strong",
            "items": [
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "url": "http://foo.bar.com",
                            "title": "adaptivecards2"
                        }
                    ]
                },
                {
                    "type": "ColumnSet",
                    "separation": "strong",
                    "columns": [
                        {
                            "type": "Column",
                            "size": 1,
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Another Title",
                                    "size": "large",
                                    "isSubtle": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Model: XYZ",
                                    "size": "small"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "size": "1",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": " "
                                },
                                {
                                    "type": "Image",
                                    "url": "https://path/to/other/image.jpg",
                                    "size": "large",
                                    "horizontalAlignment": "right"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

enter image description here

This is also discussed here.