Conditional formatting of SharePoint columns with Json

%3CLINGO-SUB%20id%3D%22lingo-sub-1544459%22%20slang%3D%22en-US%22%3EConditional%20formatting%20of%20SharePoint%20columns%20with%20Json%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1544459%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20all%2C%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20new%20to%20json%20and%20would%20sincerely%20appreciate%20some%20help%20and%20guidance.%20I%20am%20trying%20to%20set%20conditional%20formatting%20for%20a%20date%20column%20given%203%20conditions%3A%20%3CEM%3E%3CSTRONG%3EDateField%3C%2FSTRONG%3E%20%26gt%3B%3D%26nbsp%3B%40now%20%2B%20%3CSTRONG%3E7%3C%2FSTRONG%3E%20days%3C%2FEM%3E%20%3B%26nbsp%3B%3CEM%3E%3CSTRONG%3EDateField%3C%2FSTRONG%3E%20%26gt%3B%3D%26nbsp%3B%40now%20%2B%20%3CSTRONG%3E14%3C%2FSTRONG%3E%20days%3C%2FEM%3E%3B%26nbsp%3B%3CEM%3E%3CSTRONG%3EDateField%3C%2FSTRONG%3E%20%26gt%3B%3D%26nbsp%3B%40now%20%2B%20%3CSTRONG%3E21%3C%2FSTRONG%3E%20days.%3C%2FEM%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20written%20the%20code%20based%20on%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23apply-conditional-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EMicrosoft%20documentation%20on%20column%20formatting%3C%2FA%3E%26nbsp%3Bbut%20it%20seems%20it%20does%20not%20with%20multiple%20conditions..%20Could%20someone%20please%20help%20to%20understand%20the%20problem%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EMy%20code%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%20%22%24schema%22%3A%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%22elmType%22%3A%22div%22%2C%0A%20%20%20%22attributes%22%3A%7B%0A%20%20%20%20%20%20%22class%22%3A%22%3Dif(%40currentField%20%26gt%3B%3D%20%40now%20%2B%20604800000%2C'%23FF6347'%2C%20if(%40currentField%20%26gt%3B%3D%20%40now%20%2B%201209600000%2C%20'%23FFD700'%2C%20if(%40currentfield%20%26gt%3B%3D%20%40now%20%2B%201814400000%2C%20'%2332CD32'%2C%20'')))%22%0A%20%20%20%7D%2C%0A%20%20%20%22children%22%3A%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%22elmType%22%3A%22span%22%2C%0A%20%20%20%20%20%20%20%20%20%22style%22%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%22inline-block%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%220%204px%22%0A%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%22attributes%22%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%22%3Dif(%40currentField%20%26gt%3B%3D%20%40now%20%2B%201814400000%2C'Error'%2C%20'')%22%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%22elmType%22%3A%22span%22%2C%0A%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%22%40currentField%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1544459%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-1545264%22%20slang%3D%22en-US%22%3ERe%3A%20Conditional%20formatting%20of%20SharePoint%20columns%20with%20Json%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1545264%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F739297%22%20target%3D%22_blank%22%3E%40mantas180%3C%2FA%3E%2C%26nbsp%3BI%20can%20see%20that%20you%20have%20mistakenly%20applied%20these%20conditions%20to%20%3CSTRONG%3Eclass%3C%2FSTRONG%3E%20instead%20of%20applying%20it%20to%20%3CSTRONG%3Ecolor%3C%2FSTRONG%3E%20property%20of%20%3CSTRONG%3Estyle%3C%2FSTRONG%3E%20attribute.%3C%2FP%3E%3CP%3ETry%20below%20JSON%20code%2C%20it%20should%20work%20for%20you%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%7B%0A%20%20%20%20%22%24schema%22%3A%20%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%2C%0A%20%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22color%22%3A%20%22%3Dif(%40currentField%20%26gt%3B%3D%20%40now%20%2B%20604800000%2C'%23FF6347'%2C%20if(%40currentField%20%26gt%3B%3D%20%40now%20%2B%201209600000%2C%20'%23FFD700'%2C%20if(%40currentfield%20%26gt%3B%3D%20%40now%20%2B%201814400000%2C%20'%2332CD32'%2C%20'')))%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22children%22%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20%22inline-block%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%20%220%204px%22%0A%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%22attributes%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22iconName%22%3A%20%22%3Dif(%40currentField%20%26gt%3B%3D%20%40now%20%2B%201814400000%2C'Error'%2C%20'')%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22elmType%22%3A%20%22span%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22txtContent%22%3A%20%22%40currentField%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20solve%20your%20issue.%20This%20will%20help%20others%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20content%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3E%3CSTRONG%3ELike%3C%2FSTRONG%3E%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Visitor

Hi all, 

 

I am new to json and would sincerely appreciate some help and guidance. I am trying to set conditional formatting for a date column given 3 conditions: DateField >= @now + 7 daysDateField >= @now + 14 daysDateField >= @now + 21 days.

 

I have written the code based on Microsoft documentation on column formatting but it seems it does not with multiple conditions.. Could someone please help to understand the problem?

 

My code:

{
   "$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType":"div",
   "attributes":{
      "class":"=if(@currentField >= @now + 604800000,'#FF6347', if(@currentField >= @now + 1209600000, '#FFD700', if(@currentfield >= @now + 1814400000, '#32CD32', '')))"
   },
   "children":[
      {
         "elmType":"span",
         "style":{
            "display":"inline-block",
            "padding":"0 4px"
         },
         "attributes":{
            "iconName":"=if(@currentField >= @now + 1814400000,'Error', '')"
         }
      },
      {
         "elmType":"span",
         "txtContent":"@currentField"
      }
   ]
}
1 Reply
Highlighted

@mantas180, I can see that you have mistakenly applied these conditions to class instead of applying it to color property of style attribute.

Try below JSON code, it should work for you:

 

 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "color": "=if(@currentField >= @now + 604800000,'#FF6347', if(@currentField >= @now + 1209600000, '#FFD700', if(@currentfield >= @now + 1814400000, '#32CD32', '')))"
    },
    "children": [{
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "=if(@currentField >= @now + 1814400000,'Error', '')"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}

 


Please click Mark as Best Response if my post helped you solve your issue. This will help others find the correct solution easily. It also closes the item. If the content was useful in other ways, please consider giving it Like.