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?

Ganesh Sanap - MVP · Accepted Answer · 2020-07-13 05:32:21Z

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\"}'"
            }
        }
    ]
}

Welcome, glad it helped you. Please Upvote(^) and accept as an Answer if you found this answer useful. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jul 13, 2020 at 8:36

limos · Accepted Answer · 2020-07-12 19:54:45Z

0

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.

edited Jul 12, 2020 at 19:54

answered Jul 12, 2020 at 16:58

limos

1034 bronze badges

Add a comment |

Stack Exchange Network

Custom column formatting: Display an array of elements conditionally

2 Answers 2

Your Answer

Hot Network Questions

Custom column formatting: Display an array of elements conditionally

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions