Search code examples
jsonbotschatbotadaptive-cards

Adaptive Card inside Adaptive Card for FAQ's


I am thinking of creating an adaptive card that is for FAQ's. So there is a card with an Action.Showcard with title FAQs. Once a user clicks on FAQs, the card should expand to show 5 questions. A question in itself is an adaptive card so when a user clicks on a questions, the card opens to show the answer.

I cannot manage to have a card inside a card. Here is my JSON that I built using Adaptive Card designer

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Hi I am a ChatBot."
        },
        {
            "type": "TextBlock",
            "text": "Look at FAQs below.",
            "wrap": true
        }
    ],
    "actions": [
        {
            "type": "Action.ShowCard",
            "title": "FAQs",
            "card": {
                "type": "AdaptiveCard",
                "style": "emphasis",
                "body": [
                    {
                        "type": "TextBlock",
                        "text": "How quickly can we close?"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        },
        {
            "type": "Action.ShowCard",
            "title": "Comment",
            "card": {
                "type": "AdaptiveCard",
                "style": "emphasis",
                "body": [
                    {
                        "type": "Input.Text",
                        "id": "comment",
                        "placeholder": "Enter your comment",
                        "isMultiline": true
                    }
                ],
                "actions": [
                    {
                        "type": "Action.Submit",
                        "title": "OK"
                    }
                ],
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

When I put Action.ShowCard inside an Action.ShowCard tag it gives me an error and changes the Action.ShowCard to AdpativeCard. Can someone show me the structure for such a design. It will be helpful because I need to expand these FAQs.


Solution

  • Perhaps I'm not understanding your problem, but I was able to create your desired structure in the designer without issue:

    {
        "type": "AdaptiveCard",
        "body": [
            {
                "type": "TextBlock",
                "size": "Medium",
                "weight": "Bolder",
                "text": "Hi I am a ChatBot."
            },
            {
                "type": "TextBlock",
                "text": "Look at FAQs below.",
                "wrap": true
            }
        ],
        "actions": [
            {
                "type": "Action.ShowCard",
                "title": "FAQs",
                "card": {
                    "type": "AdaptiveCard",
                    "style": "emphasis",
                    "actions": [
                        {
                            "type": "Action.ShowCard",
                            "title": "How quickly can we close?",
                            "card": {
                                "type": "AdaptiveCard",
                                "style": "emphasis",
                                "body": [
                                    {
                                        "type": "TextBlock",
                                        "text": "Never"
                                    }
                                ],
                                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                            }
                        },
                        {
                            "type": "Action.ShowCard",
                            "title": "Second question",
                            "card": {
                                "type": "AdaptiveCard",
                                "style": "emphasis",
                                "body": [
                                    {
                                        "type": "TextBlock",
                                        "text": "Second answer"
                                    }
                                ],
                                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                            }
                        }
                    ],
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                }
            },
            {
                "type": "Action.ShowCard",
                "title": "Comment",
                "card": {
                    "type": "AdaptiveCard",
                    "style": "emphasis",
                    "body": [
                        {
                            "type": "Input.Text",
                            "id": "comment",
                            "placeholder": "Enter your comment",
                            "isMultiline": true
                        }
                    ],
                    "actions": [
                        {
                            "type": "Action.Submit",
                            "title": "OK"
                        }
                    ],
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                }
            }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.0"
    }