1

I am trying to set custom formatting for date field and followed the guide here: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#apply-conditional-formatting.

I have written the code below, but it doesn't respect multiple if conditions - none of the specified colors work unfortunately.

Perhaps someone could advice, what could be the issue?

{
   "$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"
      }
   ]
}
2

3 Answers 3

0

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"
        }
    ]
}
3
  • Thanks for your reply and suggestion. I am new to Jason, so i don't really know yet the exact differences between class, style and color. If i apply your suggestion, only the text is highlighted, so If i understand correctly Style and Color will apply to what is inside the cell, right? I have revisited my code and realised I had a logic mistake. The conditions I wanted to fullfil were:
    – lieptas
    Jul 26, 2020 at 11:49
  • conditions: 1. if currentField <= now + 7 days, then the cell is colored in red; 2. if currentField <= now + 14 days, the the cell is colored in gold, 3. if(currentfield <= now + 21 days, the cell is green
    – lieptas
    Jul 26, 2020 at 11:56
  • Yes, color property will change the color of text inside the cell. If you want to change the background color of the cell then you need to use background-color. Or you can use some predefined classes like sp-field-severity--blocked and so on (complete list is given in official documentation) Jul 26, 2020 at 13:55
0

I realised I had a logic mistake. The conditions I wanted to fulfil were:

  1. if currentField <= now + 7 days, then cell is colored in red;
  2. if currentField <= now + 14 days, the cell is colored in gold,
  3. ifcurrentfield <= now + 21 days, the cell is green

The following code worked as expected (except, I wasn't able to use HEX color codes and instead used Conditional formatting option titles based on Excel):

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= @now + 604800000,'sp-field-severity--blocked', if(@currentField <= @now + 1209600000, 'sp-field-severity--warning', if(@currentfield <= @now + 1814400000, 'sp-field-severity--good', 'sp-field-severity--good')))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= @now + 1814400000,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}
1
  • If you want to use the HEX color to change the background of cell then you can use background-color property inside style attribute. Jul 26, 2020 at 13:57
0

conditions:

  1. if currentField <= now + 10 days, then the cell is colored in red;
  2. if currentField <= now + 20 days, the the cell is colored in gold,
  3. if(currentfield <= now + 60 days, the cell is green – ( editing lieptas Jul 26 at 11:56)

Woould like the "GOOD" to apply to >60 days and the items @ 60 days to display as a darker golden color - any suggestions based on this:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.