SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Department Members List

Turn list items into a custom table

Get this format View on GitHub

Shared by Watana
Updated Dec 22, 2024

Department Members List formatting preview
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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "width": "=(170*7)+'px'",
      "display": "flex",
      "flex-direction": "column",
      "border": "2px solid #e5e5e5",
      "padding": "6px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "height": "48px",
          "width": "100%",
          "display": "flex",
          "padding-bottom": "6px",
          "font-size": "16px",
          "font-weight": "700"
        },
        "children": [
          {
            "txtContent": "EXECUTIVE MANAGEMENT",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "FINANCE",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "HR",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "IT",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "LEGAL",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "MARKETING",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          },
          {
            "txtContent": "R&D",
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "align-items": "center",
              "justify-content": "center",
              "text-align": "center",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary ms-fontColor-white"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "display": "flex"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_1]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_2]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_3]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_4]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_5]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_6]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "width": "100%",
              "display": "flex",
              "flex-direction": "column",
              "align-items": "center",
              "text-align": "center",
              "padding-bottom": "25px",
              "margin-left": "6px"
            },
            "attributes": {
              "class": "ms-bgColor-themeLighter"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "forEach": "obj in [$col_7]",
                    "elmType": "div",
                    "style": {
                      "margin-top": "25px"
                    },
                    "attributes": {
                      "class": "ms-fontColor-themeDark"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "defaultHoverField": "[$obj]",
                        "attributes": {
                          "class": "ms-borderColor-white ms-borderColor-themeSecondary--hover",
                          "src": "=getUserImage([$obj.email],'m')"
                        },
                        "style": {
                          "border-radius": "50%",
                          "border-style": "solid",
                          "border-width": "2px"
                        }
                      },
                      {
                        "txtContent": "[$obj.title]",
                        "elmType": "div",
                        "style": {
                          "font-weight": "700",
                          "font-size": "16px",
                          "padding": "0 4px"
                        }
                      },
                      {
                        "txtContent": "[$obj.jobTitle]",
                        "elmType": "div",
                        "style": {
                          "font-size": "14px",
                          "padding": "0 4px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiondepartment-members-list.json

From the contributor

How to use this sample

Summary

This sample demonstrates how to turn list items into a custom table and bring additional information from the Person column.

screenshot of the sample

View requirements

Required Type Internal Name
No Person or Group col_1
No Person or Group col_2
No Person or Group col_3
No Person or Group col_4
No Person or Group col_5
No Person or Group col_6
No Person or Group col_7

[!NOTE]

  • It is necessary to set the Show field value to Name (with picture and details) to display the jobTitle field from the Person column. (Related issue: SharePoint/sp-dev-docs#10063)
  • Set Allow multiple sections to Yes.
    screenshot of the sample

Sample

Solution Author(s)
department-members-list.json Watana

Version history

Version Date Comments
1.0 December 22, 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.

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Image Grid

This sample includes two formats to display images in Lists as grid - row formatter and tile formatter for Gallery view.

Explore format

Travel Tweets Board

This sample demonstrates using the board view to display travel tweets in a timeline format. Each tweet supports one image and one map link.

Explore format