SharePoint Online. Column JSON formatting

Column formatting feature allows us to customize field rendering without using client scripts (only HTML and CSS).

Note
JSON-based column formatting available only for new experience (Modern UI). Old SharePoint UI is not supported.

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

The following column types are not supported yet:

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

Referenced field. You can use only fields that are presented in the current view. The 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. Mask column value on a small screen

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

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

These values counted only on rendering the list and do not change on window resizing (unless the 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 the screen width less than 900 pixels we see dots instead of the value:

Cell value is masked on a small screen

Cell value is masked on a small screen

On a large screen we see the value:

Cell value visible on a large screen

Cell value visible on a large screen

Sample #2. Show values in one line

SharePoint list or document library view can contain columns with a large text inside. This leads to the fact that the rows in the view can be of different heights, which makes it inconvenient to work with data. With the new JSON formatting capability, it's possible to show any column in a single-line with no wrapping.

The following formatting makes the cell value to be in a single line:

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

Cell value with no wrapping:

Show values in a single-line

Show values in a single-line

Sample #3. Show Lookup ID if the value is empty

SharePoint Modern UI has a small gap: lookup column is empty if the field to show (Title column by default) is empty. JSON formatting allows provides us a workaround to show the ID of the lookup item in case the value is empty.

The following sample is to apply the workaround (show @currentField.lookupId if @currentField.lookupValue is empty):

{
    "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:

Show lookup id if the value is empty

Show Lookup ID if the Value is empty

Sample #4. Show user picture

People column in the modern UI has a set of properties that allows us to present the value in a rich format.

Properties of the user column which can be used in formatting:

  • id
  • title
  • email
  • sip
  • picture

You can get user profile image with a link of the following format:

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

The following is a sample to show additional user information (image, title, and 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"
                                            ]
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Username is a link to delve profile and email is a link to send a message:

Split cell in SharePoint Modern UI

Split cell

Warning
The user column in SharePoint can contain not only users but Security and SharePoint groups. Be careful when using such formatting to avoid broken links.

Sample #5. Split cell

The last sample for today is to show the capabilities of the new formatting approach - building up a table inside of the cell.

The following sample renders 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"
                        ]
                    }
                }
            ]
        }
    ]
}

Table inside of the cell

Table inside of the cell

Samples

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

Vitaly Zhukov

Vitaly Zhukov

SharePoint Architect, Developer, Technical Trainer, Microsoft MVP (Office Development). Above 15 years of total experience working with SharePoint, Dynamics CRM, Office 365, and Microsoft stack development.

You May Also Like

SharePoint Online. Column JSON formatting. Part 2

SharePoint Online. Column JSON formatting. Part 2

SharePoint Online. Getting User Picture URL

SharePoint Online. Getting User Picture URL

SharePoint Online. Document Thumbnail

SharePoint Online. Document Thumbnail

SharePoint New Experience

SharePoint New Experience