Forum Discussion

nagajeyanthi's avatar
nagajeyanthi
Copper Contributor
Oct 16, 2023

Adaptive Card Issue

Hi, 

We need to know the difference between the below-mentioned adaptive cards.

Not Working Card:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Here's your most recent requests",
      "wrap": true,
      "weight": "Bolder",
      "horizontalAlignment": "Center",
      "size": "Large",
      "color": "Default"
    },
    {
      "type": "Image",
      "url": "https://www.colorhexa.com/f9a31c.png",
      "width": "1000px",
      "height": "10px",
      "horizontalAlignment": "Right"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Container",
              "items": [
                {
                  "type": "ColumnSet",
                  "columns": [
                    {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                        {
                          "type": "Container",
                          "items": [
                            {
                              "type": "TextBlock",
                              "text": "${title}",
                              "weight": "Bolder",
                              "color": "Dark",
                              "horizontalAlignment": "Center"
                            }
                          ],
                          "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                              "action": "ticket",
                              "id": "${value}"
                            }
                          },
                          "minHeight": "50px",
                          "verticalContentAlignment": "Center",
                          "style": "accent",
                          "$data": "${getTicketsList}"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ],
          "id": "firstOne",
          "verticalContentAlignment": "Bottom"
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Main Menu",
          "wrap": true,
          "weight": "Bolder",
          "color": "Default",
          "horizontalAlignment": "Center"
        }
      ],
      "selectAction": {
        "type": "Action.Submit",
        "data": {
          "action": "mainmenu"
        }
      },
      "style": "accent"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.3",
  "msteams": {
    "width": "Full"
  }
}

 Working Card:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Here are your most recent requests",
      "wrap": true,
      "weight": "Bolder",
      "horizontalAlignment": "Center",
      "size": "Large",
      "color": "Default",
      "id": "0"
    },
    {
      "type": "Image",
      "url": "https://www.colorhexa.com/f9a31c.png",
      "width": "1000px",
      "height": "10px",
      "horizontalAlignment": "Right",
      "id": "1"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Container",
              "items": [
                {
                  "type": "ColumnSet",
                  "columns": [
                    {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                        {
                          "type": "Container",
                          "items": [
                            {
                              "type": "TextBlock",
                              "text": "${title}",
                              "weight": "Bolder",
                              "color": "Dark",
                              "horizontalAlignment": "Center"
                            }
                          ],
                          "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                              "action": "ticket",
                              "id": "${value}"
                            }
                          },
                          "minHeight": "50px",
                          "verticalContentAlignment": "Center",
                          "style": "accent"
                        }
                      ]
                    }
                  ]
                }
              ],
              "$data": "${subArray(getTicketsList,0,4)}"
            }
          ],
          "id": "firstOne",
          "verticalContentAlignment": "Bottom"
        }
      ],
      "id": "2"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Older Requests:",
          "wrap": true,
          "weight": "Bolder",
          "color": "Default"
        },
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "Input.ChoiceSet",
                  "choices": [
                    {
                      "$data": "${skip(getTicketsList,4)}",
                      "title": "${title}",
                      "value": "${value}"
                    }
                  ],
                  "placeholder": "Select a request",
                  "id": "id",
                  "spacing": "Small"
                }
              ],
              "horizontalAlignment": "Left",
              "verticalContentAlignment": "Center"
            },
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Chevron_right.svg/1200px-Chevron_right.svg.png",
                  "width": "17px"
                }
              ],
              "verticalContentAlignment": "Center",
              "horizontalAlignment": "Center",
              "selectAction": {
                "type": "Action.Submit",
                "data": {
                  "action": "ticket"
                }
              },
              "style": "accent"
            }
          ],
          "spacing": "None"
        }
      ],
      "$when": "${not(empty(skip(getTicketsList,4)))}",
      "id": "3"
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Main Menu",
          "wrap": true,
          "weight": "Bolder",
          "color": "Default",
          "horizontalAlignment": "Center"
        }
      ],
      "selectAction": {
        "type": "Action.Submit",
        "data": {
          "action": "mainmenu"
        }
      },
      "spacing": "default",
      "style": "accent",
      "id": "4"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4"
}
    • Meghana-MSFT's avatar
      Meghana-MSFT
      Icon for Microsoft rankMicrosoft

      nagajeyanthi - Could you please let us know what you mean by not working card? We see both cards are rendering like below. Cards are rendering differently because the JSON is different -

       

      Not working card - 

       

      Working card - 

       

Share

Resources