Conditional Format SharePoint List Due Dates with three conditions - RAG

I've tried searching for this seemingly everywhere and although there's lots of people with similar problems I've not found someone with this exact one and therefore this answer. Apologies if it is a...

SharePoint Online

TKLR_83
Mar 24, 2021
misce I was recently looking for a similar resource myself. If you are still in need, this code should work for you. If you don't like the exact RAG colors, you can easily replace the them with a different HEX (here is a great site for picking colors: https://hexcolor.co/color-picker)

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
        "background-color": "=if(Number(@currentField) == 0, '', if(@currentField >= @now + 2592000000, '#AFF8C9', if(@currentField >= @now + 86400000, '#EEBB2F', if(@currentField <= @now, '#F06C47',''))))"
    }
}

SteCoxy

Copper Contributor

Nov 26, 2021

This is exatly what I needed thank you! Would you know how I'd also make the data appear in bold, as well as having the background colours appear?

ganeshsanap

MVP

Feb 14, 2024

SteCoxy You can use font-weight parameter for showing text in bold.

Example:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if(Number(@currentField) == 0, '', if(@currentField >= @now + 2592000000, '#AFF8C9', if(@currentField >= @now + 86400000, '#EEBB2F', if(@currentField <= @now, '#F06C47',''))))",
    "font-weight": "bold"
  }
}

You can also use the similar expression as used for background-color if you want to show the bold text conditionally.

Please consider giving a Like if my post helped you in any way.

Forum Discussion

Conditional Format SharePoint List Due Dates with three conditions - RAG

Resources