Forum Discussion
Solved
How to customize the grouped list view background color
Hello.
I am looking for a JSCON code which will show the grouped view similar to the below image
https://sharepointdashboards.com/PRE/?t112
I have the following JSON for the content that will be displayed in the heading:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"groupProps": {
"hideFooter":true,
"headerFormatter": {
"elmType": "div",
"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"
},
"attributes": {
"class": "=if(@group.fieldData == 'Answered', 'sp-css-backgroundColor-BgMintGreen',if(@group.fieldData == 'New', 'sp-css-backgroundColor-BgCoral'))"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "=if(@group.fieldData == 'Answered', 'SkypeCheck',if(@group.fieldData == 'New', 'MailCheck'))"
},
"style": {
"max-width": "24px",
"max-height": "24px",
"margin-top": "2px",
"border-radius": "2px"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.count",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"justify-content": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "= @group.fieldData.displayValue +'(s) ' ",
"style": {
"padding": " ",
"font-weight": "500"
}
}
]
}
]
}
]
}
}
}
Learn2Live I haven't checked the difference between your JSON code and mine, but my code is shown below:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "hideFooter": true, "headerFormatter": { "elmType": "div", "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": "#ffbf00" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Link" }, "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "= @group.count", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500" } } ] } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "= @group.fieldData.displayValue +' links ' ", "style": { "padding": " ", "font-weight": "500" } } ] } ] } ] } } }Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)
2 Replies
Learn2Live I haven't checked the difference between your JSON code and mine, but my code is shown below:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "groupProps": { "hideFooter": true, "headerFormatter": { "elmType": "div", "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": "#ffbf00" }, "children": [ { "elmType": "span", "attributes": { "iconName": "Link" }, "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "= @group.count", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500" } } ] } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "= @group.fieldData.displayValue +' links ' ", "style": { "padding": " ", "font-weight": "500" } } ] } ] } ] } } }Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)- @ Rob_Elliott Thank you so much, this will do
