JSON code for SharePoint List conditional formatting - check for value in a single line text cell

Question

I don't know any JSON at all, I work at an IT help desk and am trying to do a little advanced conditional formatting for our SharePoint list, which contains a user database of sorts.

We're currently going through and filling in the host name for all of the computers on our network in a single line text type column called "Computer Name."

To help the team keep track of which ones have been done, I need simple statement that would check

If the field in "Computer Name" column is blank, and if it is, then turn the background red.
If field in "Computer Name" is not blank (a.k.a a value is entered), turn the background green.

I found some code online that worked sort of in that if text was added to an empty cell it turned it green, but if that text was then removed, the cell remained green. I also could not seem to get the if blank, make the bg red part working at all.

TLDR
If text is added to the cell - turn background green
If text is removed from the cell so that the cell is empty, change it to red.

Ganesh Sanap - MVP · Accepted Answer · 2023-10-31 06:46:36Z

You have to use the SharePoint JSON column formatting for your requirements.

It can be easily achieved using below JSON (easy to read and understand):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if(@currentField, 'green', 'red')",
    "color": "white",
    "padding-left": "15px"
  }
}

Output:

You can also check the column values using internal name of list columns like:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "[$ComputerName]",
  "style": {
    "background-color": "=if([$ComputerName] == '', 'red', 'green')",
    "color": "white",
    "padding-left": "15px"
  }
}

Where ComputerName is the internal name of your SharePoint list column.

You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?

Output:

Steps to apply SharePoint JSON column formatting are given in below Microsoft official documentation.

Microsoft official documentation:

Use column formatting to customize SharePoint

Paul Lucas · Accepted Answer · 2023-10-31 00:29:31Z

You can do this without knowing the json syntax, via the conditional formatting tools (the tool will automatically set up the json for you).

To get to this tool, from the view menu select Format current view

Then Format Columns > Choose Column > Manage Rules

The generated json will be something like this

        {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "0 2px",
        "overflow": "hidden",
        "text-overflow": "ellipsis"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$ComputerName]",
                ""
              ]
            },
            "sp-css-backgroundColor-BgCoral sp-css-borderColor-CoralFont sp-css-color-CoralFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "!=",
                  "operands": [
                    "[$ComputerName]",
                    null
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                ""
              ]
            }
          ]
        }
      },
      "txtContent": "[$ComputerName]"
    }

Hi, this would normally be true but I want to say if Computer name is not equal to NULL turn the cell green. I don't think the gui allows you to leave the cell blank for the conditional statement. — user3081579
– user3081579, Commented Oct 31, 2023 at 15:06

Stack Exchange Network

JSON code for SharePoint List conditional formatting - check for value in a single line text cell

2 Answers 2

Your Answer

Hot Network Questions

JSON code for SharePoint List conditional formatting - check for value in a single line text cell

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions