Skip to main content

Notifications

Copilot Studio - Building Copilot Studio Chatbo...
Answered

Apply different background color to adaptive card container

(0) ShareShare
ReportReport
Posted on by 8

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

  • 5tephan Profile Picture
    5tephan 10 on at
    Re: Apply different background color to adaptive card container

    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

  • 5tephan Profile Picture
    5tephan 10 on at
    Re: Apply different background color to adaptive card container

    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.

  • Wesso Profile Picture
    Wesso 51 on at
    Re: Apply different background color to adaptive card container

    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. 

  • PowerUser14 Profile Picture
    PowerUser14 8 on at
    Re: Apply different background color to adaptive card container

    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

  • Wesso Profile Picture
    Wesso 51 on at
    Re: Apply different background color to adaptive card container

    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

  • Verified answer
    Expiscornovus Profile Picture
    Expiscornovus 31,124 on at
    Re: Apply different background color to adaptive card container

    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"
     }

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,526

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,907

Leaderboard

Featured topics