Why I can't switch to design mode when formatting a column in a list?

Question

I am using Sharepoint 2019 and I would like to do something like this as mentioned in MSDN:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

And I have a list like this:

It's a very simple list, what I want to try is:

If customer name = "tester" then change to green color, or else red

  {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
   "attributes":{
      "class":"=if(@currentField == 'Tester', 'sp-field-severity--good', 'sp-field-severity--blocked') + ' ms-fontColor-neutralSecondary'"
   },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

But the above code does not have any effect. Later on I searched on the web and found out there's a "format column" button, however, it looks different to me:

The "Switch to design mode" button is missing:

Does sharepoint 2019 support this feature? or it only supports static formatting? If I change my code to

 {
   "$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType":"div",
   "attributes":{
      "class":"sp-field-severity--good ms-fontColor-neutralSecondary"
   },
   "children":[
      {
         "elmType":"span",
         "txtContent":"@currentField"
      }
   ]
}

It works as expected

Answer 1

All Excel-style expressions begin with an equal (=) sign. This style of expression is only available in SharePoint Online (not SharePoint 2019).

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#excel-style-expressions

You need to use basic styled syntax, please refer to https://social.technet.microsoft.com/Forums/windows/en-US/47ae9f86-1884-49c1-8b84-07168ba4df48/column-formatting-not-working?forum=SP2019

Answer 2

I've made an answer upon Julie's suggestion:

{
    "$schema":"https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
       "elmType":"div",
       "attributes":{
          "class":{
             "operator":"+",
             "operands":[
                {
                   "operator":"?",
                   "operands":[
                      {
                         "operator":"==",
                         "operands":[
                            "@currentField",
                            "Tester"
                         ]
                      },
                      "sp-field-severity--good",
                      {
                         "operator":"?",
                         "operands":[
                            {
                               "operator":"==",
                               "operands":[
                                  "@currentField",
                                  "Test2"
                               ]
                            },
                            "sp-field-severity--warning",
                            "sp-field-severity--blocked"
                         ]
                      }
                   ]
                },
                " ms-fontColor-neutralSecondary"
             ]
          }
       },
       "children":[
          {
             "elmType":"span",
             "txtContent":"@currentField"
          }
       ]
    }

Let me explain a little bit on this syntax regarding the "class" attribute:

The operator "+" represents concatenating 2 strings (which are the class names in my case) The json object inside "operands" is like an iif function

iif(expression, true, false)

The "operands" syntax in "?" operator is the expression if current field value equals tester:

{
   "operator":"==",
   "operands":[
      "@currentField",
      "Tester"
   ]
}

Next is the true expression: Put a "sp-field-severity--good" in it

"sp-field-severity--good"

And next will be the false expression which is same as the "?" operator same as above

The whole pseudo code will be like:

string finalClass = "";
If currentFieldValue == "Tester" Then
    finalClass = "sp-field-severity--good"
Else If currentFieldValue == "Test2" Then
    finalClass = "sp-field-severity--warning"
Else
    finalClass = "sp-field-severity--blocked"
End If

finalClass = finalClass + " ms-fontColor-neutralSecondary"

Please take note that there's a space before "ms-fontColor-neutralSecondary" because it's 2 classes The children attribute is the html code which will be generated in that field

   "children":[
      {
         "elmType":"span",
         "txtContent":"@currentField"
      }
   ]

So the element will be a "span" containing the value of current field