question

harry777-6901 avatar image
0 Votes"
harry777-6901 asked EmilyDu-MSFT commented

List 365 view json - color group header based on condition

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?




121393-image.png




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

office-sharepoint-online
image.png (17.6 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@harry777-6901

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.

0 Votes 0 ·

1 Answer

EmilyDu-MSFT avatar image
0 Votes"
EmilyDu-MSFT answered EmilyDu-MSFT commented

@harry777-6901

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:

121569-1.png


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.





1.png (21.9 KiB)
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

thanks for your reply @EmilyDu-MSFT .

I think this example is using the Number([$aggregate.value]) to change txtContent of header
https://docs.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.


0 Votes 0 ·

@harry777-6901

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.


0 Votes 0 ·

That's a shame. :(
But, thanks a lot @EmilyDu-MSFT for looking into this. :)

0 Votes 0 ·
Show more comments

@harry777-6901

Do you have any progress on this issue?

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

0 Votes 0 ·