Change background color of Grouped list view headers

Question

Hi,

I have a grouped list view by status: All I want to do is highlight or change the background color for each header to a unique color. I have pieced together this code from my searches. It works but for the last two statuses In progress and Not started it highlights them to the same color and secondly, it does not show the group header value. I am not a coder. Please advise. Or if you know of another easier method to achieve this.

Thanks,

Ather

------------------------------------------------------------------------------------

{

  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

  "groupProps": {

    "headerFormatter": {

      "elmType": "div",

      "style": {

        "background-color": {

          "operator": "?",

          "operands": [

            {

              "operator": "==",

              "operands": [

                "@group.fieldData.displayValue",

                "Completed"

              ]

            },

            "#004b1c",

            {

              "operator": "?",

              "operands": [

                {

                  "operator": "==",

                  "operands": [

                    "@group.fieldData.displayValue",

                    "In Approval"

                  ]

                },

                "#5c2d91",

                {

                  "operator": "?",

                  "operands": [

                    {

                      "operator": "==",

                      "operands": [

                        "@group.fieldData.displayValue",

                        "Not Started"

                      ]

                    },

                    "#008272",

                    "#FF9800"

                  ]

                }

              ]

            }

          ]

        },

        "color": "#fff",

        "padding": "10px",

        "font-weight": "bold"

      },

      "txtContent": "@group.fieldData.displayValue"

    }

  }

}

Answer 1

Hi @Ather Mian,

Thank you for posting in this community.

Your code is nearly perfect but there are a few things that need to be changed:

1.You have “Not Started” in your code and the value in the column is “Not started”. This results in the same color for both “Not Started” and “In progress”.

2.Depending on your situation, it is more appropriate to use view formatting than column formatting.

This is the code I modified from your code, you can just copy it and see if it works.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "background-color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@group.fieldData.displayValue",
                "Completed"
              ]
            },
            "#004b1c",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@group.fieldData.displayValue",
                    "In Approval"
                  ]
                },
                "#5c2d91",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@group.fieldData.displayValue",
                        "Not Started"
                      ]
                    },
                    "#008272",
                    "#FF9800"
                  ]
                }
              ]
            }
          ]
        },
        "color": "#fff",
        "padding": "10px",
        "font-weight": "bold"
      },
      "txtContent": "@group.fieldData.displayValue"
    }
  }
}

Here is my test result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.