How to cusotmize the grouped list title backgound color

[valderes-squadra]

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 depending on its content. Example: if the title contains the string "abc" the background must be green. If it contains the string "cde" the background must be red.

As my grouped list has few items I tried to do this manually, for each item, following this tutorial https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-list-formatting#examp... but this JSON gives error.

Does anyone have any idea what could be wrong?

This is what I currently have:

Thank you in advance for your attention.

[#2]

@valderes-squadra 

Look for the "style" property within the JSON object that applies to the formatting of your grouped headers (see green-circled in image).  The properties within the style object are standard CSS properties and their values.

For background coloring you want to insert within the style object as follows

"style": {
   "background-color":  "<allowed-CSS-color-value>",
},

When writing JSON, be careful that both the property name and the property value are double-quoted (not single-quoted), and that the property name is always set with a colon character from the property value! And be careful of commas when separating property settings in objects and for objects (objects are contained with curly braces) and also for arrays (contained within square brackets). Bad JSON can be disappointing.

CSS color values typically used have one of any the formats:

1. hex value:   #RRGGBB. Note the preceding hashmark (#).  The RR, GG, BB digits are hexadecimal values ranging from 00 to FF, and RR, GG, BB, are the red/green/blue combination
2. rgb function:  rgb( rr, gg, bb, a). This is just a different way of formatting the red-green-blue values, but the rr, gg, bb, are actually in decimal form:  0 to 255. There is a fourth parameter that actually indicates the opacity of the color, ranges from 0 to 1.
3. CSS color name:  there are names for colors you can use. See this page to get started

[#3]

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

[#4]

@valderes-squadra 

Yeah, I completely failed to achieve your objective. Let me try again.

I was going to give you a bunch of reference links, but it looks like you have found the ROW FORMATTING / LIST VIEW CUSTOMIZATION help and have gone through it.

So I have JSON below that should help, I hope with your group header row formatting. Let's try it.

Note that the "$schema" property value for COLUMN FORMATTING is different from ROW FORMATTING. This view customization is for row formatting

{
   "$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(startsWith(@group.fieldData, 'abc'), '#e0ffe0', if(startsWith(@group.fieldData, 'cde'), '#ffe0e0', ''))",
            "font-weight": "bold"
         }
       }
    }
}

I developed this from reading what you did. Things to be careful about

• if you don't have 'txtContent' property set, you won't see any text. What happens above is that the column name is put, then a colon, then whatever is displayed as the value in the column that was used in the grouping (the column when you created the view)
• You want to background color set on a dependency. I used basically an Excel formula style with the allowed functions. In this case, I used the 'startsWith' string function. If you are looking for containing substring (not starting with, try 'indexOf()' function, and look for values that are not negative (-1).  Your particular substring is 2nd argument in 'startsWith()'. Add any other CSS styles that you want. I had to use "font-weight":"bold" to get the boldface in the group header text
• For multiple conditions for a background color, you have to use nested if() tests. Keep track of the if() three parameters [test, true-condition, false-condition], and all the parentheses, as well as alwys using single quotes for any literal strings. Also JSON does not allow line breaks in strings, so if you have a large set if if() tests nested, join them all into one line for that string 

Row and column formatting and general list customization require a lot of trial and error to figure it out. Make sure you are using the advanced mode setup with Preview/Save/Cancel editing for very quick results/testing.

If you dont see what I am seeing, reply back.

[#5 · Accepted solution]

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

[#6]

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