0

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'))"
      }
    },
    {
1
  • can you provide the complete JSON you are using? Commented Jun 12, 2023 at 12:34

1 Answer 1

1

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:

enter image description here

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:

enter image description here

2
  • 1
    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! Commented Jun 12, 2023 at 18:27
  • Great, glad it worked for you! Commented Jun 12, 2023 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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