Forum Discussion

valderes-squadra's avatar
valderes-squadra
Copper Contributor
Apr 13, 2022

How to cusotmize the grouped list title backgound color

Hello. I'm new to sharepoint online (and I must say I'm loving it). But I'm having trouble customizing the header in the Grouped List Layout. I need each header to have a background color dependin...
  • Steve_Penner's avatar
    Steve_Penner
    Apr 15, 2022

    valderes-squadra 

     

    I tested the ability to find substrings inside the column value for columns used to group your list/library, and function indexOf(targetstring, searchsubstring) also works:

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
      "groupProps": {
         "headerFormatter": {
            "elmType": "div",
            "txtContent": "= @group.columnDisplayName +': ' + @group.fieldData.displayValue",
            "style": {
            "background-color": "=if(indexOf(@group.fieldData, 'abc') >= 0, '#ffe0e0', if(indexOf(@group.fieldData, 'cde') >= 0, '#ffffe0', ''))",
            "font-weight": "bold"
          }
        }
      }
    }

     

    So the string containing 'abc' for the group header will be light red in background and that of 'cde' will be light green in background.

     

Resources