SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Formatting a column when a date column is blank

This example populates the text content and applies different classes to the Status field depending on the value inside an item's DueDate field. 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 Ganesh Sanap
Updated Jul 18, 2020

Formatting a column when a date column is blank formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

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": "=if(Number([$DueDate]) == 0, 'Blank Date' , if([$DueDate] < @now, 'Expired', 'Active'))",
  "attributes": {
    "class": "=if(Number([$DueDate]) == 0, 'sp-field-severity--warning' , if([$DueDate] < @now, 'sp-field-severity--blocked', 'sp-field-severity--good'))"
  }
}
View sourceLink to this definitiondate-check-blank-format.json

From the contributor

How to use this sample

Summary

This example populates the text content and applies different classes to the Status field depending on the value inside an item's DueDate field. 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

The text content and classes applied are determined based on following conditions:

Condition txtContent Class
DueDate is blank Blank Date sp-field-severity--warning
DueDate < Now Expired sp-field-severity--blocked
Else Active sp-field-severity--good

View requirements

  • This format can be applied to a Single line of text or Choice column
  • An additional DateTime column with an internal name of DueDate

Sample

Solution Author(s)
date-check-blank-format.json Ganesh Sanap

Version history

Version Date Comments
1.0 July 18, 2020 Initial release

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 uses some predefined classes also covered in the official documentation of Column Formatting: