List 365 view json - color group header based on condition

Question

List 365 view json - color group header based on condition

harry777 61

I'm trying to write a Json for my view.

How can I make the background of groupby column header green if all items in Status column are Completed?

I have the below code so far,

I have this logic:

count the number of times Completed appears for grouped project == @group Count then change the background of the header to green

{  
  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",  
  
  "groupProps": {  
  
    "headerFormatter": {  
  
      "elmType": "div",  
  
      "txtContent": "=@group.fieldData + ' (' + @group.count + ')'",  
  
      "style": {  
  
        "font-weight": "600"  
  
      },  
  
      "children": [  
  
        {  
  
          "elmType": "div",  
  
          "forEach": "project in @projectField",  
  
          "children": [  
  
            {  
  
              "elmType": "div",  
  
              "attributes": {  
  
                "class":"="  
  
              }  
  
            }  
  
          ]  
  
        }  
  
      ]  
  
    }  
  
  }  
  
}

Thanks

Emily Du-MSFT 51,846 Reputation points Microsoft External Staff

2021-08-09T05:47:30.51+00:00

@harry777

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

1 answer

Your answer

Emily Du-MSFT 51,846 Reputation points Microsoft External Staff

2021-08-09T05:47:30.51+00:00

@harry777

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Thank you for your understanding and support.

Answer 1

@harry777

Per my test, through JSON formatting, setting the color of “Project" column header according to the value of “Status” column is not available.

You could set the color of “Project" column header according to the text of “Project" column by using JSON formatting.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",  
  "groupProps": {  
    "hideFooter": false,  
    "headerFormatter": {  
      "elmType": "div",  
      "style": {  
        "background-color":"=if(@group.fieldData == 'Project1', 'green','red')",  
        "flex-wrap": "wrap",  
        "display": "flex",  
        "box-sizing": "border-box",  
        "padding": "4px 8px 5px 8px",  
        "border-radius": "6px",  
        "align-items": "center",  
        "white-space": "nowrap",  
        "overflow": "hidden",  
        "margin": "1px 4px 4px 1px"  
      },  
      "children": [  
        {  
          "elmType": "div",  
          "children": [  
            {  
              "elmType": "div",  
              "style": {  
                "display": "flex",  
                "flex-direction": "row",  
                "justify-content": "center"  
              },  
              "children": [  
                {  
                  "elmType": "div",  
                  "txtContent": "=  @group.count",  
                  "style": {  
                    "padding": "5px 5px 5px 5px",  
                    "font-weight": "500"  
                  }  
                }  
              ]  
            }  
          ]  
        },  
        {  
          "elmType": "div",  
          "children": [  
            {  
              "elmType": "div",  
              "style": {  
                "display": "flex",  
                "flex-direction": "row",  
                "justify-content": "center"  
              },  
              "children": [  
                {  
                  "elmType": "div",  
                  "txtContent": "=  @group.fieldData.displayValue +'(s)  ' ",  
                  "style": {  
                    "padding": " ",  
                    "font-weight": "500"  
                  }  
                }  
              ]  
            }  
          ]  
        }  
      ]  
    }  
  }  
}

Result:

If an Answer is helpful, please click "Accept Answer" and upvote it.
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.

harry777 61 Reputation points

2021-08-09T11:42:30.437+00:00

thanks for your reply @Emily Du-MSFT .

I think this example is using the Number([$aggregate.value]) to change txtContent of header
https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting#example-color-coded-group-header-with-aggregate

If we cannot change the header background based on the status column. Would it be possible to display the Number(@group.count - Number([$aggregate.value])) counts of tasks without Completed status like in the above example.
Emily Du-MSFT 51,846 Reputation points Microsoft External Staff

2021-08-10T10:35:21.963+00:00

@harry777

In the JSON formatting, using "groupProps" to color the group by column header. In the "groupProps", you could only get group by column values.

And I have tested the example in my list, it does not works.
harry777 61 Reputation points

2021-08-10T10:42:08.19+00:00

That's a shame. :(
But, thanks a lot @Emily Du-MSFT for looking into this. :)
Emily Du-MSFT 51,846 Reputation points Microsoft External Staff

2021-08-11T10:08:22.183+00:00

@harry777

You're welcome.
Emily Du-MSFT 51,846 Reputation points Microsoft External Staff

2021-08-16T02:14:01.3+00:00

@harry777

Do you have any progress on this issue?

Please remember to update this thread if you need further assistance.

Share via

List 365 view json - color group header based on condition

1 answer

Your answer