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.

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.

valderes-squadra

Copper Contributor

Apr 21, 2022

Steve_Penner, Thankyou wery much for your help.

It worked perfectly like I need.

I also made some improvements, simplifying my original code and merging with your tip as you can see bellow

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": 
  {
    "headerFormatter": 
	{
      "elmType": "div",
	  "txtContent": "= @group.columnDisplayName +': ' + @group.fieldData.displayValue + ': possui ' + @group.count + if(@group.count > '1', ' interessados', ' interessado'",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex",
        "box-sizing": "border-box",
        "padding": "10px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "1px 4px 4px 1px",
		"color": "#FFFFFF",
		"font-weight": "bold",
		"background-color": "=if(indexOf(@group.fieldData, 'Curitiba') >= 0, '#00A166', if(indexOf(@group.fieldData, 'Porto') >= 0, '#753371', ''))"
      }
    }
  }
}

The result:

I learned a lot from your answer.