JSON Formatting in SharePoint: Transform Lists Without Code

JSON Formatting in SharePoint: Transform Lists Without Code

Introduction

[Explain how JSON formatting enables UI enhancements without SPFx or scripts, improving adoption and usability.]

Prerequisites

• SharePoint Online list/library
• Permissions to modify list settings

Formatting Options Overview

Step-by-Step Guide

Step 1: Identify Business Scenario

[Define improvement: visualize status, highlight overdue items, add actionable buttons]

Step 2: Column Formatting Example

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Complete', 'sp-field-severity--good', 'sp-field-severity--warning')"
  },
  "children": [
    { "elmType": "span", "txtContent": "=@currentField" }
  ]
}

Step 3: View Formatting Example

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {"class": "ms-borderColor-neutralLight ms-borderWidth-1 ms-borderStyle-solid ms-rounded"},
    "children": [
      {"elmType": "div", "style": {"display": "flex", "justify-content": "space-between"}, "children": [
        {"elmType": "span", "txtContent": "@Title", "style": {"font-weight": "600"}},
        {"elmType": "span", "txtContent": "=@dueDate"}
      ]},
      {"elmType": "div", "txtContent": "=@Status", "attributes": {"class": "=if(@Status == 'Complete', 'sp-field-severity--good', 'sp-field-severity--low')"}}
    ]
  }
}

Step 4: Add Row Action Button

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Details",
  "customRowAction": {
    "action": "defaultClick"
  },
  "style": {"background-color": "#0078d4", "color": "white", "border": "none", "padding": "4px 8px"}
}

Step 5: Governance & Reuse

[Store JSON snippets in centralized repository; version changes]

Step 6: Performance & Usability Review

[Test layout responsiveness, accessibility contrast, mobile rendering]

Best Practices

• Keep formatting minimal—avoid over-styling
• Use conditional logic for clarity (e.g., risk flags)
• Centralize reusable patterns

Troubleshooting

Issue: Formatting not applied
Solution: Validate JSON schema URL & syntax

Issue: Slow list rendering
Solution: Simplify nested elements; remove heavy conditional chains

Key Takeaways

• JSON formatting accelerates UX improvements without deploying code.
• View formatting enhances list comprehension.
• Governance ensures consistent, maintainable patterns.

Next Steps

• Audit top 5 lists for formatting opportunities
• Build internal pattern catalog

Additional Resources

• Column Formatting
• View Formatting
• JSON Schema Reference

Which list will you modernize first?