# Turn overdue rows red in a SharePoint list

> For the full documentation index, see https://250highstreet.com/llms.txt

> Late items blend in with the rest of a SharePoint list. Use view formatting so any row past its due date turns red on its own, with no flow and no manual step.

Short answer: choose Format current view, open Advanced mode, and add "additionalRowClass": "=if(\[\$DueDate\] \<= addDays(@now, -1) && \[\$Status\] != '3 Done', 'sp-field-severity--blocked', '')". @now is the current date and time, so the rule is checked each time the list loads and nobody has to mark anything.

## Why late items blend in

A list of 80 items looks the same on every row. A task that was due last week sits between a task due next month and a task that is done. Your eye has no reason to stop on it. People scan, see nothing unusual, and move on.

Color fixes that. If late rows are red and everything else is plain, you see the problem in one second. You do not have to sort, filter or read dates.

## The one thing that does not work

Your first idea may be a calculated column that says "Late" when the due date has passed. This does not work. A calculated column cannot use today's date, because SharePoint blocks \[Today\] in formulas. The column would only work out its answer when the item is saved, so it goes stale the next day.

View formatting does not have this problem. It runs when the list is displayed, and it has a built-in value called @now that means "the current date and time." Microsoft's column formatting page describes @now and shows a due date compared with it. See the sources below.

## What formatting does and does not do

- It changes how rows look. It does not change the data in the list.
- Anyone who can create and manage views in the list can set it up.
- It applies to one view. Each view that should show red rows needs the same JSON.
- It does not send alerts. A red row is only seen by someone who opens the list. For messages, see "[Send a reminder before a due date in a SharePoint list](/guides/send-reminder-before-due-date/)".
- It is not security. Hiding or coloring rows does not stop anyone from seeing them.

Microsoft describes view formatting on its page "Use view formatting to customize SharePoint", linked at the end.

## Before you start

You need a list with these columns:

- Title. Rename it to something like "Task" so it reads well.
- Due date, a Date column.
- Status, a Choice column with numbered values, for example "1 Open", "2 In progress", "3 Done".
- Owner, a Person column (optional, but useful).

Test in a copy of the view first. Open View options, choose Save view as, give the copy a name, then format the copy.

## Step 1. Find the internal name of your due date column

The JSON refers to a column by its internal name, not its display name. If your column is called "Due date" the internal name can differ from what you see. Microsoft notes that spaces in a field name are written as \_x0020\_. For example, a column named "Due Date" is written as \$Due_x0020_Date.

One way to start: name the column DueDate with no space when you create it. Then the internal name is DueDate. If the column already exists with a space, use the \_x0020\_ form. You can also open the column settings and look at the end of the page address, which shows the internal name after "Field=".

## Step 2. Open Format current view

1.  Open your list in Microsoft 365.
2.  Select the view dropdown at the top right of the list. It shows the name of the current view.
3.  Choose Format current view. Exact names may differ on your screen.
4.  In the pane, under Choose layout, pick List. Row formatting applies to the List and Compact list layouts.
5.  Select Advanced mode if the pane offers it, so you can edit the JSON box.

The two properties for rows are rowFormatter and additionalRowClass. The second one is shorter, so I use it here.

## Step 3. Paste the JSON

Delete what is in the box after the first line that names the schema, or replace the whole box with this. Change DueDate and Status to match your internal names, and change "3 Done" to match your own Done choice exactly.

{

"\$schema": "[https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json](https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json)",

"additionalRowClass": "=if(\[\$DueDate\] \<= addDays(@now, -1) && \[\$Status\] != '3 Done', 'sp-field-severity--blocked', '')"

}

What it says, in plain words:

- \[\$DueDate\] is the due date of this row.
- addDays(@now, -1) is yesterday, at this time of day. A row turns red the day after its due date, not on the due date itself. Without this, an item due today turns red at midnight. People in different time zones may see the switch at slightly different hours. For a due date with no time of day, that rarely matters.
- && \[\$Status\] != '3 Done' means "and the item is not done." Done items stay plain.
- 'sp-field-severity--blocked' is a ready-made class that Microsoft's column formatting page lists with a red background. If it is empty, the row keeps its normal look.

This is the Microsoft pattern: an if statement that adds a class to a row, tested against @now. The if, addDays, @now and != pieces are all on Microsoft's "Formatting syntax reference" page. Test it on a copy of the view first.

## Step 4. Preview, then save

1.  Select Preview. Look for red rows.
2.  Check one row that you know is late. It should be red.
3.  Check one row due next week. It should be plain.
4.  Check one late row marked Done. It should be plain.
5.  Select Save.

If nothing changes, see "What to check if no rows turn red" below.

## Show two levels: late and due soon

Two colors can work better than one. Red means late. A softer color means due within 30 days. The way to do it is to nest one if inside another. Check the late case first, then the due-soon case.

Reuse Step 3 and add a second class for the due-soon case. Microsoft's column formatting page lists 'sp-field-severity--warning' with a yellow background. Paste this to color late rows red and rows due within 30 days warning:

=if(\[\$DueDate\] \<= addDays(@now, -1) && \[\$Status\] != '3 Done', 'sp-field-severity--blocked', if(\[\$DueDate\] \<= addDays(@now, 30) && \[\$Status\] != '3 Done', 'sp-field-severity--warning', ''))

Put it after "additionalRowClass": inside double quotes, as in Step 3. The late test comes first, so a late row gets the late class. Change 30 to the number of days you want.

