Format View with AdditionalRows in Modern List

Question

I set up column color coding based on the Due Date, but I want to extend that to the entire row.

• If the due date is within 30 days, the color is red.
• If the due date is within 60 days, the color is orange.
• If the due date is within 90 days, the color is yellow.
• Anything over 90 days, the color is green.

When I use the code below, it highlights my entire table.

{"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json","additionalRowClass": "=if([$DueDate] == @now,'',if([$DueDate] < @now, 'sp-css-backgroundColor-BgCoral',if([$DueDate] <= @now +  2592000000,'sp-css-backgroundColor-yellow',if([$DueDate] <= @now + 7776000000,'sp-css-backgroundColor-BgGold','sp-css-backgroundColor-BgMintGreen'))))"}

Answer 1

Try using JSON like below in view formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(Number([$DateColumn])==0,'',if([$DateColumn]>addDays(@now,90),'sp-css-backgroundColor-BgMintGreen',if([$DateColumn]>addDays(@now,60)&&[$DateColumn]<=addDays(@now,90),'sp-css-backgroundColor-yellow',if([$DateColumn]>addDays(@now,30)&&[$DateColumn]<=addDays(@now,60),'sp-css-backgroundColor-BgGold','sp-css-backgroundColor-BgCoral'))))"
}