cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MichelH
Advocate V
Advocate V

Adaptive card in teams, not showing container style like in Adaptive card designer

If have a flow that reports the status of some processes. 

It uses the style of a container element to create a colored background

It used to show these like this:

 

old situationold situation

Here I replaced the name of process by the name of the associated 'style' I use for the last container that shows the color.

 

Since a few weeks the same thing looks like this in teams, as if the style is no longer present.

 

MichelH_0-1632754352015.png

 

However in the Designer | Adaptive Cards things look like before, so some update to teams broke this.

 

This is the JSON of the right column, that holds the color part.

Does anyone see anything wrong with this?

 

 

 

 

                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": " "
                                                }
                                            ],
                                            "style": "attention"
                                        }
                                    ]
                                }

 

 

 

 

And the whole thing:

 

 

 

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "120px",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Process:",
                            "wrap": true,
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Accent",
                                                    "wrap": true
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": " "
                                                }
                                            ],
                                            "style": "accent"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "Good",
                                                    "wrap": true
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": " "
                                                }
                                            ],
                                            "style": "good"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Warning"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": " "
                                                }
                                            ],
                                            "style": "warning"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Attention",
                                            "wrap": true
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": " "
                                                }
                                            ],
                                            "style": "attention"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

 

 

 

 

 

 

 

2 REPLIES 2
Expiscornovus
Super User
Super User

Hi @MichelH,

 

What version of the Teams Client are you using. Do you have the latest update of it?

 

The reason that I am asking this is because I have seen this issue before, registered by @z3019494 

https://powerusers.microsoft.com/t5/Using-Flows/More-bugs-with-Teams-adaptive-card-containers-not-re...

 

And I think for him it was resolved after a Teams client update of the 17th of September.

Hi @Expiscornovus,

Thanks for your response.

 

I've tried a few things in the meanwhile.

I see the mentioned behavior in the PC version 1.4.00.22976 (64-bit), and in also the web teams.
The PC version was updated on the 24th of September.

Our IT is in charge of software updates so I don't know if this is the latest and greatest.

The mobile teams still renders the card like in the designer, just like the PC and web teams version did, until a few weeks ago.

 

So I fear a previous teams update broke something.

Maybe this 'update' is not yet available on the mobile teams.  🙂
I will ask our IT if a more recent PC version can be obtained.
 

Michel

 

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Users online (2,671)