What does the colon operator do in SharePoint column formatting JSON?

Question

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" }

t0mgerman · Accepted Answer · 2021-02-17 02:24:43Z

You were correct. It's just another ternary operator.

The first operand is the condition, the second operand is an object that defines values or logic for when that condition is true, and the third operand defines values or logic for false.

As you can see by the included JSON, the falsey branches often contain other conditional statements, effectively making the third parameter akin to "else" in an "if...else" - nesting lots of these statements allows you to test lots of different conditions.

There is a good Column Formatter tool in the @pnp/sp-dev-solutions repo which actually includes some of the uglified source for column formatting if you're curious about what's going on behind the scenes...

In this file at line 397 you'll see it actually checks for both ":" and "?":

return ":" === o || "?" === o ? this._ternaryEval(/* clipped for brevity */)

And the source for the _ternaryEval function, just uses a regular ternary operator on the operands:

e.prototype._ternaryEval = function(e, t, r, n) { void 0 !== t && void 0 !== r && void 0 !== n || this._err("operandNOnly", 3..toString(), JSON.stringify(e)); return n ? t : r // <---- Here }

It would be cool if MS made the ColumnFormatter class available as part of one of their SPFX libraries, as the formatter outputs nice HTML that would be useful in things like DetailsLists in custom web parts etc.

Stack Exchange Network

What does the colon operator do in SharePoint column formatting JSON?

1 Answer 1

Hot Network Questions

What does the colon operator do in SharePoint column formatting JSON?

1 Answer 1

Related

Hot Network Questions