首页 > 解决方案 > 自适应卡片从 if 条件更改文本颜色

问题描述

我想根据其值更改来自数据库的自适应卡输出的颜色,例如:如果工作时间 < 6 = 显示工作时间的自适应卡的颜色必须为红色。如果超过 6 小时,工作时间必须显示为绿色。

知道我必须如何实现这一目标吗?

下面是 JSON 代码的一部分以及我从数据库调用的数据。此外,我将在 Microsoft Teams 上实现这一点。

"type": "Column",
          "items": [
            {
              "type": "TextBlock",
              "weight": "bolder",
              "text": "Work Hours"
            },
            {
              "$data": "${AttendanceMonthly}",
              "type": "TextBlock",
              "weight": "bolder",
              "separator": true,
              "text": "${WorkedHours}"
            }

标签: adaptive-cardsbotframework

解决方案


您可以使用 if 将颜色设置为注意或良好。看这个例子:

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

根据您的数据,这将使工作时间低于 6 的文本变为红色。请记住,您只能将颜色设置为“注意”、“良好”等,而不能直接设置颜色代码。


推荐阅读