Skip to main content

Notifications

Power Platform Community / Forums / General / Conditional formatting...
General
Unanswered

Conditional formatting for adaptive cards

Posted on by 6

Hi all!

 

Wanted to check on how do we do conditional formatting for color on adaptive cards for bot composer? 

Seems like bot composer only supports version 1.3.

 

{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
 { 
 "$data": "${AttendanceMonthly}",
 "type": "TextBlock",
 "weight": "bolder",
 "color": "${if(Month = January, 'attention', 'good')}", 
"text": "Hours worked: ${Month}" }]

 

  • PulkitM Profile Picture
    PulkitM 8 on at
    Re: Conditional formatting for adaptive cards

    Hi,

    Just want to know from where Month variable is getting value.

  • Expiscornovus Profile Picture
    Expiscornovus 1,700 on at
    Re: Conditional formatting for adaptive cards

    Hi @NewUser22,

     

    It looks like the adaptive card designer website does not like our expressions 😁

     

    adaptivecarddesigner.png

     

    But it seems to work fine in PVA in teams (in the browser, I have not tried the Teams Desktop client).

     

    Attention_March_PVATeams.gif

  • NewUser22 Profile Picture
    NewUser22 6 on at
    Re: Conditional formatting for adaptive cards

    Oh i see! Thanks for clarifying. Does it work for teams in your case? We are using the PVA in teams. 

  • Expiscornovus Profile Picture
    Expiscornovus 1,700 on at
    Re: Conditional formatting for adaptive cards

    Hi @NewUser22,

     

    Thanks for sharing, but I see that is a screenshot from https://adaptivecards.io/designer/

     

    Apologies that I was not clear, I am talking about testing it from the Demo website channel within your Power Virtual Agent 😀

     

    demo_website.png

  • NewUser22 Profile Picture
    NewUser22 6 on at
    Re: Conditional formatting for adaptive cards

    Here you go.

    NewUser22_0-1648051686215.png

     

  • Expiscornovus Profile Picture
    Expiscornovus 1,700 on at
    Re: Conditional formatting for adaptive cards

    Hi @NewUser22,

     

    Yes, it also worked for the valueIfFalse, see the gif below. 

     

    I am outputting March in the Month property and therefore it is showing the valueIfFalse. Which in this new setup is Attention (aka the red color), just like in your expression.

     

    What are you outputting in Month? Can you share a screenshot of a test run in the Demo website channel?

     

    Attention_March.gif

  • NewUser22 Profile Picture
    NewUser22 6 on at
    Re: Conditional formatting for adaptive cards

    That's great! Did it work for your second case though? I find that mine still stuck at "good" even if it is not january.

     

    {
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
     { 
     "$data": "${AttendanceMonthly}",
     "type": "TextBlock",
     "weight": "bolder",
     "color": "${if(equals(Month,Jan), 'good', 'attention')}", 
    "text": "Hours worked: ${Month}" }],  

     

    Also tried it on designer io but still not working for me.

     

    NewUser22_0-1648048363747.png

     

  • Expiscornovus Profile Picture
    Expiscornovus 1,700 on at
    Re: Conditional formatting for adaptive cards

    Hi @NewUser22,

     

    You could use an adaptive expression which uses the if and equals functions.

     

    Below is an example which should work with 1.3 (I have tested it in the Demo website channel)

    ${if(equals(Month,January), 'Attention', 'Good')}

     

    1. The code on the bot framework composer

    adaptiveexpression_formatting.png

     

    2. The testing in the Demo website channel.

     

    hoursworkedcolorgood.png

     

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,990

#3
Expiscornovus Profile Picture

Expiscornovus 1,700

Leaderboard