## Leave out rows with no due date

Our advice, not a Microsoft rule: add && \[\$DueDate\] != '' to the test so rows with an empty due date are skipped. Microsoft's syntax page shows a comparison to '' in one of its examples, but it does not show a test for an empty date. Preview the result on your own list before you save.

## Color just the due date cell

Row color needs the view JSON. To color only the date cell, open the menu under the column, choose Column Settings, then Format this column, and use column formatting JSON. This version uses the date column format from Microsoft's syntax page:

{

"\$schema": "[https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json](https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json)",

"elmType": "div",

"txtContent": "=toLocaleDateString(@currentField)",

"style": {

"background-color": "=if(@currentField \<= addDays(@now, -1), '#ffcccc', '')"

}

}

What you should see: late due dates sit on a light red background, and the rest of the row stays plain. This version does not look at Status, so finished items with a past date also show the color. Our advice, not a Microsoft rule: use the row version when Status matters. Our advice, not a Microsoft rule: preview a row with an empty due date; if its cell colors, add && @currentField != '' inside the if.

## Filters that need the classic view editor

You may want to get the same result with a filter instead of color. A filter hides rows. It does not color them. If you want a separate "Overdue" view that shows only late items, a filter that uses \[Today\] or \[Me\] needs the classic view editor. Open Edit current view, then Filters, in the classic view editor.

Color and a filtered view work well together. Keep the main view in color for the whole team, and make an Overdue view for the person who chases late work. For the full pattern, see "[Late tasks nobody notices: setting up late alerts](/guides/late-tasks-nobody-notices/)".

## What to check if no rows turn red

- The column name. The internal name must match. A wrong name gives no error on the page, just no color.
- The Status text. '3 Done' in the JSON must match the choice exactly, including the number and the space.
- The view. Formatting is saved per view. Look at the view you formatted.
- The layout. Row formatting applies to List and Compact list. It does not apply to Gallery or Board, which use the formatter property.
- Curly quotes. If you pasted from a document, quotes may have changed shape. Retype them in the box.
- The column is in the view. Microsoft notes that a reference to another column works only if that column is included in the same view. Make sure Due date and Status are shown.

If you get stuck, add "debugMode": true to the JSON. The syntax page says it prints error messages and warnings to the browser console. Remove it when you are done.

## What to avoid

- Do not build a calculated column to find late items. It cannot use today's date.
- Do not mark items "Late" by hand. A hand-marked status is only as current as the last person who touched it.
- Do not color everything. One color for late is enough to start.
- Do not paste JSON into the live view without a test. Use a copy.
- Do not treat red rows as an alert. People who never open the list will never see them.
- Do not rely on a view to hide data. Views are not security.

## Honest limits

View formatting is for looking, not for acting. It cannot send a message or change an item. It also needs a modern list. If your team still uses a classic view, the Format current view option may not appear. Exact names and what is offered can differ by version and by what your admin allows, so check with your admin if the option is missing.

A tracker for help desk requests is a good place to try this. See "[Help desk ticket tracker in a SharePoint list](/guides/help-desk-tracker-sharepoint/)".

## When to get help

You can build all of this yourself in Microsoft 365. If you would rather have it built and tested for your team, I do that. A tracker like this is a fixed price: \$5,000 for one, built in 2 weeks. See "[What a SharePoint tracker costs to build](/guides/what-a-sharepoint-tracker-costs/)". Bring one example of the problem to a free call.

I am Al Davies. I run 250 High Street LLC and build SharePoint trackers and Power Automate flows for operations teams. I work remotely. The first call is free, and I will not try to sell you anything.

See trackers I built: [Tools I built](/portfolio/)

## FAQ

### Can I turn overdue rows red with a calculated column?

No. A calculated column cannot use today's date, because SharePoint blocks \[Today\] in formulas. View formatting can use @now, which is the current date and time when the list loads.

### How do I color a SharePoint list row when a date is within 30 days?

Use addDays(@now, 30) in the view formatting rule and test the date against it. The "Show two levels" section has a ready-to-paste rule.

### How do I conditionally format a SharePoint list based on a date that may be blank?

Our advice, not a Microsoft rule: add && \[\$DueDate\] != '' to the test so empty dates are skipped, and preview before you save.

### Can SharePoint list formatting use a date relative to today?

Yes. @now is the current date and time, and addDays(@now, 3) or addDays(@now, -1) moves it forward or back by days.

### Will done items stay red?

Not with the rule in Step 3. It adds "and the item is not done" to the test. Change the Done choice in the JSON to match yours, with its number, or finished items will look late.

## Sources

- [Microsoft Support, Use filtering to modify a SharePoint view](https://support.microsoft.com/en-us/office/use-filtering-to-modify-a-sharepoint-view-3d8efc52-0808-4731-8f9b-3dfaeacea3d4)
- [Microsoft Learn, Use view formatting to customize SharePoint](https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting)
- [Microsoft Learn, Use column formatting to customize SharePoint](https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting)
- [Microsoft Learn, Formatting syntax reference](https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference)

## Related guides

- [Late tasks nobody notices: setting up late alerts](/guides/late-tasks-nobody-notices/)
- [Show each person only their own items in a SharePoint list view](/guides/sharepoint-list-view-filter-current-user/)
- [Make a readable HTML table in a flow email](/guides/power-automate-create-html-table-formatting/)

Source: https://250highstreet.com/guides/highlight-overdue-rows-sharepoint-list/