Conditional Formatting for Lists

Occasional Visitor

Hello, I am trying to build a conditional formatting for a due date. I would like it red for overdue (past today's date), "sp-css-backgroundColor-errorBackground" for dates within 30 days of today, and "sp-css-backgroundColor-warningBackground" for dates within 60 days of today.  Could someone help me with JSON that I can import into Lists on Teams (should be the same as lists on Sharepoint)?

 

I'm not familiar with the composition and options for JSON fields relative to Microsoft. I'd also appreciate documentation so I can solve my own problems like this in the future. 

Thanks in advance!

 

Here is the template code provided (doesn't match my conditions):

{
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "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-warningBackground",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@currentField"
                          ]
                        }
                      ]
                    },
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@now"
                          ]
                        }
                      ]
                    }
                  ]
                },
                "sp-css-backgroundColor-successBackground",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": ">",
                      "operands": [
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@currentField"
                              ]
                            }
                          ]
                        },
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@now"
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    "sp-css-backgroundColor-errorBackground",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                ""
              ]
            },
            "",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "<",
                  "operands": [
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@currentField"
                          ]
                        }
                      ]
                    },
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@now"
                          ]
                        }
                      ]
                    }
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@currentField"
                              ]
                            }
                          ]
                        },
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@now"
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": ">",
                          "operands": [
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@currentField"
                                  ]
                                }
                              ]
                            },
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@now"
                                  ]
                                }
                              ]
                            }
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "@currentField.displayValue",
      "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"
                          ]
                        }
                      ]
                    }
                  ]
                },
                "",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@currentField"
                              ]
                            }
                          ]
                        },
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@now"
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    "",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": ">",
                          "operands": [
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@currentField"
                                  ]
                                }
                              ]
                            },
                            {
                              "operator": "Date()",
                              "operands": [
                                {
                                  "operator": "toDateString()",
                                  "operands": [
                                    "@now"
                                  ]
                                }
                              ]
                            }
                          ]
                        },
                        "",
                        ""
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ]
}
0 Replies