Forum Discussion
Karunakaran_GN
Jul 21, 2023Copper Contributor
On Teams, Images not being displayed under accordion in adaptive card
I have Power Virtual Agent bot running on Teams. Images are not being displayed(rather displayed as hyperlinks) under accordion in adaptive card. Same content displays images if it is rendered through simple message.
Content containing image rendered through accordion,
Content containing images rendered through simple message,
Adaptive card JSON with accordion is as below,
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 1",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto",
"isVisible": false
},
{
"type": "Column",
"id": "chevronUp1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
}
},
{
"type": "Container",
"id": "cardContent1",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 1 [View Article](https://kdusdemo2.service-now.com/kb_view.do?sys_kb_id=576e28a387f83c10c71db3c2debb3516) \n\n### Introduction\n\nA pivot table is a table of grouped values that aggregates the individual items of a more extensive table within one or more discrete categories.\n\n### Instructions\n\n## How to create a PivotTable in Excel for Windows\n\n1. Select the cells you want to create a PivotTable from.\n\n 1. **Note:** Your data shouldn't have any empty rows or columns. It must have only a single-row heading.\n2. Select **Insert** > **PivotTable**.\n3. \n4. Under **Choose the data that you want to analyze**, select **Select a table or range**. \n5. \n6. In **Table/Range**, verify the cell range.\n7. Under **Choose where you want the PivotTable report to be placed**, select **New worksheet** to place the PivotTable in a new worksheet or **Existing worksheet** and then select the location you want the PivotTable to appear.\n8. Select **OK**.",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 2",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown2",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp2",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
}
},
{
"type": "Container",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 2",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 3",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown3",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp3",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
}
},
{
"type": "Container",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 3",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
}
],
"version": "1.3",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
7 Replies
Sort By
- Meghana-MSFT
Microsoft
Thank you for reporting this, we will check this and get back to you.- Karunakaran_GNCopper Contributor
Thanks Meghana. Also some of the Markup syntaxes not working, like ###. Same can be observed in the screenshot provided above.
- Meghana-MSFT
Microsoft
Karunakaran_GN - Please note that the format you are using "  " as hyperlink, hence it is rendered as hyperlink in the card.
- Please use Image type to display images in adaptive cards - Schema Explorer | Adaptive Cards
- Please check this doc for the supported markdown in adaptive cards - Text formatting in cards - Teams | Microsoft Learn
Thanks,
Meghana
----------------------------------------------------------------------------------------------------------
If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.