Adaptive Cards change text color from if condition

user_12870403 0
Viewed 1836

I want to change the color of an adaptive card output which comes from the database according to its value eg: if workhour < 6 = color of the adaptive card showing the work hours must be red. if it is greater than 6 hours the work hours must be displayed in green.

Any idea of how I must achieve this?

Below is a part of the JSON code along with data I call from the database. Also, I will be implementing this on Microsoft Teams.

"type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "text": "Work Hours"
            },
            {
              "$data": "${AttendanceMonthly}",
              "type": "TextBlock",
              "weight": "bolder",
              "separator": true,
              "text": "${WorkedHours}"
            }
botframework adaptive-cards
1 Answers

You can use if to set the color to attention or good. See this example:

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

Based on your Data this would make the text red for workedHours below 6. Have in mind that you can only set a color to "Attention", "Good" etc and not a color code directly.

user_94848420
Related