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
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
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 ":", so I selected another colon to make it at least look correct.
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.
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
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
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"
}