Column Formatting on SharePoint Online (The Easy Way)

Example of Column Formatting

Column formatting on SharePoint Online is an awesome way to make your list or document library more visually appealing by manipulating how your data is displayed. This can help you do things like conditional formatting or key performance indicators in your lists and libraries. Modern SharePoint leverages simple JSON (JavaScript Object Notation) objects, which will draw elements when a field is displayed and apply the styles as defined in your JSON object.

In this article, I will cover a specific use case that we implemented for one of our clients using column formatting on SharePoint Online (Modern Experience).

Before we dive into the solution, there are two important prerequisites to help you perform the process yourself.

  1. Please refer to this article to get familiar with the syntax all the way from basic to advanced column formatting including logical operands.
  2. Download SP formatter (a chrome extension) which provides valuable assistance in constructing your JSON code. By clicking on the above-mentioned hyperlink, you will be prompted to add the extension. Click on the “Add to Chrome” button. Once you have your extension installed, you will see the SP Formatter Icon pop on the top right. Click to enable it.



  • All uploaded documents need to open in a new tab with a display view instead of default edit mode.

Step 1: Navigate to the “Name” Column in your document library.


Step 2: Follow highlighted clicks below to construct JSON object.


Step 3: Enable enhanced column formatter


Step 4: Paste below JSON removing my notations in brackets.


“$schema”: ““, (load JSON schema for SharePoint Online only, use this schema for SP2019:

“elmType”: “a”, (wrap current field with  <a> tag)

“txtContent”: “@currentField”,

“attributes”: { “target”: “_blank”,

“href”: “=if(indexOf([$ContentTypeId], ‘0x0120’) >= 0, ‘?id=’ + [$FileRef], @currentWeb + ‘/_layouts/15/Doc.aspx?sourcedoc=’+ [$UniqueId] + ‘&action=View’)”



(check if it is a folder, if yes –> open in a default mode otherwise open it in a Preview mode)


Step 5: Click “Save” and you have overwritten the default edit mode behavior of a document in a document library.


Now, after clicking on a document name, it opens in a new tab under a display mode. The final outcome should look like this:



Klarinet Solutions specializes in enhancing system performance, optimizing user experience, and developing streamlined processes that support business objectives. To find out more about how we can help you optimize SharePoint, O365, or PowerApps, please contact our solutions delivery team or reach us by phone at (866) 211-8191. 


Share this page