Org Chart Card (Column Formatting)
Overview
- Each person’s row renders as a card in the formatted column, led by a reports-to chip showing the manager’s photo and name
- The person and the manager are Person columns, so each card shows their real Microsoft 365 profile photos
- Both the person’s name and the manager’s name are clickable links that open a new email to that person
- A department-colored ring and a connector line place the person below their manager in the hierarchy
- People at the top of the organization show a Top of organization label instead of a manager
- Built as column-formatting JSON on the person column, so it works in a standard List view without changing the data
Common Use Cases
- Company or department org chart
- New-hire onboarding (who reports to whom)
- Reorg planning and team mapping
- Approver and escalation paths
- Project team and reporting structure
- Leadership and management directory
Required Columns
| Display name | Column type | Internal name |
|---|---|---|
| Employee | Person or Group | [Employee] |
| Job Title | Single line of text | [JobTitle] |
| Department | Choice | [Department] |
| Reports To | Person or Group | [ReportsTo] |
Before You Paste
- Build a list with these four columns before you paste the JSON.
- Then populate the list, choosing each person and their manager from the people picker.
- Internal column names (in brackets) must match the JSON exactly.
How to Apply
- Select the Employee column header, then Column settings, then Format this column.
- Switch to Advanced mode.
- Paste the JSON below and click Save.
- Widen the Employee column and hide the other columns from the view, so each row shows just the card.
JSON Code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"width": "240px",
"padding": "14px 16px 18px 16px",
"box-sizing": "border-box",
"border": "1px solid #edebe9",
"border-radius": "8px",
"background-color": "#ffffff"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "center",
"max-width": "100%",
"padding": "3px 10px 3px 3px",
"border-radius": "12px",
"background-color": "#f3f2f1",
"border": "1px solid #e1dfdd",
"color": "#605e5c",
"font-size": "11px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"width": "18px",
"height": "18px",
"flex-shrink": "0",
"margin-right": "5px",
"display": "=if([$ReportsTo.title] == '', 'none', 'block')"
},
"children": [
{
"elmType": "div",
"style": {
"width": "18px",
"height": "18px",
"border-radius": "50%",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"background-color": "#c8c6c4",
"color": "#ffffff",
"font-size": "9px",
"font-weight": "700"
},
"txtContent": "=substring([$ReportsTo.title], 0, 1)"
},
{
"elmType": "img",
"attributes": {
"src": "[$ReportsTo.picture]",
"title": "[$ReportsTo.title]"
},
"style": {
"position": "absolute",
"top": "0px",
"left": "0px",
"width": "18px",
"height": "18px",
"border-radius": "50%",
"object-fit": "cover",
"display": "=if([$ReportsTo.picture] == '', 'none', 'block')"
}
}
]
},
{
"elmType": "a",
"attributes": {
"href": "=if([$ReportsTo.email] == '', '', 'mailto:' + [$ReportsTo.email])",
"target": "_blank"
},
"style": {
"color": "#605e5c",
"text-decoration": "none",
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap",
"display": "=if([$ReportsTo.title] == '', 'none', 'inline')"
},
"txtContent": "='Reports to ' + [$ReportsTo.title]"
},
{
"elmType": "span",
"style": {
"display": "=if([$ReportsTo.title] == '', 'inline', 'none')"
},
"txtContent": "Top of organization"
}
]
},
{
"elmType": "div",
"style": { "width": "2px", "height": "14px", "background-color": "#e1dfdd", "margin": "2px 0 6px 0" }
},
{
"elmType": "div",
"style": {
"position": "relative",
"width": "52px",
"height": "52px",
"flex-shrink": "0",
"margin-bottom": "8px"
},
"children": [
{
"elmType": "div",
"style": {
"width": "52px",
"height": "52px",
"border-radius": "50%",
"box-sizing": "border-box",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"color": "#ffffff",
"font-size": "17px",
"font-weight": "700",
"border": "='3px solid ' + if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', '#c8c6c4'))))",
"background-color": "=if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', '#8a8886'))))"
},
"txtContent": "=substring([$Employee.title], 0, 1) + if(indexOf([$Employee.title], ' ') == -1, '', substring([$Employee.title], indexOf([$Employee.title], ' ') + 1, indexOf([$Employee.title], ' ') + 2))"
},
{
"elmType": "img",
"attributes": {
"src": "[$Employee.picture]",
"title": "[$Employee.title]"
},
"style": {
"position": "absolute",
"top": "0px",
"left": "0px",
"width": "52px",
"height": "52px",
"border-radius": "50%",
"object-fit": "cover",
"box-sizing": "border-box",
"border": "='3px solid ' + if([$Department] == 'Engineering', '#0078d4', if([$Department] == 'Marketing', '#8764b8', if([$Department] == 'Operations', '#107c10', if([$Department] == 'Finance', '#ca5010', '#c8c6c4'))))",
"display": "=if([$Employee.picture] == '', 'none', 'block')"
}
}
]
},
{
"elmType": "a",
"attributes": {
"href": "=if([$Employee.email] == '', '', 'mailto:' + [$Employee.email])",
"target": "_blank"
},
"style": { "font-size": "15px", "font-weight": "600", "color": "#0078d4", "text-decoration": "none", "text-align": "center" },
"txtContent": "[$Employee.title]"
},
{
"elmType": "div",
"style": { "font-size": "13px", "color": "#605e5c", "text-align": "center", "margin-top": "2px" },
"txtContent": "[$JobTitle]"
},
{
"elmType": "div",
"style": {
"font-size": "11px",
"font-weight": "600",
"margin-top": "8px",
"padding": "2px 10px",
"border-radius": "12px",
"color": "=if([$Department] == 'Engineering', '#0c447c', if([$Department] == 'Marketing', '#3b2e58', if([$Department] == 'Operations', '#0b3b09', if([$Department] == 'Finance', '#7a3309', '#3b3a39'))))",
"background-color": "=if([$Department] == 'Engineering', '#e6f1fb', if([$Department] == 'Marketing', '#f0ebf8', if([$Department] == 'Operations', '#eaf3de', if([$Department] == 'Finance', '#fbeee0', '#f3f2f1'))))"
},
"txtContent": "[$Department]"
}
]
}Common Questions About the Org Chart Card
What is the Org Chart Card built with?
It is built with a standard Microsoft List (SharePoint list) and column-formatting JSON applied to the person column. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a polished org view without ongoing development overhead.
What columns does it need?
It needs four columns: an Employee person column for the card’s subject, a ReportsTo person column for their manager, a JobTitle text column, and a Department choice column. The card refers to each by its internal name, so the JSON and the columns must line up exactly – in this example those internal names are Employee, JobTitle, Department, and ReportsTo.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.
If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?
Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how existing columns and views look, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.
How does the card show the reporting line?
Each card leads with a reports-to chip that shows the manager’s own profile photo and name, read from the ReportsTo person column, followed by a short connector line down to the person’s larger photo – so the card reads as a position sitting under its manager. Anyone with no manager filled in shows a Top of organization label instead.
Can Greg build an org view like this for our team?
Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your org view.
