Apr 13 2022 01:06 PM - edited Apr 13 2022 01:10 PM
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.
Apr 14 2022 09:56 AM - edited Apr 14 2022 09:58 AM
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:
Apr 14 2022 12:24 PM
@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.
Apr 14 2022 04:55 PM - edited Apr 14 2022 04:58 PM
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
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.
Apr 14 2022 05:10 PM
Solution
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.
Apr 21 2022 07:29 AM
@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.
Apr 14 2022 05:10 PM
Solution
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.