Column Formatting JSON

Question

Column Formatting JSON

Michael 17,886

Dear all,

I am need of some help with JSON code writing for sharepoint lists.

I have tried multiple different variations but I can't seem to get

• Green box if list date is + 90 days →

• Yellow if list date is within 90 days

• Red if it is expired.

I am aware using designer you can have the traffic light for if it is (after today green), (if it is today yellow) and if (it is before today red).

If some can help by posting Json code to implement into list that would be very helpful.

Thank you.

Source link from TechNet

Answer 1

Jerry Xu-MSFT 7,791

Hi,

Please have a try with the JSON below, it works in my end.

{  
   "$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+7776000000)  ,'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+7776000000)  ,'Error','Forward'))"  
       }  
     },  
     {  
       "elmType": "span",  
       "txtContent": "@currentField"  
     }  
   ]  
 }

Update :

{  
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
   "elmType": "div",  
   "txtContent": "@currentField",  
   "style": {  
      "color": "=if(@currentField <=@now ,'#ff0000',if(@currentField <=(@now+7776000000)  ,'#F4D03F','#58FF33'))"  
        
   }  
}

{  
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",  
   "elmType": "div",  
   "txtContent": "@currentField",  
   "style": {  
      "background-color": "=if(@currentField <=@now ,'#ff0000',if(@currentField <=(@now+7776000000)  ,'#F4D03F','#58FF33'))"  
        
   }  
}

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.

needhelpwithJSON 1 Reputation point

2020-11-05T08:11:25.2+00:00

Dear JerryXu-MSFT,

Thank you for the JSON code yes it works well the only issue being implementing it onto nonwhite background lists and libraries as the colours of the sections don't work as well any chance of a JSON code with the same function but changeable HEX colour code sections?

Thank you for the help and time.
Jerry Xu-MSFT 7,791 Reputation points

2020-11-05T08:21:51.837+00:00

Hi, @needhelpwithJSON ,

I updated with new JSON, choose the one you need.
Jerry Xu-MSFT 7,791 Reputation points

2020-11-09T01:42:18.473+00:00

Hi, @needhelpwithJSON ,

Have you tried with the new JSON? Does it work for you?
needhelpwithJSON 1 Reputation point

2020-11-09T08:45:29.513+00:00
Dear Jerry Xu-MSFT,

Yes the second version is the one I used and changed the yellow and green only the red I couldn't figure out how but that is due to a lack of knowledge on my part.

the JSON I used ↓ {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if(@currentField <=@now ,'#ff0000',if(@currentField <=(@now +7776000000) ,'#96882b','#458b50'))"

}

}

THANK YOU for your help
Jerry Xu-MSFT 7,791 Reputation points

2020-11-12T06:10:15.417+00:00

Hi, @needhelpwithJSON ,

Do you want to use another color instead of red? Just change the '#ff0000' to something you like.

As the reply helps you, please accept it as answer. It will help other community members with similar question.
needhelpwithJSON 41 Reputation points

2021-01-18T12:24:49.43+00:00

Good Afternoon Jerry Xu-MSFT,

i have been using this JSON which you helped with and it has been working great the only issue being the background colour when the field is empty.
can you assist how do I change it that when they expire its red 90 days before expiry yellow, green when it's not in 90 days before expiry and background colour when there is no date input.
Any help would be appreciated.

Thank you.

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if(@currentField <=@now ,'#f53337',if(@currentField <=(@now +7776000000) ,'#96882b','#458b50'))"
}
}

Answer 2

Dear JerryXu-MSFT,

Thank you for the JSON code yes it works well the only issue being implementing it onto nonwhite background lists and libraries as the colours of the sections don't work as well any chance of a JSON code with the same function but changeable HEX colour code sections?

Thank you for the help and time.

Column Formatting JSON

2 answers

Activity