SharePoint Online. Column JSON formatting

Column formatting features allows to customize field redering without using client scripts (only HTML and CSS).

Column formatting has some limitations you have to know before starting to use this feature:

Supported column types. Following columns is not supported yet:

  • Managed Metadata
  • Filename (in Document Libraries)
  • Calculated
  • Retention Label

Referenced field. You can use only fields which are presented in the current view. ID field is always presented.

SharePoint Online. Column formatting is not available for on-premise SharePoint instances.

Despite the limitations column formatting can help you to make your lists more friendly and useful. So here is a couple of samples of using column formatting:

Sample #1. Hide value on small screen

There are two properties which can be used to get heigth and width of the window:

  • @window.innerHeight - height of the browser window in pixels
  • @window.innerWidth - width of the browser window in pixels

These values counted only on rendering the list and does not change on window resizing (unless page is refreshed manually).

The following is an example of showing field value only if screen width greater than 900 pixels. Otherwise showed "..." instead of value:


{
  "elmType": "div",
  "txtContent": {
    "operator": "?",
    "operands": [
      {
        "operator": "<=",
        "operands": [
          "@window.innerWidth",
          900
        ]
      },
      "...",
      "@currentField"
    ]
  }
}

If screen width less than 900 pixels we see dots:


On a large screen we see the value:



Sample #2. Show values in one line

The following is an example of limiting cell value to single line of text:


{
    "elmType": "div",
    "style": {
        "word-wrap": "initial",
        "white-space": "nowrap",
        "overflow": "hidden"
    },
    "txtContent": "@currentField"
}

Cell value in one line:



Sample #3. Show lookup id if lookup value is empty

The following is JSON-formatting which shows @currentField.lookupId if @currentField.lookupValue equals empty string:


{
    "elmType": "a",
    "txtContent": {
        "operator": "?",
        "operands": [
            {
                "operator": "==",
                "operands": [
                    "@currentField.lookupValue",
                    ""
                ]
            },
            "@currentField.lookupId",
            "@currentField.lookupValue"
        ]
    },
    "attributes": {
        "href": {
            "operator": "+",
            "operands": [
                "/lists/FormattedColumnsteams/DispForm.aspx?ID=",
                "@currentField.lookupId"
            ]
        },
        "target": "_blank"
    }
}

No more missing lookup links:



Sample #4. Show user picture

People field has the following properties which can be used in formatting:

  • id
  • title
  • email
  • sip
  • picture

For picture better use a link of format:

/_layouts/15/userphoto.aspx?username={UserLogin}

The following is a sample for showing user information (image, title, email) instead of just a name:


{
    "elmType": "div",
    "children": [
        {
            "elmType": "div",
            "style": {},
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "float": "left",
                        "margin-right": "5px"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "style": {
                                "width": "32px",
                                "display": "inline-block"
                            },
                            "attributes": {
                                "src": {
                                    "operator": "+",
                                    "operands": [
                                        "/_layouts/15/userphoto.aspx?username=",
                                        "@currentField.email"
                                    ]
                                }
                            }
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "children": [
                        {
                            "elmType": "div",
                            "style": {
                                "word-wrap": "initial",
                                "white-space": "nowrap"
                            },
                            "children": [
                                {
                                    "elmType": "a",
                                    "txtContent": "@currentField.title",
                                    "attributes": {
                                        "target": "_blank",
                                        "href": {
                                            "operator": "+",
                                            "operands": [
                                                "/_layouts/15/userdisp.aspx?ID=",
                                                "@currentField.id"
                                            ]
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "word-wrap": "initial",
                                "white-space": "nowrap"
                            },
                            "children": [
                                {
                                    "elmType": "a",
                                    "txtContent": "@currentField.email",
                                    "attributes": {
                                        "href": {
                                            "operator": "+",
                                            "operands": [
                                                "mailto:",
                                                "@currentField.email"
                                            ]
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

User name is a link to delve profile and email is a link to send a message:



Sample #5. Split cell

The last formatting sample for today: split cell.

The following is a sample for render table 2x3 inside the cell:


{
    "elmType": "div",
    "style": {
        "width": "100%",
        "display": "table"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "display": "table-row"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color": "yellow",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "1"
                        ]
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color": "#bad80a",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "2"
                        ]
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color":"#00B294",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "3"
                        ]
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "display": "table-row"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color": "#71afe5",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "4"
                        ]
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color": "#a6a6a6",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "5"
                        ]
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "table-cell",
                        "background-color":"#b4a0ff",
                        "text-align": "center"
                    },
                    "txtContent": {
                        "operator": "+",
                        "operands": [
                            "[$ID]",
                            "-",
                            "6"
                        ]
                    }
                }
            ]
        }
    ]
}



Samples

Samples are available here: https://github.com/vzhukov/sp-conditional-formatting.


Share

Comments