Use JSON Formatting to Highlight Overdue Items: Step-by-Step Setup

You have a SharePoint list with due dates, and you want items past their deadline to stand out automatically. Without formatting, overdue items look exactly like current ones, making it easy to miss critical tasks. SharePoint list JSON formatting lets you change cell or row colors based on date conditions. This article explains the JSON code you need and walks through the exact steps to apply it to any SharePoint list column.

How JSON Formatting Works for Date Conditions

JSON formatting in SharePoint lists uses a simple set of key-value pairs to change the appearance of columns or rows. You do not need programming experience. The formatting engine runs inside the browser when a user opens the list. It does not modify the underlying data.

The core logic for overdue items uses the @now operator, which returns the current date and time. You compare this value against your date field, typically called [$DueDate] or [$Deadline]. When the date field is earlier than @now, the item is overdue.

Prerequisites

Before you start, confirm these conditions are met:

• You have a SharePoint list with a Date and Time column named DueDate or an equivalent date field.
• You have at least Edit permissions on the list to modify column settings.
• You are using a modern SharePoint list view (not a classic view).

Steps to Apply Column-Level JSON Formatting for Overdue Items

This method changes the background color of the DueDate column cells when the date is in the past.

1. Open your SharePoint list
   Navigate to the list that contains the due date column. Click any item to ensure you are in the list view.
2. Open column settings
   Select the column header for your date field. Click the dropdown arrow and choose Column settings then Format this column.
3. Switch to JSON editor
   In the Format column pane, click Advanced mode at the bottom. This opens a text editor where you can paste JSON code.
4. Paste the overdue highlight JSON
   Copy and paste the following code into the editor:
   {
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if(@currentField < @now, 'red', 'transparent')", "color": "=if(@currentField < @now, 'white', 'inherit')", "padding": "5px" } }
5. Preview and save
   Click Preview to see the effect. If items with dates in the past show a red background, click Save. If not, check that your date column name matches the field used in the JSON.

Steps to Apply Row-Level JSON Formatting for Overdue Items

Row formatting highlights the entire row when any column meets the overdue condition. This is useful when you want the overdue status to be visible even if the date column is scrolled out of view.

1. Open list view formatting
   From your SharePoint list, click the Format current view button near the top right of the list. It looks like a paintbrush icon.
2. Switch to advanced mode
   In the Format view pane, click Advanced mode to open the JSON editor for row formatting.
3. Paste the row-level JSON
   Paste the following code into the editor:
   {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"additionalRowClass": "=if([$DueDate] < @now, 'ms-bgColor-red ms-fontColor-white', '')" }
   Replace [$DueDate] with your actual date field internal name if it differs.
4. Save the view
   Click Save to apply the row formatting. Overdue rows will now have a red background with white text.

Common Mistakes and Limitations

JSON does not highlight items due today

The condition @currentField < @now treats items due today as not overdue because @now includes the current time. If a task is due at midnight and the current time is 10:00 AM, the date field is technically still today and not less than now. To include today, use <= instead of < in the comparison operator.

Column internal name mismatch

If your date column is named "Due Date" with a space, the internal name is Due_x0020_Date. Using [$Due Date] in the JSON will not work. To find the internal name, go to list settings, click the column, and look at the URL parameter Field=. Use that value inside [$...].

Formatting does not appear in print or export

JSON formatting is a visual-only change. It does not affect data when you print the list view or export to Excel. The overdue condition must be evaluated separately if you need formatted output in reports.

Column Formatting vs Row Formatting: Key Differences

Item	Column Formatting	Row Formatting
Scope	Only the formatted column cell	Entire row of the list item
JSON schema	Column formatting schema	Row formatting schema
Where to apply	Column settings > Format this column	Format current view > Advanced mode
Best for	Highlighting a single date cell	Making overdue items visible from any column

You can now apply JSON formatting to highlight overdue items in your SharePoint lists. Start with column formatting to test the condition on a single cell. Then move to row formatting if you need the entire row to change color. For more advanced conditions, explore the @now operator combined with additional fields like [$Status] to highlight only overdue items that are not marked complete.