Unanswered

Apply different background color to adaptive card container

(0) Share

Report

Posted on by PowerUser14

Hello,

I have created an Adaptive Card using Bot Framework Composter to display in Power Virtual Agent Chatbot. And I am using container to display TextBlock. I want to change the background color of container but there are only 6 style options i.e., Default, Emphasis, Accent, Good, Attention and Warning. How can I apply different background color for container.

Can you please help me?

Thank you

Categories:

Building Copilot Studio chatbots in Microsoft Teams

I have the same question (0)

All responses (6)

Answers (1)

Verified answer

Expiscornovus 33,189 Most Valuable Professional on at

Like (2)

Report
Hi @PowerUser14,

Maybe you could use the backgroundImage property of a container as a workaround. Just use an image of a single colour:

https://adaptivecards.io/explorer/Container.html

{ "type": "AdaptiveCard", "body": [ { "type": "Container", "minHeight": "150px", "backgroundImage": "https://adaptivecards.io/content/AlkiBeach.jpg", "items": [ { "type": "TextBlock", "text": "What a beautiful background" } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2" }

Was this reply helpful? Yes No
Wesso 51 on at

Like (0)

Report

I can't help you much but I'm curious... how are you able to post adaptive cards with "PVA in Teams" licence?
I may have misunderstood this section of the forum but I thought this is only for users who only have access to PVA in Teams as opposed to the full PVA licence.

PVA in Teams: Overview of Power Virtual Agents in Microsoft Teams - Power Virtual Agents | Microsoft Docs

Was this reply helpful? Yes No
PowerUser14 8 on at

Like (0)

Report

Hi @Wesso the following link explains how to post an Adaptive Card in Power Virtual Agent:
https://docs.microsoft.com/en-us/power-virtual-agents/advanced-bot-framework-composer-example1

Thank you

Was this reply helpful? Yes No
Wesso 51 on at

Like (1)

Report

Hi @PowerUser14 Thanks for sharing this. I must have misunderstood this section in the forum, I thought this section was only for users who has the PVA in Teams licence (which is different to the full PVA licence). We have the PVA in Teams licence and this doesn’t allow us to access the web app of PVA so we can’t edit much except for what’s in the authoring canvas. This does also mean we are unable to post adaptive cards.

Thanks for the link.

Was this reply helpful? Yes No
5tephan 12 on at

Like (2)

Report
That helped me a lot.

I'm using

"backgroundImage": {
"url": "data：image/gif;base64,R0lGODdhCAABAIAAAJHOgQAAACwAAAAACAABAAACA4RvBQA7",
"fillMode": "Repeat"
}
That's an 8 by 1 one-color GIF.

The part `AJHOgQ` is the color (green). It's the base 64 encoding of the bytes `00 91 ce 81`.

NOTE: The "：" should be a normal ":" but somehow it's always replaced by "&colon;", so I selected another colon to make it at least look correct.

Was this reply helpful? Yes No
5tephan 12 on at

Like (1)

Report

For everybody's convenience, I've just created a small Javascript Online Tool to create the code for any background color you wish.

Please find my Adaptive-Card GIF-Creator here

Was this reply helpful? Yes No