SharePoint List Formatting
Back to column formats
Column formattingSharePoint 2019SharePoint Online

Overdue Date

This example colors the current field red when the value inside an item's DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - `@now`, which resolves to the current date/time, evaluated when the user loads the list view.

Get this format View on GitHub

Shared by Vesa Juvonen
Updated Aug 17, 2018

Overdue Date formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "=if([$DueDate] <= @now, 'ms-fontColor-redDark ms-fontWeight-semibold', '')"
  }
}
View sourceLink to this definitiondate-range-format.json

From the contributor

How to use this sample

Summary

This example colors the current field red when the value inside an item's DueDate is before the current date/time. Unlike some of the previous examples, this example applies formatting to one field by looking at the value inside another field. Note that DueDate is referenced using the [$FieldName] syntax. FieldName is assumed to be the internal name of the field. This example also takes advantage of a special value that can be used in date/time fields - @now, which resolves to the current date/time, evaluated when the user loads the list view.

screenshot of the sample

Although the color can be specified directly in a style property, the Fluent UI ms-fontColor-redDark class is used to ensure the color matches the defined Office styles.

View requirements

  • This format can be applied to any column type
  • An additional DateTime column with an internal name of DueDate

Sample

Solution Author(s)
date-range-format.json SharePoint Team

Version history

Version Date Comments
1.0 November 2, 2017 Initial release
1.1 March 22, 2018 Minor color adjustment
1.2 August 17, 2018 Changed color from style to class and switched to Excel-style expressions

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

This sample is also covered in the main documentation around Column Formatting

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.

Keep exploring

More formats like this

Color Based Emojis

This sample displays smiley faces (emojis) based on color. The format will add a smiley face (icon) which comes from Fluent UI.

Explore format

Traffic Light (Red-Yellow-Green) Status Indicator

This sample displays a traffic light style (Red-Yellow-Green) status indicator based on the value of a choice/text column (to use a lookup column, switch all occurrences of `@currentField` to `@currentField.lookupValue`).

Explore format

Strikethrough on Completion

Classic task lists add a strikethrough style to the task name when the task is marked as completed. This sample shows how to achieve this in a modern list view.

Explore format