Forum Discussion
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 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#example-color-coded-group-header 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.
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.
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:
- 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
- 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.
- CSS color name: there are names for colors you can use. See this page to get started
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.
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.
