A certain adaptive card crashes my webchat

Question

I'm currently working on making some dynamically generated cards, but for some reason when I try to add this one as an adaptive card the whole webchat crashes.

I've tried passing the JSON as an object without double quotes, as a string with double quotes, and as an object with double quotes.

  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Container",
      "id": "header",
      "items": [
        {
          "type": "ColumnSet",
          "id": "headerColSet",
          "columns": [
            {
              "type": "TextBlock",
              "id": "actionTextCol",
              "items": [
                {
                  "type": "TextBlock",
                  "id": "actionText",
                  "text": "Action Here!",
                  "horizontalAlignment": "Right"
                }
              ],
              "width": "stretch"
            },
            {
              "type": "TextBlock",
              "id": "actionTextCol",
              "items": [
                {
                  "type": "TextBlock",
                  "id": "actionText",
                  "text": "Action Here!",
                  "horizontalAlignment": "Right"
                }
              ],
              "width": "stretch"
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "id": "columnSet1",
      "columns": [
        {
          "type": "Column",
          "id": "columnIndex0",
          "items": [
            {
              "type": "TextBlock",
              "id": "textOne1",
              "text": "Test text One"
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "id": "columnIndex0",
          "items": [
            {
              "type": "TextBlock",
              "id": "textTwo1",
              "text": "Sec Text One"
            }
          ],
          "width": "stretch"
        }
      ]
    },
    {
      "type": "ColumnSet",
      "id": "columnSet2",
      "columns": [
        {
          "type": "Column",
          "id": "columnIndex1",
          "items": [
            {
              "type": "TextBlock",
              "id": "textOne2",
              "text": "Test text 2"
            }
          ],
          "width": "stretch"
        },
        {
          "type": "Column",
          "id": "columnIndex1",
          "items": [
            {
              "type": "TextBlock",
              "id": "textTwo2",
              "text": "Sec Text 2"
            }
          ],
          "width": "stretch"
        }
      ]
    },
    {
      "type": "Container",
      "id": "footer",
      "items": [],
      "separator": true
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
    }

This JSON should be able to be attached to an adaptive card in the web chat, but instead the whole screen goes white and throws these errors

card-elements.js:2330 Uncaught TypeError: Cannot read property 'internalValidateProperties' of null

index.js:1375 uncaught at observeActivity TypeError: Cannot read property 'internalValidateProperties' of null

Answer 1

There seems to be a lot of things wrong with your Adaptive Card, most notably ColumnSet is supposed to have an array of objects with the type property set to Column. Also, TextBlocks do not have an items attribute. I would highly recommend that you use the Adaptive Card Designer to create your cards. Also take a look at the Adaptive Card Schema Explorer.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "Container",
            "id": "header",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "New TextBlock"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Hope this helps!