Custom column formatting: Display an array of elements conditionally

Question

In SharePoint Online, I have a list with a column that uses custom column formatting.

I want to display one of two sets of flow buttons, based on the content type.

I'm trying to use the {"operation"/"operands"} format as the value for the "children" property, where the value to display is one or other array of children. But it's not working - neither one is displayed, it's just blank.

This is my display formatting JSON:

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/sp/column-formatting.schema.json",
    "elmType": "span",
    "children": {
        "operation": "?",
        "operands": [
            {
                "operation": "==",
                "operands": [
                    "[$ContentType]",
                    "Type 1"
                ]
            },
            [
                {
                    "elmType": "button",
                    "attributes": {
                        "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
                    },
                    "style": {
                        "cursor": "pointer",
                        "padding": "4px 8px",
                        "border-radius": "8px",
                        "margin": "6px",
                        "box-shadow": "1px 2px 6px 0 gray"
                    },
                    "txtContent": "Run Flow 1",
                    "customRowAction": {
                        "action": "executeFlow",
                        "actionParams": "='{\"id\":\"60010699-e281-4e0b-9f3b-7be01fd965a7\"}'"
                    }
                },
                {
                    "elmType": "button",
                    "attributes": {
                        "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
                    },
                    "style": {
                        "cursor": "pointer",
                        "padding": "4px 8px",
                        "border-radius": "8px",
                        "margin": "6px",
                        "box-shadow": "1px 2px 6px 0 gray"
                    },
                    "txtContent": "Run Flow 2",
                    "customRowAction": {
                        "action": "executeFlow",
                        "actionParams": "='{\"id\":\"64326439-e281-4e0b-9f3b-7be01fd965a7\"}'"
                    }
                }
            ],
            [
                {
                    "elmType": "button",
                    "attributes": {
                        "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
                    },
                    "style": {
                        "cursor": "pointer",
                        "padding": "4px 8px",
                        "border-radius": "8px",
                        "margin": "6px",
                        "box-shadow": "1px 2px 6px 0 gray"
                    },
                    "txtContent": "Run Flow 3",
                    "customRowAction": {
                        "action": "executeFlow",
                        "actionParams": "='{\"id\":\"60010699-e281-4e0b-9f3b-7be0f34ab547\"}'"
                    }
                }
            ]
        ]
    }
}

The idea is that Type 1 will get buttons for Flow 1 and Flow 2, and the other type will get for Flow 3.

I don't get any errors in the console. But the column is blank - i.e. neither side of the 'if' is happening so there must be something wrong with the JSON.

Or is there some limitation that you can't use an expression that results in an array, only a string?

Answer 1

In SharePoint Online JSON formatting, you cannot use an expression that results in an array. So, you need to create three buttons using JSON and show/hide them using display or visibility attribute in style property.

Try using below JSON code:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "span",
    "children": [
        {
            "elmType": "button",
            "attributes": {
                "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
            },
            "style": {
                "cursor": "pointer",
                "padding": "4px 8px",
                "border-radius": "8px",
                "margin": "6px",
                "box-shadow": "1px 2px 6px 0 gray",
                "display": "=if([$ContentType] == 'Type 1', 'block', 'none')"
            },
            "txtContent": "Run Flow 1",
            "customRowAction": {
                "action": "executeFlow",
                "actionParams": "='{\"id\":\"60010699-e281-4e0b-9f3b-7be01fd965a7\"}'"
            }
        },
        {
            "elmType": "button",
            "attributes": {
                "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
            },
            "style": {
                "cursor": "pointer",
                "padding": "4px 8px",
                "border-radius": "8px",
                "margin": "6px",
                "box-shadow": "1px 2px 6px 0 gray",
                "display": "=if([$ContentType] == 'Type 1', 'block', 'none')"
            },
            "txtContent": "Run Flow 2",
            "customRowAction": {
                "action": "executeFlow",
                "actionParams": "='{\"id\":\"64326439-e281-4e0b-9f3b-7be01fd965a7\"}'"
            }
        },
        {
            "elmType": "button",
            "attributes": {
                "class": "ms-fontWeight-bold ms-bgColor-themePrimary ms-fontColor-themeLighter ms-bgColor-themeLighter--hover ms-fontColor-themePrimary--hover ms-borderColor-themePrimary ms-borderColor-themePrimary--hover"
            },
            "style": {
                "cursor": "pointer",
                "padding": "4px 8px",
                "border-radius": "8px",
                "margin": "6px",
                "box-shadow": "1px 2px 6px 0 gray",
                "display": "=if([$ContentType] == 'Type 1', 'none', 'block')"
            },
            "txtContent": "Run Flow 3",
            "customRowAction": {
                "action": "executeFlow",
                "actionParams": "='{\"id\":\"60010699-e281-4e0b-9f3b-7be0f34ab547\"}'"
            }
        }
    ]
}

Answer 2

I found a workaround, which is to wrap each set of buttons in its own span, and set

"style": {
  "display": "=if([$ContentType] == 'Type 1', 'unset', 'none')"
}

on the first, and the same thing but with != instead of == on the second. But it feels hacky and I'd still like to know if it's possible to have complex objects or arrays as the result of an if, or only strings.