SOLVED

Microsoft Teams and Adaptive Cards: Themes and button rendering

%3CLINGO-SUB%20id%3D%22lingo-sub-1500596%22%20slang%3D%22en-US%22%3EMicrosoft%20Teams%20and%20Adaptive%20Cards%3A%20Themes%20and%20button%20rendering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1500596%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EWe%20are%20using%20adaptive%20cards%20to%20present%20information%20to%20users%20in%20Teams.%26nbsp%3B%20The%20cards%20have%20Action.OpenUrl%20and%20Action.ShowCard%20buttons.%26nbsp%3B%20However%2C%20we%20see%20that%20the%20cards%20are%20rendering%20the%20buttons%20differently.%26nbsp%3B%20We%20would%20like%20to%20know%20how%20is%20rendering%20controlled%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20eg%2C%20the%20following%20image%20shows%20one%20card%20with%20all%20Action.OpenUrl%20buttons%20rendered%20in%20filled-purple%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22voonsionglum_0-1593577137682.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F202466i6E6719958A92CE0F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22voonsionglum_0-1593577137682.png%22%20alt%3D%22voonsionglum_0-1593577137682.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20next%20image%20shows%20a%20different%20card%20with%20only%201%20button.%26nbsp%3B%20The%20button%20is%20also%20an%20Action.OpenUrl%20button%20but%20it%20is%20rendered%20in%20white%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22voonsionglum_1-1593577190615.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F202467i540D7E461B908C5B%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22voonsionglum_1-1593577190615.png%22%20alt%3D%22voonsionglum_1-1593577190615.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20JSON%20for%20both%20cards'%20action%20body%20does%20not%20have%20any%20rendering%20controls.%26nbsp%3B%20Would%20it%20be%20possible%20to%20apply%20consistent%20styling%20to%20the%20same%20action%20type%3A%20in%20this%20case%2C%20Action.OpenUrl%3F%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20You%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1500596%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Eadaptive%20cards%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1500668%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20and%20Adaptive%20Cards%3A%20Themes%20and%20button%20rendering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1500668%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F493333%22%20target%3D%22_blank%22%3E%40voonsionglum%3C%2FA%3E%26nbsp%3B-%20When%20you%20add%20button%20using%20action%20set%20the%20button%20will%20be%20rendered%20with%20background%20purple%2C%20If%20button%20is%20directly%20added%20to%20card%20then%20the%20card%20will%20be%20rendered%20with%20the%20white%20background.%20This%20is%20by%20design.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1500690%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20and%20Adaptive%20Cards%3A%20Themes%20and%20button%20rendering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1500690%22%20slang%3D%22en-US%22%3EThanks%20for%20letting%20me%20know%20%3A)%3C%2Fimg%3E%3C%2FLINGO-BODY%3E
Contributor

Hi,

We are using adaptive cards to present information to users in Teams.  The cards have Action.OpenUrl and Action.ShowCard buttons.  However, we see that the cards are rendering the buttons differently.  We would like to know how is rendering controlled?

 

For eg, the following image shows one card with all Action.OpenUrl buttons rendered in filled-purple

voonsionglum_0-1593577137682.png

 

This next image shows a different card with only 1 button.  The button is also an Action.OpenUrl button but it is rendered in white

 

voonsionglum_1-1593577190615.png

 

The JSON for both cards' action body does not have any rendering controls.  Would it be possible to apply consistent styling to the same action type: in this case, Action.OpenUrl?  

 

Thank You

2 Replies
Best Response confirmed by voonsionglum (Contributor)
Solution

@voonsionglum - When you add button using action set the button will be rendered with background purple, If button is directly added to card then the card will be rendered with the white background. This is by design.

Thanks for letting me know :)