Forum Discussion

Copper Contributor

Aug 13, 2020

Solved

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: Color Picker Tool - Hex Colors)

{
    "$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',''))))"
    }
}

TKLR_83

Copper Contributor

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: Color Picker Tool - Hex Colors)

{

"$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.

emersonbruce
Copper Contributor
Feb 13, 2024
SteCoxy add additional items to the Style section based on your desired CSS