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

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.

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 18, 2018

Strikethrough on Completion 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",
  "style": {
    "text-decoration": "=if([$Complete],'line-through','inherit')"
  },
  "attributes": {
    "class": "ms-fontColor-neutralPrimary"
  }
}
View sourceLink to this definitiontext-strikethrough.json

From the contributor

How to use this sample

Summary

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.

If this is NOT the title field, then the ms-fontColor-neutralPrimary class can be removed to ensure styles match.

screenshot of the sample

View requirements

  • This format can be applied to any column type (but is intended for text fields)
  • This format expects a Yes/No field with an internal name of Complete

Sample

Solution Author(s)
text-strikethrough.json Chris Kent

Version history

Version Date Comments
1.0 August 18, 2018 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

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

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.

Explore format