Setting the background in JSON Formatting column to red

https://sharepoint.stackexchange.com/questions/277773

08-02-2021
|

Question

I have a field in SPOnline I want set to red to show against a progress bar. I thought it would be a matter of just adding a BG colour line but it hasn't worked. Any ideas? JSON below. Thanks in advance.

{
"background":"**#ff0000**",
   "elmType":"div",
   "children":[
      {
         "elmType":"span",
         "txtContent":{
            "operator":"+",
            "operands":[
               {
                  "operator":"*",
                  "operands":[
                     "@currentField",
                     100
                  ]
               },
               " %"
            ]
         },
         "style":{
            "background-color":{
               "operator":"?",
               "operands":[
                  {
                     "operator":"<=",
                     "operands":[
                        "@currentField",
                        0.33
                     ]
                  },
                  "#ffa500",
                  {
                     "operator":"?",
                     "operands":[
                        {
                           "operator":"<=",
                           "operands":[
                              "@currentField",
                              0.66
                           ]
                        },
                        "#ffff00",
                        "#00ff00"
                     ]
                  }
               ]
            },
            "width":{
               "operator":"+",
               "operands":[
                  {
                     "operator":"*",
                     "operands":[
                        "@currentField",
                        100
                     ]
                  },
                  "%"
               ]
            },
            "text-align":"center",
            "white-space": "nowrap"
         }
      }
   ]
}

Solution

Change the code in the first line to this: "style": { "background-color":"#ff0000"},

{
    "style": { "background-color":"#ff0000" },
       "elmType":"div",
       "children":[
          {
             "elmType":"span",
             "txtContent":{
                "operator":"+",
                "operands":[
                   {
                      "operator":"*",
                      "operands":[
                         "@currentField",
                         100
                      ]
                   },
                   " %"
                ]
             },
             "style":{
                "background-color":{
                   "operator":"?",
                   "operands":[
                      {
                         "operator":"<=",
                         "operands":[
                            "@currentField",
                            0.33
                         ]
                      },
                      "#ffa500",
                      {
                         "operator":"?",
                         "operands":[
                            {
                               "operator":"<=",
                               "operands":[
                                  "@currentField",
                                  0.66
                               ]
                            },
                            "#ffff00",
                            "#00ff00"
                         ]
                      }
                   ]
                },
                "width":{
                   "operator":"+",
                   "operands":[
                      {
                         "operator":"*",
                         "operands":[
                            "@currentField",
                            100
                         ]
                      },
                      "%"
                   ]
                },
                "text-align":"center",
                "white-space": "nowrap"
             }
          }
       ]
    }

OTHER TIPS

You need to add a style element to the top div element. See below:

{
   "elmType":"div",
   "style": { "background-color":"red" },
   "children":[
      {
         "elmType":"span",
         "txtContent":{
            "operator":"+",
            "operands":[
.....

Update: OP commented that only whats not already filled with green in the example should be red. This following code should do that:

{
   "elmType":"div",
   "children":[
        {
         "elmType":"span",
         "style":{
            "width":"100%",
            "background-color":"red"},
            "children": [
      {
         "elmType":"span",
         "txtContent":{
            "operator":"+",
            "operands":[
               {
                  "operator":"*",
                  "operands":[
                     "@currentField",
                     100
                  ]
               },
               " %"
            ]
         },
         "style":{
            "background-color":{
               "operator":"?",
               "operands":[
                  {
                     "operator":"<=",
                     "operands":[
                        "@currentField",
                        0.33
                     ]
                  },
                  "#ffa500",
                  {
                     "operator":"?",
                     "operands":[
                        {
                           "operator":"<=",
                           "operands":[
                              "@currentField",
                              0.66
                           ]
                        },
                        "#ffff00",
                        "#00ff00"
                     ]
                  }
               ]
            },
            "width":{
               "operator":"+",
               "operands":[
                  {
                     "operator":"*",
                     "operands":[
                        "@currentField",
                        100
                     ]
                  },
                  "%"
               ]
            },
            "text-align":"center",
            "white-space": "nowrap",
            "display": "block"
         }
      }
            ]
        }
   ]
}

Screenshot:

Licensed under: CC-BY-SA with attribution

Not affiliated with sharepoint.stackexchange