October 3, 2022

Samir Daoudi's Technical Blog

SharePoint, Office 365, C#, .Net, SQL Server News, Tips, Ebooks, Events, Webinars ….etc

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).



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

Leave a comment

You may have missed

Show Buttons
Hide Buttons

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: