SharePoint Online List Colum Formatting using JSON

Today, I will explain how you can take full advantage of the new lovely feature in SharePoint online, which allows to format lists’ column based on their values or another column value.

A bit of history, in the past, I have used to implement these functionnalities in SharePoint 2010 using XSLT formatting from SharePoint Designer, and yes, it was dirty to use XSLT (btw, I have never been a big fun of XSLT).

Recently, Microsoft announced the Column formatting feature which can be easily achievable using JSON.

Here is a before / after screenshot of the document library which has extra fields (metadata).

Before

After

As you can see, I have applied column formatting including an Icon and a background.

Here in this example, I applied the custom formatting to two columns which are the Classification and Approval Status.

The JSON code for the approval status is the following

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Approved', 'sp-field-severity--good', if(@currentField == 'Pending', 'sp-field-severity--severeWarning', if(@currentField == 'Rejected', 'sp-field-severity--blocked', 'sp-field-severity--blocked'))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Approved', 'CompletedSolid', if(@currentField == 'Pending', 'SkypeCircleClock', if(@currentField == 'Rejected', 'StatusErrorFull', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

The JSON code refers to the Fabric UI icons and the Microsoft SharePoint Reference’ guide https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting