Customize SharePoint list view

Hi Everyone,

In my last blog I have shown how to customize SharePoint list columns using column formatting. You can see my blog on Customize SharePoint columns using column formatting.

Today, we will see SharePoint list view formatting. In my last blog I have created a list to store book information, we are going to use the same list. We are going to customize SharePoint list view grouped by Genre column. Without going into deep, let’s see how to do it!

  1. Navigate to the list where you want to format the view.
  2. Click All Items and from the contextual menu click Format current view.
Figure 1: Format current view

3. In the Format View panel under the Format View tab only we are going to change the JSON and click Save.

Figure 2: Edit JSON

4. Delete the JSON given in the box and add following JSON.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "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 == 'Mystery', 'sp-css-backgroundColor-neutralBackground20', if(@group.fieldData == 'Spiritual', 'sp-css-backgroundColor-blockingBackground30', if(@group.fieldData == 'Action and Adventure', 'sp-css-backgroundColor-blueBackground37', if(@group.fieldData == 'Comic or Graphic Novel', 'sp-css-backgroundColor-errorBackground50', '')))"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "has following books",
                  "style": {
                    "padding": " ",
                    "font-weight": "500"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

5. You will see the view is formatted as follows:

Figure 3: Formatted View

6. In the headerFormatter -> attributes -> class we have checked that if grouped by value is equal to genre value then apply particular color. Likewise, you would have different column names and values. In our JSON we haven’t used any specific field’s internal but values we have used. So same JSON would work for you, you just have to change the value in if condition.

Reference:

Like, share, comment.
Thanks for reading!!

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: