Action Messageback card not rendering

Question

I am trying to post a Messageback Adaptive card but I am below getting error in emulator: The card could not be rendered. It is either malformed or uses features not supported by this host.

I am using AdaptiveCards 1.2.2 version. I am using C# to post this adaptive card but I am not able to figure out the issue.

My Json File:

{
  "type": "AdaptiveCard",
  "selectAction": {
    "type": "Action.Submit"
  },
  "body": [

    {
      "type": "TextBlock",
      "text": "1:1 with John Doe",
      "weight": "Bolder"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Image",
              "url": "https://images.idgesg.net/images/article/2019/04/google-calendar-android-100794956-large.jpg",
              "altText": "Calendar",
              "size": "small"


            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "Tomorrow, 30 May"
            }
          ],
          "width": "stretch"
        }
      ]
    },
    {
      "type": "ColumnSet",

      "columns": [
        {
          "type": "Column",
          "items": [
            {
              "type": "Image",
              "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
              "altText": "Calendar",
              "height": "20px"
            }
          ],
          "width": "auto"
        },
        {
          "type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "text": "John Doe",

              "spacing": "Medium"
            }
          ],
          "width": "stretch"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Slots available - **1 hr duration**",
      "separator": true,
      "spacing": "Medium",
      "isSubtle": true
    },



    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "items": [
            {

              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "11:00 AM",
                  "data": {
                    "msteams": {
                      "type": "messageBack",
                      "displayText": "11:00 AM",
                      "text": "text to bots",
                      "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
                    }
                  }
                }
              ]
            }
          ],
          "width": "auto"
        },

    {

      "actions": [
        {
          "type": "Action.Submit",
          "title": "Cancel",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Cancel",
              "text": "text to bots",
              "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
            }
          }
        },
        {
          "type": "Action.Submit",
          "title": "Confirm",
          "data": {
            "msteams": {
              "type": "messageBack",
              "displayText": "Confirm",
              "text": "text to bots",
              "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
            }
          }
        }
      ]

  }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

score 0 · Answer 1 · answered Sep 11 '19 at 19:02

A great way to test your Adaptive Cards is to use the Adaptive Card Designer or the card editor in App Studio in Microsoft Teams. If a preview isn't rendered then there's something wrong with your card.

In your case, you say you want to use Adaptive Cards 1.2.2 but you're including "version": "1.0" in your JSON. You might want to say "version": "1.2" instead, but keep in mind that the higher the version of your Adaptive Card the fewer clients will be able to render it.

More importantly, you're putting an actions property in both columns and column sets and neither of those have an actions property. Please refer to the schema to see what elements have what properties. You might mean to use an action set (a 1.2 feature), or you might just want to use the actions property of the card itself outside of the card's body.

More importantly still, you have more opening brackets than closing brackets and so your JSON is invalid. I suspect you forgot to close your last column set and its columns array. Please use an editor like Visual Studio Code to automatically format your JSON and make sure it's valid. It's also good etiquette to correctly format your JSON in your Stack Overflow question so that other people can read it without formatting it for you.

Please read my latest blog post for more information about Adaptive Cards and using them with the Microsoft Bot Framework.

Is there a way I can have columns inside actions so that I can have actions like submit and cancel in 2 different columns? — Anu, Sep 12 '19 at 07:28
@Anu - You cannot put columns inside actions, and that arguably makes no sense. As stated in my answer, if you're using a client that supports Adaptive Cards 1.2 then you can use action sets and you can put those in columns. Please remember to upvote and accept this answer because it answers the question you asked. — Kyle Delaney, Sep 12 '19 at 17:53

Action Messageback card not rendering

1 Answers1