Forum Discussion

Copper Contributor

Apr 13, 2022

Solved

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...

Apr 14, 2022

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.

valderes-squadra

Copper Contributor

Apr 14, 2022

Steve_Penner, thanks for reply.

I had already done what you suggested. I applied a background color to the title, as it appears in this image.

However, what I need is to apply alternating colors depending on a part of the title string. For example, if the title contains "Curitiba" the background color must be green, if the title contains "Porto Alegre" the background color must be blue.

I tried this, but it don't works for me

Thanks a lot for your attention.

Steve_Penner

Copper Contributor

Apr 14, 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.