IF/THEN for Conditional Formatting: Only Highlight IF Status Column = Open

Question

I have a list with a Status column and a Due Date column. I have the below JSON that highlights the Due Date column either red, yellow or green based on the relation to today's date. However, I really only want to do this if the Status column in the list is Open. Closed items should be grayed out ideally.

I'm having a hard time figuring out how to get an IF/THEN/ELSE to work with the below. I'm aiming for:

IF Status column is Open THEN apply the below formatting to the Due Date column. IF Status column is closed make the Due Date column highlighted in grey. I really appreciated any help if you have any ideas.

{
  "$schema": "https: //developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= @now, 'sp-field-severity--severeWarning', if(@currentField <= (@now+604800000), 'sp-field-severity--warning', 'sp-field-severity--good'))"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= @now, 'ErrorBadge', if(@currentField <= (@now+604800000), 'Error', 'Forward'))"
      }
    },
    {

can you provide the complete JSON you are using?

Ganesh Sanap - MVP
– Ganesh Sanap - MVP

2023-06-12 12:34:25 +00:00
Commented Jun 12, 2023 at 12:34 — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jun 12, 2023 at 12:34

Ganesh Sanap - MVP · Accepted Answer · 2023-06-12 12:52:05Z

You can create conditional elements using SharePoint JSON formatting based on the status column.

Example 1:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "padding": "10px",
        "display": "=if([$Status] == 'Open', 'block', 'none')",
        "width": "100px"
      },
      "attributes": {
        "class": "=if(@currentField <= @now, 'sp-field-severity--severeWarning', if(@currentField <= (@now+604800000), 'sp-field-severity--warning', 'sp-field-severity--good'))"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "=if(@currentField <= @now, 'ErrorBadge', if(@currentField <= (@now+604800000), 'Error', 'Forward'))"
          }
        },
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "txtContent": "@currentField"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "padding": "10px",
        "display": "=if([$Status] == 'Open', 'none', 'block')",
        "width": "100px"
      },
      "attributes": {
        "class": "ms-bgColor-gray40"
      },
      "txtContent": "@currentField"
    }
  ]
}

Where Status is the internal name of your column. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Output:

You can adjust CSS and your JSON accordingly.

Example 2:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "padding": "10px",
        "width": "100px"
      },
      "attributes": {
        "class": "=if([$Status] == 'Open', if(@currentField <= @now, 'sp-field-severity--severeWarning', if(@currentField <= (@now+604800000), 'sp-field-severity--warning', 'sp-field-severity--good')), 'ms-bgColor-gray40')"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "=if([$Status] == 'Open', if(@currentField <= @now, 'ErrorBadge', if(@currentField <= (@now+604800000), 'Error', 'Forward')), '')"
          }
        },
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "txtContent": "@currentField"
        }
      ]
    }
  ]
}

Output:

This ended up being the answer and for anyone coming behind - pay special attention to the documentation Ganesh provided regarding internal site column names. Apparently mine was _Status (with an underscore). When I added the underscore into the JSON provided by Ganesh the conditional formatting worked as expected. Thank you Ganesh! — Spinach2121
– Spinach2121, Commented Jun 12, 2023 at 18:27

Stack Exchange Network

IF/THEN for Conditional Formatting: Only Highlight IF Status Column = Open

1 Answer 1

Hot Network Questions

IF/THEN for Conditional Formatting: Only Highlight IF Status Column = Open

1 Answer 1

Related

Hot Network Questions