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"
      }
   ]
}
Improve this question
2

3 Answers 3

Reset to default
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"
        }
    ]
}
Improve this answer
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: Commented 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 Commented 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) Commented 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"
    }
  ]
}
Improve this answer
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. Commented 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" 
        } 
    ] 
}
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.