2

If you use the Fill background color template for formatting a date column on a modern SharePoint list/library, and you switch to Advanced mode to view the JSON, it makes extensive use of a colon (:) operator. This is undocumented and seems to work exactly like the ternary (?) operator - I tried replacing all the colon operators with ternary operators and the formatting behavior was unchanged.

What's the significance of the colon (:) operator?

Example - this is the JSON generated by the Fill background color template:

{
    "elmType": "div",
    "style": {
        "padding": "0 4px"
    },
    "attributes": {
        "class": {
            "operator": ":",
            "operands": [
                {
                    "operator": "==",
                    "operands": [
                        "@currentField",
                        ""
                    ]
                },
                "",
                {
                    "operator": ":",
                    "operands": [
                        {
                            "operator": "<",
                            "operands": [
                                {
                                    "operator": "Date()",
                                    "operands": [
                                        {
                                            "operator": "toDateString()",
                                            "operands": [
                                                "@currentField"
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "operator": "Date()",
                                    "operands": [
                                        {
                                            "operator": "toDateString()",
                                            "operands": [
                                                "@now"
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        "sp-css-backgroundColor-successBackground",
                        {
                            "operator": ":",
                            "operands": [
                                {
                                    "operator": "==",
                                    "operands": [
                                        {
                                            "operator": "Date()",
                                            "operands": [
                                                {
                                                    "operator": "toDateString()",
                                                    "operands": [
                                                        "@currentField"
                                                    ]
                                                }
                                            ]
                                        },
                                        {
                                            "operator": "Date()",
                                            "operands": [
                                                {
                                                    "operator": "toDateString()",
                                                    "operands": [
                                                        "@now"
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                },
                                "sp-css-backgroundColor-warningBackground",
                                {
                                    "operator": ":",
                                    "operands": [
                                        {
                                            "operator": ">",
                                            "operands": [
                                                {
                                                    "operator": "Date()",
                                                    "operands": [
                                                        {
                                                            "operator": "toDateString()",
                                                            "operands": [
                                                                "@currentField"
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "operator": "Date()",
                                                    "operands": [
                                                        {
                                                            "operator": "toDateString()",
                                                            "operands": [
                                                                "@now"
                                                            ]
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        "sp-css-backgroundColor-errorBackground",
                                        ""
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    "txtContent": "@currentField"
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.