Home

JSON Formula Help

%3CLINGO-SUB%20id%3D%22lingo-sub-956543%22%20slang%3D%22en-US%22%3EJSON%20Formula%20Help%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-956543%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20new%20to%20using%20JSON%20but%20I'm%20looking%20to%20do%20the%20following%20any%20help%20would%20be%20appreciated.%3C%2FP%3E%3CP%3EI%20have%20a%20Sharepoint%20list%20that%20has%20a%20Date%20Column%20labeled%20Expiration%20Date%20and%20I'd%20like%26nbsp%3B%3CSPAN%3Eto%20show%20green%20if%20a%20date%20is%20entered%20and%20is%20it%20%3C%2FSPAN%3E%3CU%3Enot%3C%2FU%3E%3CSPAN%3E%20within%2030%20days%20of%20expiring.%26nbsp%3B%20If%20the%20expiration%20date%20is%2030%20days%20or%20less%20of%20expiring%20I%E2%80%99d%20like%20it%20to%20turn%20red.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-956543%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-958200%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Formula%20Help%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-958200%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F332983%22%20target%3D%22_blank%22%3E%40spinman%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20was%20already%20a%20good%20example%20of%20docs.microsoft.com%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23apply-formatting-based-on-date-ranges%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23apply-formatting-based-on-date-ranges%3C%2FA%3E%26nbsp%3Bunder%20%22Formatting%20items%20based%20on%20arbitrary%20dates%20(advanced)%22%20title.%20I%20just%20tweaked%20a%20little%20bit%20to%20figure%20out%2C%20if%20field%20is%20empty.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20the%20example%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%22%24schema%22%3A%20%22%3CA%20href%3D%22%26lt%3Ba%20href%3D%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%20target%3D%22_blank%22%26gt%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%26lt%3B%2Fa%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%26gt%3B%22%2C%0A%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%22background-color%22%3A%20%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%26amp%3B%26amp%3B%22%2C%0A%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%22%3Dlength(%5B%24DueDate%5D)%20%26gt%3B%200%22%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%26lt%3B%3D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24DueDate%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%2B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40now%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2086400000%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%23ff0000%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22green%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%0A%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BYou%20just%20need%20to%20change%20%5B%24DueDate%5D%20to%20correspond%20your%20date%20time%20field%2C%20and%20if%20you%20copy%20example%20code%20directly%2C%20fix%20the%20schema%20as%20following%20(code%20snippet%20editor%20just%20adds%20unnecessary%20html%20tags)%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%22%24schema%22%3C%2FSPAN%3E%3CSPAN%3E%3A%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EResults%20are%20like%20this%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F151467iA6368A054F5E092C%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWas%20this%20something%20you%20were%20looking%20for%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-962384%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Formula%20Help%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-962384%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F5628%22%20target%3D%22_blank%22%3E%40Matti%20Paukkonen%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20help%20with%20this.%26nbsp%3B%20This%20works%20for%20this%20one.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20about%20this..%20I%20have%20a%20column%20called%20Effective%20Date%20and%20a%20column%20called%20Exp%20Date.%26nbsp%3B%20How%20would%20I%20go%20about%20coloring%20the%20Effective%20date%20green%20if%20its%20within%2030%20days%20of%20the%20Exp%20Date%20and%20red%20if%20its%20after%2030%20days%20of%20the%20exp%20date%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-977223%22%20slang%3D%22en-US%22%3ERe%3A%20JSON%20Formula%20Help%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-977223%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F332983%22%20target%3D%22_blank%22%3E%40spinman%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20an%20example.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22%3CA%20href%3D%22%26lt%3Ba%20href%3D%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%20target%3D%22_blank%22%26gt%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%26lt%3B%2Fa%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%26gt%3B%22%2C%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%22background-color%22%3A%20%0A%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%3Dlength(%5B%24EffectiveDate%5D)%20%26gt%3B%200%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%22operator%22%3A%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22operator%22%3A%22%26lt%3B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24EffectiveDate%5D%22%2C%22%5B%24ExpDate%5D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%2C%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%22operator%22%3A%22%3F%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22operator%22%3A%22%26lt%3B%22%2C%22operands%22%3A%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24EffectiveDate%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operator%22%3A%20%22%2B%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22operands%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%5B%24ExpDate%5D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%202592000000%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5D%7D%2C%22green%22%2C%22red%22%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%2C%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%2C%22%22%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENotice%20that%20actual%20value%20for%20comparing%20one%20month%20is%3A%26nbsp%3B2592000000%2C%20it%20was%20wrong%20on%20my%20first%20example.%3C%2FP%3E%3C%2FLINGO-BODY%3E
spinman
Occasional Contributor

I am new to using JSON but I'm looking to do the following any help would be appreciated.

I have a Sharepoint list that has a Date Column labeled Expiration Date and I'd like to show green if a date is entered and is it not within 30 days of expiring.  If the expiration date is 30 days or less of expiring I’d like it to turn red.

 

3 Replies
Highlighted

Hi @spinman,

 

There was already a good example of docs.microsoft.com: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#apply-fo... under "Formatting items based on arbitrary dates (advanced)" title. I just tweaked a little bit to figure out, if field is empty.

 

Here is the example:

 

 

 

{
   "$schema": "<a href="<a href="https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a</a>>",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "background-color": 
      
      {
         "operator": "&&",
         "operands": [
           "=length([$DueDate]) > 0",{
            "operator": "?",
            "operands": [
               {
                  "operator": "<=",
                  "operands": [
                     "[$DueDate]",
                     {
                        "operator": "+",
                        "operands": [
                           "@now",
                           86400000
                        ]
                     }
                  ]
               },
               "#ff0000",
               "green"
            ]
           }
         ]
      }
   }
}

 

 

 

 

 You just need to change [$DueDate] to correspond your date time field, and if you copy example code directly, fix the schema as following (code snippet editor just adds unnecessary html tags): 

 

Results are like this

clipboard_image_0.png

 

Was this something you were looking for?

Highlighted

Hi @Matti Paukkonen 

Thanks for your help with this.  This works for this one.

 

What about this.. I have a column called Effective Date and a column called Exp Date.  How would I go about coloring the Effective date green if its within 30 days of the Exp Date and red if its after 30 days of the exp date?

Highlighted

Hi @spinman,

 

Here is an example. 

 

{
    "$schema": "<a href="<a href="https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a>" target="_blank"><a href="https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a" target="_blank">https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json</a</a>>",
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
       "background-color": 
       
       {
          "operator": "?",
          "operands": [
            "=length([$EffectiveDate]) > 0",
            {"operator":"?",
            "operands":[
                {"operator":"<",
                "operands": [
                    "[$EffectiveDate]","[$ExpDate]"
                ]},"",
            
            {"operator":"?",
            "operands":[
                {"operator":"<","operands":[
                    "[$EffectiveDate]",
                    {
                       "operator": "+",
                       "operands": [
                          "[$ExpDate]",
                          2592000000
                       ]
                    }]},"green","red"

            ]},""
            ]}
            
            ,""
          ]
          
       }
    }
 }

 

 

Notice that actual value for comparing one month is: 2592000000, it was wrong on my first example.