Search code examples
adaptive-cardsbotframework

Adaptive Cards change text color from if condition


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

Solution

  • 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.