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"
      }
   ]
}
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 | |
  • 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 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 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) – Ganesh Sanap Jul 26 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 | |
  • If you want to use the HEX color to change the background of cell then you can use background-color property inside style attribute. – Ganesh Sanap Jul 26 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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