Forum Discussion

AndyHoit's avatar
AndyHoit
Copper Contributor
May 09, 2019
Solved

SharePoint Date Column Color Formating

I am in SharePoint online in the new Experience. I have a date column called I am trying to modify the default Color formatting in a date column. I would like to change the first one from "before ...
SharePoint Online
  • Norman Young's avatar
    Norman Young
    May 13, 2019

    Hi AndyHoit,

     

    Code appended below.

     

    I hope this helps.

     

    Norm

     

    ===

     

    {
    "elmType": "div",
    "style": {
    "padding": "0 4px"
    },
    "attributes": {
    "class": {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    "@currentField",
    ""
    ]
    },
    "",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "<",
    "operands": [
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    "@currentField"
    ]
    }
    ]
    },
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    {
    "operator": "+",
    "operands": [
    "@now",
    -259200000
    ]
    }
    ]
    }
    ]
    }
    ]
    },
    "sp-css-backgroundColor-errorBackground50",
    {
    "operator": ":",
    "operands": [
    {
    "operator": "==",
    "operands": [
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    "@currentField"
    ]
    }
    ]
    },
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    "@now"
    ]
    }
    ]
    }
    ]
    },
    "sp-css-backgroundColor-blueBackground37",
    {
    "operator": ":",
    "operands": [
    {
    "operator": ">",
    "operands": [
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    "@currentField"
    ]
    }
    ]
    },
    {
    "operator": "Date()",
    "operands": [
    {
    "operator": "toDateString()",
    "operands": [
    "@now"
    ]
    }
    ]
    }
    ]
    },
    "sp-css-backgroundColor-successBackground50",
    ""
    ]
    }
    ]
    }
    ]
    }
    ]
    }
    },
    "txtContent": "@currentField"
    }

Norman Young's avatar
Norman Young
MVP
May 11, 2019

Hi AndyHoit,

 

Is this what you are looking for?

 

New code:

"operator": "<",
"operands": [
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
"@currentField"
]
}
]
},
{
"operator": "Date()",
"operands": [
{
"operator": "toDateString()",
"operands": [
{
"operator":"+",
"operands":[
"@now",
-259200000
]
} ]
}
]
}
]
},
"sp-css-backgroundColor-errorBackground50",

  • AndyHoit's avatar
    AndyHoit
    Copper Contributor
    May 12, 2019

    Norman YoungYes but I don't think I know enough to implement your code...?
    Here is my original and when I paste in your code and push save, it just clears it out. How do I incorporate your fix into my format? Thank you so much and sorry for me not knowing what I'm sure is a simple thing.


    {
      "elmType": "div",
      "style": {
        "padding": "0 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                ""
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "<",
                  "operands": [
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@currentField"
                          ]
                        }
                      ]
                    },
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@now"
                          ]
                        }
                      ]
                    }
                  ]
                },
                "sp-css-backgroundColor-errorBackground50",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@currentField"
                              ]
                            }
                          ]
                        },
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@now"
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    "sp-css-backgroundColor-errorBackground40",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": ">",
                          "operands": [
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@currentField"
                                  ]
                                }
                              ]
                            },
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@now"
                                  ]
                                }
                              ]
                            }
                          ]
                        },
                        "sp-css-backgroundColor-successBackground50",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }

    • Norman Young's avatar
      Norman Young
      MVP
      May 13, 2019

      Hi AndyHoit,

       

      Code appended below.

       

      I hope this helps.

       

      Norm

       

      ===

       

      {
      "elmType": "div",
      "style": {
      "padding": "0 4px"
      },
      "attributes": {
      "class": {
      "operator": ":",
      "operands": [
      {
      "operator": "==",
      "operands": [
      "@currentField",
      ""
      ]
      },
      "",
      {
      "operator": ":",
      "operands": [
      {
      "operator": "<",
      "operands": [
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      "@currentField"
      ]
      }
      ]
      },
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      {
      "operator": "+",
      "operands": [
      "@now",
      -259200000
      ]
      }
      ]
      }
      ]
      }
      ]
      },
      "sp-css-backgroundColor-errorBackground50",
      {
      "operator": ":",
      "operands": [
      {
      "operator": "==",
      "operands": [
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      "@currentField"
      ]
      }
      ]
      },
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      "@now"
      ]
      }
      ]
      }
      ]
      },
      "sp-css-backgroundColor-blueBackground37",
      {
      "operator": ":",
      "operands": [
      {
      "operator": ">",
      "operands": [
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      "@currentField"
      ]
      }
      ]
      },
      {
      "operator": "Date()",
      "operands": [
      {
      "operator": "toDateString()",
      "operands": [
      "@now"
      ]
      }
      ]
      }
      ]
      },
      "sp-css-backgroundColor-successBackground50",
      ""
      ]
      }
      ]
      }
      ]
      }
      ]
      }
      },
      "txtContent": "@currentField"
      }

      • AndyHoit's avatar
        AndyHoit
        Copper Contributor
        May 13, 2019

        ooohhh
        Norman Young 
        It is inverted. The counts today minus 3 days, instead of today plus three days.
        I would like it to be when it is three days away from today in the future. I tried flipping the value but it won't accept the + symbol over the - symbol.

         

Resources