I wanted an exhaustive list (to be updated in future with updates) of Column Formatting options from this GitHub repo.
It allows to format a SharePoint Online or SharePoint 2019 list or document library using some JSON code.
For SharePoint 2019, there are limitation and few things to know.
Click on each header, to access the detailed page about how to achieve each formatting.
Last article update : 13.05.2020
Project Register where ‘Current Status’ column is formatted based on the RYAG status.
Concatenate Currency Symbol to Numeric Columns (added 07/02/2018)
Formatting an ISBN (text column) to book cover image. Images are retrieved by calling Open Library Covers API.
This example retrieves book cover images based on their ISBN numbers by utilizing the Open Library Covers API. The API works by building a cover image URL with the ISBN.
Note – this format only provides the link shown above in the “List” column. The image is related to the text-local-imagesample. The image also just shows a link. The real power is in clicking on the link regardless of location.
User Profile Picture sizes
Location columns provide several properties that can be accessed to provide more information to users. This sample pulls out sub properties to turn the standard Display Name only to a full address and provides a link to Bing Maps for a given location.
This sample demonstrates creating a deep link to a Microsoft Teams chat. This format works both within Microsoft Teams and within SharePoint Online.
The following image shows a list with a custom hover added to a List:
On hover – Metadata on the column “Status” is made available via column formatting
This sample demonstrates calculating the difference between 2 dates. In this sample the age in years is calculated based on the date of birth and the date of death. This format could easily be adjusted to calculate a different unit of time (months, days, hours, minutes, etc.) by adjusting the multiplier.
You can UI Fabric Icons within your column and view formats. This sample demonstrates combining multiple icons by overlaying to create colorful icons that can indicate more information than a single icon can.
Overlays are done by using a parent element with a
position value of
relative. Then we can have the child elements use a
position value of
absolute to precisely overlay the icons where we want them.
This sample demonstrates using a solid icon (HeartFill) to provide a colored background to our icon and overlaying a wireframe icon to create an outline. The icons are shown conditionally based on the value. Using this technique with the various Solid, Mask, and Fill icons available can create far more icons than are currently available and allows more precise control of the coloring.
This sample demonstrates combining a fixed SVG (gauge background) with a dynamic SVG (needle). It makes understanding number columns (percent) very intuitive.
Again those samples are all available on PNP Github.
Which one are you using ? Which one you wish to see as Column formatting ?