Conditional Formatting on Calculated Column Based on Another Column

New Contributor

Hello,

 

I am by no means a developer, but I am building a SharePoint list and can copy and paste JSON together to get where I need. I am currently trying to use conditional formatting on a calculated column, where if Payroll Type does not equal "nextSource", my calculated column grays out, displays italics, and a special icon.

 

A coworker of mine got to work on a previous list, but when I try to use the same JSON in my new list, it does not work. Here is the current list I am working with:

 

Screen Shot 2022-01-20 at 3.36.36 PM.png

and the corresponding JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": "ms-bgColor-communicationTint20"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": "Calculator"
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "@currentField.displayValue",
      "attributes": {
        "class": ""
      }
    }
  ]
}

And the previous JSON, that worked on an old list, but does not work in my new list:

 

Screen Shot 2022-01-20 at 3.38.01 PM.png

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "!=",
          "operands": [
            "[$Payroll_x0020_Type]",
            "nextSource"
          ]
        },
        "sp-css-color-neutralTertiary",
        "sp-css-backgroundColor-warningBackground50"
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "line-height": "16px",
        "height": "14px"
      },
      "attributes": {
        "iconName": {
          "operator": ":",
          "operands": [
            {
              "operator": "!=",
              "operands": [
                "[$Payroll_x0020_Type]",
                "nextSource"
              ]
            },
            "ErrorBadge",
            ""
          ]
        }
      }
    },
    {
      "elmType": "span",
      "style": {
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "padding": "0 3px"
      },
      "txtContent": "[$Day_x0020_Rate_x0020__x0028_with1.displayValue]",
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "!=",
              "operands": [
                "[$Payroll_x0020_Type]",
                "nextSource"
              ]
            },
            "sp-field-italic",
            ""
          ]
        }
      }
    }
  ]
}

 

Thanks for any ideas you may have.

0 Replies