Forum Discussion

Learn2Live's avatar
Learn2Live
Copper Contributor
Jan 20, 2024
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...
  • Rob_Elliott's avatar
    Jan 21, 2024

    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)

Resources