SharePoint  

How to Apply Conditional Formatting with JSON in SharePoint

Introduction

SharePoint has evolved into a powerful platform for building collaborative business solutions without heavy coding. One of its most useful modern features is List Formatting using JSON, which allows developers and power users to visually customize list views dynamically.

With JSON-based conditional formatting, you can highlight important data, change colors, add icons, and improve readability—all without using SharePoint Designer or complex custom development.

In this article, we’ll explore how to apply conditional formatting using JSON in SharePoint lists with practical examples.

What is JSON Formatting in SharePoint?

JSON formatting in SharePoint allows you to customize how list columns and views are displayed using a simple JSON schema.

It does not change the data, only the presentation layer.

You can use it to:

  • Highlight overdue tasks

  • Show status indicators (green/yellow/red)

  • Format priority levels

  • Add icons or emojis

  • Create progress bars

Where Can You Apply JSON Formatting?

You can apply JSON formatting in three main areas:

  1. Column Formatting – Format individual columns

  2. View Formatting – Format entire list views

  3. Row Formatting (legacy concept via view formatting) – Highlight entire rows based on conditions

How to Apply JSON Formatting in SharePoint

Step 1: Open Your SharePoint List

  • Go to your SharePoint site

  • Open the target list (e.g., Task List, Employee List)

Step 2: Open Column Settings

  • Click the column header

  • Select Column settings

  • Click Format this column

Step 3: Enter JSON Code

You will see a text editor where you can paste your JSON.

Basic Example: Highlight Status Column

1234

Let’s assume we have a column called Status with values:

  • Completed

  • In Progress

  • Not Started

JSON Code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "color": "black",
    "padding": "4px",
    "border-radius": "5px"
  },
  "attributes": {
    "class": "=if(@currentField == 'Completed', 'sp-field-severity--good', if(@currentField == 'In Progress', 'sp-field-severity--low', 'sp-field-severity--warning'))"
  },
  "txtContent": "@currentField"
}

Output Behavior:

  • Completed → Green background

  • In Progress → Yellow/Blue highlight

  • Not Started → Red/Warning style

Example 2: Highlight Overdue Tasks

Assume a DueDate column exists.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@now > @currentField, '#ffcccc', '')",
    "padding": "5px"
  },
  "txtContent": "@currentField"
}

Explanation:

  • If the current date is greater than the due date → background turns light red

  • Otherwise → default view

Example 3: Priority-Based Formatting

6

For a Priority column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "span",
  "style": {
    "font-weight": "bold",
    "color": "=if(@currentField == 'High', '#d13438', if(@currentField == 'Medium', '#ffb900', '#107c10'))"
  },
  "txtContent": "@currentField"
}

Output:

  • High → Red

  • Medium → Orange

  • Low → Green

Example 4: Add Icons Based on Status

5
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "style": {
        "padding-right": "6px"
      },
      "txtContent": "=if(@currentField == 'Approved', '✔️', if(@currentField == 'Rejected', '❌', '⏳'))"
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Best Practices for SharePoint JSON Formatting

  • Keep JSON simple and readable

  • Always test in a sample list before production use

  • Use consistent color coding across lists

  • Avoid over-formatting (too many styles reduce usability)

  • Document your JSON templates for reuse

Common Mistakes to Avoid

  • Missing commas or brackets in JSON

  • Using incorrect field names

  • Applying formatting to unsupported column types

  • Overusing nested conditions

Conclusion

JSON-based conditional formatting in SharePoint is a powerful way to enhance user experience without writing backend code. It helps users quickly interpret data and improves decision-making efficiency.

By mastering simple conditional logic with JSON, you can transform plain SharePoint lists into dynamic, visually rich dashboards.

Membership not found