Adaptive Card Issue

Copper Contributor

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"
}
7 Replies
We will check this and get back to you.

@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 - 

MeghanaMSFT_0-1697461098918.png

 

Working card - 

MeghanaMSFT_1-1697461173295.png

 

Hi @Meghana-MSFT 

 

The not working cards are having problem with the mobile platform but working fine in web.

Could you please let us know what the issue is in mobile platform? Is it not rendering properly? Are you facing this issue in both Android and iOS?

@Meghana-MSFT

 

Yes, Card is not triggering properly in both Android, IOS mobile and tablets.

Can you please share video or screenshot of your issue?

@nagajeyanthi - We checked this in Android, and it is rendering like below. It does not have the title as shown in web. Is this what you are facing in iOS and Android? Could you please share video or screenshot of your issue?

 
 
 

MeghanaMSFT_3-1697609808800.png