JSON Dates Green/Yellow/Red

Question

I know the JSON column formatting has a built in setting, but it is more generic. Does anyone have something like the following

Due Date Column with a value of: 10/15/20

If today is 7 days out or greater, meaning if today was the 10/03/20 display as green box

If today is 3, 2 or 1 day out, meaning if today was the 10/13/20 display as a Yellow box

If today is the date 10/15/20 or past (10/16/20) display a red box.

Answer 1

Hi, SindersStephen-9617 ,

I have made an example according to your requirements, have a try on it.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "div",  
  "attributes": {  
    "class": "=if(@currentField <=@now ,'sp-field-severity--severeWarning',if(@currentField <=(@now+345600000)  ,'sp-field-severity--warning',if(@currentField >=(@now+604800000),'sp-field-severity--good','')))"  
  },  
  "children": [  
    {  
      "elmType": "span",  
      "style": {  
        "display": "inline-block",  
        "padding": "0 4px"  
      },  
      "attributes": {  
        "iconName": "=if(@currentField <=@now ,'ErrorBadge',if(@currentField <=(@now+345600000)  ,'Error',if(@currentField >=(@now+604800000),'Forward','')))"  
      }  
    },  
    {  
      "elmType": "span",  
      "txtContent": "@currentField"  
    }  
  ]  
}  

This is how it looks like in my end. The date of today is 10/29/2020.

Update Json:

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
  "elmType": "div",  
  "attributes": {  
    "class": "=if(@currentField <=@now ,'sp-field-severity--severeWarning',if(@currentField <=(@now+345600000)  ,'sp-field-severity--warning','sp-field-severity--good'))"  
  },  
  "children": [  
    {  
      "elmType": "span",  
      "style": {  
        "display": "inline-block",  
        "padding": "0 4px"  
      },  
      "attributes": {  
        "iconName": "=if(@currentField <=@now ,'ErrorBadge',if(@currentField <=(@now+345600000)  ,'Error','Forward'))"  
      }  
    },  
    {  
      "elmType": "span",  
      "txtContent": "@currentField"  
    }  
  ]  
}  

Reference: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

---

If the answer is helpful, please click Accept Answer and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.