JSON (JavaScript Object Notation) formatting in SharePoint customizes how list items are displayed without modifying the underlying data. This allows users to create visually engaging, interactive lists that improve usability and user experience.
This guide covers:
✔ What JSON formatting is
✔ Types of JSON formatting in SharePoint
✔ Step-by-step process to apply JSON formatting
✔ Examples of JSON customization
1. What is JSON Formatting in SharePoint?
JSON formatting in SharePoint allows users to apply custom styles, colors, icons, and layouts to list views, columns, and list forms. It helps in:
Enhancing data visualization – Apply colors, icons, and images for better readability.
Improving usability – Convert plain lists into interactive dashboards.
Providing conditional formatting – Change appearance based on field values.
No coding experience is required – JSON formatting uses simple rules-based syntax!
2. Types of JSON Formatting in SharePoint
1. Column Formatting
✔ Applies custom styling to a single column (e.g., colors, icons, bold text).
✔ Changes how individual values appear in a list.
Example Use Cases:
✔ Show status as colored labels (Pending = Yellow, Approved = Green, Rejected = Red).
✔ Display priority levels using icons instead of text.
✔ Format numbers as progress bars.
2. View Formatting
✔ Customizes how entire rows or list items are displayed.
✔ Can include buttons, cards, or different layouts.
Example Use Cases:
✔ Convert list items into interactive cards.
✔ Add clickable buttons (e.g., “Complete Task,” “View Details”).
✔ Show project tasks in a Kanban board layout.
3. Form Formatting
✔ Customizes the layout of the SharePoint form (New, Edit, and Display forms).
✔ Helps organize form fields visually.
Example Use Cases:
✔ Group related fields into sections.
✔ Hide/show fields dynamically based on conditions.
✔ Add instructional text for user guidance.
3. How to Apply JSON Formatting in SharePoint
A. Apply JSON Column Formatting
1️⃣ Open your SharePoint list.
2️⃣ Click the column header, then select “Column settings” > “Format this column”.
3️⃣ In the formatting pane, select “Advanced mode”.
4️⃣ Enter or paste JSON code to format the column.
5️⃣ Click Save to apply changes.
Example: Color-Coded Status Field
jsonCopyEdit{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"background-color": "=if([$Status] == 'Approved', 'green', if([$Status] == 'Pending', 'yellow', 'red'))",
"color": "white",
"padding": "5px",
"border-radius": "3px"
},
"children": [
{
"elmType": "span",
"txtContent": "[$Status]"
}
]
}
How it works:
✔ If the status is Approved, it appears Green.
✔ If the status is Pending, it appears Yellow.
✔ If the status is Rejected, it appears Red.
B. Apply JSON View Formatting
1️⃣ Go to your SharePoint list.
2️⃣ Click “All Items” (or any view name) > “Format current view”.
3️⃣ Select “Advanced mode” and enter JSON formatting code.
4️⃣ Click Save to apply the changes.
Example: Display List Items as Cards
jsonCopyEdit{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"template": "card",
"style": {
"background-color": "#f3f3f3",
"border": "1px solid #ccc",
"border-radius": "10px",
"padding": "10px"
},
"children": [
{
"elmType": "h3",
"style": { "color": "#0078D7" },
"txtContent": "[$Title]"
},
{
"elmType": "p",
"txtContent": "Status: [$Status]"
}
]
}
How it works:
✔ Converts list items into visual cards.
✔ Displays the Title in bold with a blue color.
✔ Shows the Status as part of the description.
C. Apply JSON Form Formatting
1️⃣ Open your SharePoint list.
2️⃣ Click “New” to open the form.
3️⃣ Select “Edit form” > “Configure layout”.
4️⃣ Choose “Header”, “Body”, or “Footer”, then enter JSON code.
5️⃣ Click Save to apply changes.
Example: Add a Custom Header to a Form
jsonCopyEdit{
"elmType": "div",
"style": {
"background-color": "#0078D7",
"color": "white",
"padding": "10px",
"border-radius": "5px"
},
"children": [
{
"elmType": "h2",
"txtContent": "New Employee Registration"
},
{
"elmType": "p",
"txtContent": "Please fill out all required fields."
}
]
}
How it works:
✔ Adds a custom header with a blue background.
✔ Displays a title and instructions for users.
4. Best Practices for JSON Formatting
✔ Use clear and meaningful formatting – Don’t overcomplicate the design.
✔ Test your JSON before applying – Use the Preview feature in SharePoint.
✔ Use conditional logic – Highlight important data dynamically.
✔ Keep it simple – Avoid excessive formatting that slows performance.
✔ Refer to Microsoft’s documentation – Find updates on JSON schemas.