Why adaptive card is rendered as a table in Microsoft Teams chat?

Chinnam, Harish Naidu 10

In previous version of Microsoft Teams, the adaptive card is rendered as a card and now I see a table like structure with rows and columns with the contents of the card. The content is fine but why is it rendered as a table instead of a card?

The card also truncates and have to click on see more in order to see the complete card. How to do display the complete card by default as it is not too large. (Just 5 lines and two buttons in the adaptive card).

This behavior change is noticed from Microsoft Team application version: 1.6.00.16372 (64-bit)

Please look into this and let me know if I have to change any rendering properties or so to see the content as a card.

Thanks in advance.

Chinnam

Chinnam, Harish Naidu 10

Here is some additional information about the issue I am facing. I am adding the source code for my sample card regarding how I created the adaptive card.

// Code for generating a sample adaptive card
export const SampleCard = async () => {
    
  const card = {
    type: 'AdaptiveCard',
    body: [
      {
        type: 'TextBlock',
        size: 'Medium',
        weight: 'Bolder',
        text: 'Sample Card',
        wrap: true,
      },
      {
        type: 'FactSet',
        facts: [
          { title: 'Field 1', value: 'Value 1'},
          { title: 'Field 2', value: 'Value 2'},
          { title: 'Field 3', value: 'Value 3'},
          { title: 'Field 4', value: 'Value 4'},
          { title: 'Field 5', value: 'Value 5'},
          { title: 'Field 6', value: 'Value 6'}
        ],
      }
    ],
    actions: [
      {
        type: 'Action.Execute',
        title: 'Button 1',
        data: { msteams: { type: 'messageBack' } },
      },
      {
        type: 'Action.Execute',
        title: 'Button 2',
        data: { msteams: { type: 'messageBack' } },
      }
    ],
    msteams: { width: 'Full' },
    $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
    version: '1.5',
  }

  return card
}

This is how I send the card to the user via bot.

export const createCard = async (
  recipient: LeanDocument<User>,
  card: any,
): Promise<ResourceResponse | undefined> => {
  let response: ResourceResponse | undefined
  await botAdapter.continueConversation(
    recipient.conversation as Partial<BotConversationReference>,
    async (turnContext: TurnContext) => {
      response = await turnContext.sendActivity({
        attachments: [CardFactory.adaptiveCard(card)],
      })
    },
  )
  return response
}

Earlier I used to get the card like this.

But now I see like a table as shown with no changes in the source code.

Please let me know how to display the card as before.

Thanks in advance,

Chinnam

Josef Burchert 10 Reputation points

2023-06-28T07:58:33.29+00:00

This is already known issue from microsoft. Ther is already a bug report for it. https://github.com/MicrosoftDocs/msteams-docs/issues/8912
Ran Hou-MSFT 7,470 Reputation points Microsoft Vendor

2023-06-29T05:17:25.8033333+00:00

@Chinnam, Harish Naidu

Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. since your question about adaptive card is more related to Power Automate, it is recommended to post to the Power Automate community（Microsoft Power Automate Community - Power Platform Community） if you need further help on this .Thanks for your understanding and patience!

Share via

Why adaptive card is rendered as a table in Microsoft Teams chat?