Overdue Flag

The Overdue Flag turns a plain due-date column into a live deadline indicator, so anyone scanning a SharePoint list can see at a glance what is past due or coming up fast. It is built with a standard Microsoft List and a small piece of column-formatting JSON. The flag reads the date against today: items past their date show a red Overdue flag, items due within three days show an amber Due soon flag, and everything else shows the date plainly - and because it reads the current column and the current date, it stays accurate every day with no maintenance.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Date and Time Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Compares a due or SLA date against today and flags it automatically, with no manual status to keep updated
• Items past their date show a red Overdue flag; items due within three days show an amber Due soon flag
• The date is shown bold and the flags sit in bright high-contrast pills, all on a fixed width so the column lines up
• On-track and future items show the date plainly, and blank dates show a neutral dash
• Uses the current column and the current date, so it re-evaluates every day on its own
• Pure column-formatting JSON, so nothing about the underlying data changes

Common Use Cases

• Task and project due dates
• Support ticket SLA deadlines
• Contract and license renewals
• Invoice and payment due dates
• Compliance and review deadlines
• Action item and follow-up tracking

Details

• Design Pattern: Status & Indicator Badges
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Because the JSON is applied at the column level, the Due Date column can use any name you want.
4. Items past their date are flagged Overdue and items due within three days are flagged Due soon – change the three-day window (259200000 milliseconds) in the JSON to match your own SLA.

How to Apply JSON code

1. On the Due Date column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "inline-flex",
    "align-items": "center",
    "min-height": "36px",
    "padding": "4px 0",
    "gap": "14px",
    "white-space": "nowrap"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "font-size": "15px",
        "font-weight": "700",
        "line-height": "20px",
        "color": "=if(@currentField == '', '#a19f9d', if(floor(Number(Date(@currentField)) / 86400000) < floor(Number(Date(@now)) / 86400000), '#a4262c', if((floor(Number(Date(@currentField)) / 86400000) - floor(Number(Date(@now)) / 86400000)) <= 3, '#8a6d00', '#323130')))"
      },
      "txtContent": "=if(@currentField == '', '-', toLocaleDateString(@currentField))"
    },
    {
      "elmType": "span",
      "style": {
        "display": "=if(@currentField == '', 'none', if(floor(Number(Date(@currentField)) / 86400000) < floor(Number(Date(@now)) / 86400000), 'inline-flex', if((floor(Number(Date(@currentField)) / 86400000) - floor(Number(Date(@now)) / 86400000)) <= 3, 'inline-flex', 'none')))",
        "align-items": "center",
        "justify-content": "center",
        "padding": "3px 11px 3px 8px",
        "border-radius": "10px",
        "font-size": "11px",
        "font-weight": "600",
        "line-height": "14px",
        "color": "#1b1b1b",
        "background-color": "=if(floor(Number(Date(@currentField)) / 86400000) < floor(Number(Date(@now)) / 86400000), '#ff8a8a', '#ffd24d')"
      },
      "children": [
        {
          "elmType": "span",
          "attributes": {
            "iconName": "=if(floor(Number(Date(@currentField)) / 86400000) < floor(Number(Date(@now)) / 86400000), 'Flag', 'Clock')"
          },
          "style": {
            "margin-right": "5px",
            "font-size": "12px",
            "line-height": "12px"
          }
        },
        {
          "elmType": "span",
          "txtContent": "=if(floor(Number(Date(@currentField)) / 86400000) < floor(Number(Date(@now)) / 86400000), 'Overdue', 'Due soon')"
        }
      ]
    }
  ]
}

Common Questions About the Overdue Flag