Forum Discussion

Karunakaran_GN's avatar
Karunakaran_GN
Copper Contributor
Jul 21, 2023

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",
                                    "url": "https://adaptivecards.io/content/down.png",
                                    "width": "20px",
                                    "altText": "collapsed"
                                }
                            ],
                            "width": "auto",
                            "isVisible": false
                        },
                        {
                            "type": "Column",
                            "id": "chevronUp1",
                            "spacing": "Small",
                            "verticalContentAlignment": "Center",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/up.png",
                                    "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.  ![Pivot Table](https://support.content.office.net/en-us/media/d9736d3a-65b2-40d4-8715-3c814bdf464b.png)\n4.  Under **Choose the data that you want to analyze**, select **Select a table or range**. \n5.  ![Pivot Table](https://support.content.office.net/en-us/media/04bea9cf-04a3-403d-8a37-793241c177d2.png)\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",
                                    "url": "https://adaptivecards.io/content/down.png",
                                    "width": "20px",
                                    "altText": "collapsed"
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "id": "chevronUp2",
                            "isVisible": false,
                            "spacing": "Small",
                            "verticalContentAlignment": "Center",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/up.png",
                                    "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",
                                    "url": "https://adaptivecards.io/content/down.png",
                                    "width": "20px",
                                    "altText": "collapsed"
                                }
                            ],
                            "width": "auto"
                        },
                        {
                            "type": "Column",
                            "id": "chevronUp3",
                            "isVisible": false,
                            "spacing": "Small",
                            "verticalContentAlignment": "Center",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/up.png",
                                    "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

Resources