How to correctly pass argument to final 'if' conditional when column formatting using JSON?

Question

Based on the example here, I am using the following JSON to add icons next to column values, depending on their value:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children":
    [
        {
            "elmType": "span",
            "style":
            {
                "display": "inline-block",
                "padding": "0 10px 0 0"
            },
            "attributes":
            {
                "iconName": "=if(@currentField == 'Value 01', 'TextDocument', if(@currentField == 'Value 02', 'FileImage', if(@currentField == 'Value 03', 'MSNVideos', if(@currentField == 'Value 04', 'Website', 'Website'))))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}

There is an anomaly with the last if conditional, whereby there are two arguments, i.e.:

if(@currentField == 'Value 04', 'Website', 'Website')

Whereas, in order to look like the other if conditionals, there should be just one, i.e.:

if(@currentField == 'Value 04', 'Website')

However, when I remove that second argument, and use the code directly above this sentence, the desired formatting is not applied (no icons are shown at all).

Why does the final if conditional seemingly need two arguments?

Note that the original example provided at the beginning of this question also has two arguments for the last conditional.

Answer 1

The if expression requires 3 arguments:

• Condition
• TRUE result
• FALSE result

When you are nesting if expressions you are providing the nested if expression as the FALSE result. Generally, the final FALSE result is the default result (when nothing else matches use this). So, with your nested conditions the last if is unnecessary and can just be replaced with the default value.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children":
    [
        {
            "elmType": "span",
            "style":
            {
                "display": "inline-block",
                "padding": "0 10px 0 0"
            },
            "attributes":
            {
                "iconName": "=if(@currentField == 'Value 01', 'TextDocument', if(@currentField == 'Value 02', 'FileImage', if(@currentField == 'Value 03', 'MSNVideos', 'Website')))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}

Expressions are written on a single line which makes them hard to follow when you've got anything but a simple expression. The iconName expression is easier to understand if broken across lines:

=if(@currentField == 'Value 01',
    'TextDocument',
    if(@currentField == 'Value 02',
        'FileImage',
        if(@currentField == 'Value 03',
            'MSNVideos',
            'Website'
        )
    )
)

As you can see above every if expression has 3 arguments. Hope that helps!

Answer 2

Try using this:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children":
    [
        {
            "elmType": "span",
            "style":
            {
                "display": "inline-block",
                "padding": "0 10px 0 0"
            },
            "attributes":
            {
                "iconName": "=if(@currentField == 'Value 01', 'TextDocument', if(@currentField == 'Value 02', 'FileImage', if(@currentField == 'Value 03', 'MSNVideos', if(@currentField == 'Value 04', 'Website', ''))))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "@currentField"
        }
    ]
}