View formattingSharePoint Online

Head of Business Unit Overview

A visually appealing overview of business unit leaders to display key information at a glance.

Get this format View on GitHub

Shared by Watana
Updated Dec 13, 2024

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData",
      "style": {
        "width": "=(560-15)+'px'",
        "padding-left": "15px",
        "height": "48px",
        "background-color": "#696CB3",
        "color": "white",
        "border-radius": "8px"
      }
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "560px",
      "margin": "2px 0 20px 44px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "width": "100%",
          "height": "90px",
          "background-color": "#696CB3",
          "border": "4px solid #696CB3",
          "border-radius": "6px 6px"
        },
        "children": [
          {
            "elmType": "img",
            "defaultHoverField": "[$HoBU]",
            "attributes": {
              "class": "ms-borderColor-white ms-borderColor-yellow--hover",
              "src": "=getUserImage([$HoBU.email],'m')"
            },
            "style": {
              "display": "flex",
              "background-color": "#E9E9F7",
              "width": "82px",
              "font-size": "24px",
              "font-weight": "700",
              "border-radius": "50%",
              "noxborder": "2px solid",
              "border-style": "solid",
              "border-width": "2px",
              "margin": "4px 4px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "flex-grow": "1",
              "color": "black",
              "background-color": "#E9E9F7",
              "border-radius": "4px 4px",
              "font-size": "16px",
              "font-weight": "700",
              "justify-content": "center",
              "margin": "0 0 0 4px",
              "padding": "0 0 0 16px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "100px",
                  "flex-direction": "column",
                  "justify-content": "space-evenly"
                },
                "children": [
                  {
                    "txtContent": "Name:",
                    "elmType": "div"
                  },
                  {
                    "txtContent": "Job Title:",
                    "elmType": "div"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "column",
                  "justify-content": "space-evenly",
                  "width": "1px",
                  "padding": "0 1px 0 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$HoBU.title]"
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "white-space": "nowrap",
                      "overflow": "hidden",
                      "text-overflow": "ellipsis"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData",
      "style": {
        "width": "=(560-15)+'px'",
        "padding-left": "15px",
        "height": "48px",
        "background-color": "#696CB3",
        "color": "white",
        "border-radius": "8px"
      }
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "560px",
      "margin": "2px 0 20px 44px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "width": "100%",
          "height": "90px",
          "background-color": "#696CB3",
          "border": "4px solid #696CB3",
          "border-radius": "6px 6px"
        },
        "children": [
          {
            "elmType": "img",
            "defaultHoverField": "[$HoBU]",
            "attributes": {
              "class": "ms-borderColor-white ms-borderColor-yellow--hover",
              "src": "=getUserImage([$HoBU.email],'m')"
            },
            "style": {
              "display": "flex",
              "background-color": "#E9E9F7",
              "width": "82px",
              "font-size": "24px",
              "font-weight": "700",
              "border-radius": "50%",
              "noxborder": "2px solid",
              "border-style": "solid",
              "border-width": "2px",
              "margin": "4px 4px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "flex-grow": "1",
              "color": "black",
              "background-color": "#E9E9F7",
              "border-radius": "4px 4px",
              "font-size": "16px",
              "font-weight": "700",
              "justify-content": "center",
              "margin": "0 0 0 4px",
              "padding": "0 0 0 16px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "100px",
                  "flex-direction": "column",
                  "justify-content": "space-evenly"
                },
                "children": [
                  {
                    "txtContent": "Name:",
                    "elmType": "div"
                  },
                  {
                    "txtContent": "Job Title:",
                    "elmType": "div"
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "column",
                  "justify-content": "space-evenly",
                  "width": "1px",
                  "padding": "0 1px 0 0"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$HoBU.title]"
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "style": {
                      "white-space": "nowrap",
                      "overflow": "hidden",
                      "text-overflow": "ellipsis"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample shows how to transform a plain list view into a visually appealing overview of business unit leaders to display key information at a glance.

screenshot of the sample

View requirements

Column Name	Required	Type
BU	Yes	Choice or Single line of text
HoBU	Yes	Person or Group
Title	No	Single line of text

[!NOTE] It is necessary to group by the BU column.
Set default grouping to Expanded (optional).

Sample

Solution	Author(s)
head-of-bu-overview.json	Watana

Version history

Version	Date	Comments
1.0	December 13, 2024	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

Key Dates Timeline Checklist

Picture Link Tiles - Collapsible

Picture Link Tiles Doc Lib