Group Header with Icon

The Group Header with Icon adds an icon keyed to each group's value in the header of a grouped SharePoint view, so each section reads at a glance from its symbol as well as its name. It is built with a standard Microsoft List and a small piece of view formatting JSON that styles the group header. Each header shows a colored icon chosen by the group value, the value itself, and the item count, and it leaves the rows themselves unchanged.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Adds an icon keyed to each group’s value in the group header
• Icons come from SharePoint’s built-in Fluent set, so nothing is installed
• The icon, value, and item count read together for fast scanning
• The collapse and expand behavior stays native to SharePoint grouping
• Applied as view formatting JSON on the group header, so it changes nothing about the rows or the data
• Each value maps to its own icon and color, easy to adapt

Common Use Cases

• Activities grouped by type
• Items grouped by category
• Requests grouped by channel
• Content grouped by format
• Tasks grouped by priority
• Any grouped list that benefits from icons

Details

• Pattern: Grouped Views
• Scope: View

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.

How to Apply JSON code

1. Group the view by Type (open the Type column header menu and choose Group by Type, or set it under view settings).
2. Open the view dropdown at the top right and choose Format current view.
3. Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "box-sizing": "border-box",
        "width": "100%",
        "padding": "8px 12px",
        "border-bottom": "1px solid #edebe9"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "align-items": "center",
            "justify-content": "center",
            "width": "24px",
            "height": "24px",
            "border-radius": "6px",
            "margin-right": "10px",
            "background-color": "=if(@group.fieldData == 'Meeting', '#0078d4', if(@group.fieldData == 'Email', '#038387', if(@group.fieldData == 'Call', '#ca5010', if(@group.fieldData == 'Task', '#107c10', '#605e5c'))))"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "=if(@group.fieldData == 'Meeting', 'Calendar', if(@group.fieldData == 'Email', 'Mail', if(@group.fieldData == 'Call', 'Phone', if(@group.fieldData == 'Task', 'CheckList', 'List'))))"
              },
              "style": {
                "font-size": "13px",
                "color": "#ffffff"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "14px",
            "font-weight": "700",
            "color": "#242424"
          },
          "txtContent": "@group.fieldData"
        },
        {
          "elmType": "div",
          "style": {
            "font-size": "12px",
            "color": "#8a8886",
            "margin-left": "10px"
          },
          "txtContent": "=@group.count + ' items'"
        }
      ]
    }
  }
}

Common Questions About the Group Header with Icon