Is it possible in SharePoint Online to set list row colors only on the grouped header rows?
I'm hoping I can format the grouped list like this?
-
What is the data type of column on which you have applied grouping, single line of text or person or group?– Ganesh Sanap - MVPCommented Apr 26, 2023 at 3:08
-
Hi @DLM, does my response given below works for you? If yes, please Upvote(^) & accept as an Answer as it helped you & it will help others with similar question in future.– Ganesh Sanap - MVPCommented Apr 27, 2023 at 5:19
Add a comment
|
2 Answers
Yes, it is possible to add background color to grouping in SharePoint list. Use below code for your list view formatting:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps": {
"headerFormatter": {
"elmType": "div",
"txtContent": "@group.fieldData.displayValue",
"style": {
"padding": "5px 10px",
"background-color": "#d3d3d3",
"color": "#00bfff",
"font-weight": "bold",
"position": "absolute",
"left": "80px",
"right": "0px",
"top": "0px",
"bottom": "0px"
}
}
}
}
Output:
Note: You might need to adjust value for left styling property so that you can see the expand/collapse option on the left. More information at: Lists: group headers 100% width
answered Apr 26, 2023 at 8:18
-
1
You can try this:
Click on Format View from top right corner of list. Copy and paste JSON code from below to the editor.
background-color attribute will determine the background color.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps":
{
"headerFormatter":
{
"elmType": "div",
"txtContent": "@group.fieldData.displayValue",
"style": {
"flex-wrap": "wrap",
"display": "flex",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"white-space": "nowrap",
"overflow": "hidden",
"margin": "1px 4px 4px 1px",
"background-color": "gray"
}
}
}
}
Here are more details from Microsoft official documentation:
